做数字判断显示相应的图标

效果为：当input值为0时，右侧图片字体均为为暗色，当input值>0时，右侧图片及文字均变色；

当值为1-5/6-10/11-15时，小图标显示的数量为相应的数字和相应的星星/砖石/皇冠。小图标数量最多为5个。

如图所示：

html代码为：

 <div class="caution-con bgf"><a class="href" href="javascript:;"></a><span class="caution-icon"><img src="data:images/icon3.png"></span><p class="caution-type"><span class="block fz30">奥迪A6L（白色）</span><span class="block fz28 spans c4">豫A00000</span><input class="hidden" type="hidden" name="level" value="0"/><span class="icon-right block spant"><img src=""><img src=""><img src=""><img src=""><img src=""></span></p><p class="caution-state fr"><span class="block submit-icon"><img src=""></span><span class="span-gray fz30"><i>￥</i><u>350</u></span></p></div><div class="caution-con bgf"><a class="href" href="javascript:;"></a><span class="caution-icon"><img src="data:images/icon3.png"></span><p class="caution-type"><span class="block fz30">奥迪A6L（白色）</span><span class="block fz28 spans c4">豫A00000</span><input class="hidden" type="hidden" name="level" value="7"/><span class="icon-right block spant"><img src=""><img src=""><img src=""><img src=""><img src=""></span></p><p class="caution-state fr"><span class="block submit-icon"><img src=""></span><span class="span-gray fz30"><i>￥</i><u>350</u></span></p></div>

js代码为：

<script type="text/javascript">
var inputs=$("input[name='level']");
for(var k=0;k<inputs.length;k++)
{var value = inputs.eq(k).val();if(value  == '0'){// 右侧图标显示及字体变色$('.submit-icon img').eq(k).attr('src','images/submit2.png');$('.span-gray').eq(k).css({'color':'#c8c8c8'});$('.icon-right').eq(k).css({'opacity':'0'});}else{$('.submit-icon img').eq(k).attr('src','images/submit1.png');$('.span-gray').eq(k).css({'color':'#ff3b3b'});var $img=$('.icon-right img');var num = Math.ceil((value-1)/5+0.1);var pngurl = 'images/icon'+num+'.png';for(var i=0;i<value%5;i++){$img.eq(k*5+value%5-i-1).attr({'src':pngurl})$img.eq(k*5+value%5-1).nextAll().css({'opacity':'0'});}if(value%5 == 0){for(var i=0;i<5;i++){$img.eq(k*5+i).attr({'src':pngurl});}}}
}</script>

转载于:https://www.cnblogs.com/yongwang/p/6756396.html

做数字判断显示相应的图标相关推荐

使用ue4做一个可以显示任意数字变化的计数器方法
使用ue4做一个可以显示任意数字变化过程的计数器功能描述: 该功能可以任意输入一个数值然后通过UI绑定数值的方式来\显示数值变化的过程,例如可以显示从0变到100 或者从100变到0,同时还支持调节 ...
python怎么显示分数_Python 输入一个数字判断成绩分数等级的方法
Python 输入一个数字判断成绩分数等级的方法成绩分数等级为: 100-90 A 90-80 B 80-70 C 70-60 D 60以下 F 实现判断分数等级是一个很简单的数学问题,只要你输入的 ...
判断参数大于0_能做条件判断的文本函数
我们知道文本函数的一般作用就是查找.替换.提取文本等等,可是能做条件判断的文本函数你见过吗?不仅如此,它还可以让日期变数字.数字变大写.金额变万元等等.说到这里,屏幕前的小伙伴有猜到它是谁吗? 在Ex ...
android 和风图标字体移植显示墨迹天气图标
android studio版本:21.2.1 例程:newareaautov1 和风天气字体图标使用方法见: android 显示和风天气字体图标_kim5659的博客-CSDN博客_qweathe ...
用 JavaScript 验证只能输入数字，并做数字加总
开发系统时,常会需要将使用者在多个 TextBox 中输入的数字,做加总的计算,此时必须验证使用者只能输入数字.如下图 1 所示,有时可能还需要用 JavaScript 做数字的实时加总计算,并将计算 ...
java 任务栏程序_如何在任务栏显示java程序图标
该代码实现了在系统右下角的任务栏中显示程序的图标,并且最小化程序后单击图标可以显示出来这个程序窗口 import java.awt.Color; import java.awt.Image; impo ...
js布尔类型+数字判断_C ++中的布尔数据类型
js布尔类型+数字判断 In this article, we'll take a look at the Bool datatype in C++. 在本文中,我们将介绍C ++中的Bool数据类型 ...
计算机开机后黑屏鼠标显示桌面图标,win10系统电脑启动开机黑屏不显示只有鼠标图标的处理办法...
win10系统使用久了,好多网友反馈说win10系统电脑启动开机黑屏不显示只有鼠标图标的问题,非常不方便.有什么办法可以永久解决win10系统电脑启动开机黑屏不显示只有鼠标图标的问题,面对win10系 ...
linux桌面无法显示U盘,电脑桌面右下角不能显示u盘图标解决方法
该楼层疑似违规已被系统折叠隐藏此楼查看此楼电脑桌面右下角不能显示u盘图标解决方法,大家都遇到过这种情况把,u盘插入电脑,结果右下角不显示u盘**入的图标. 现象:任务栏小喇叭和u盘图标显示有问题, ...

做数字判断显示相应的图标

做数字判断显示相应的图标相关推荐

最新文章

热门文章