码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-04-24 14:05:49      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:ima   eve   hidden   name   png   ceil   stat   level   javascrip   

效果为:当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="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="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>

 

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

标签:ima   eve   hidden   name   png   ceil   stat   level   javascrip   

原文地址:http://www.cnblogs.com/yongwang/p/6756396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!