html评论中星星点亮的效果jquery代码

2 篇文章 0 订阅
1 篇文章 0 订阅

'img/star165.png' :空星星图片

img/star-icon.png:实星星图片

<body>

<ul>
<li  οnclick="lightstar(1)"><img id="star1" src='img/star165.png' /></li>
<li  οnclick="lightstar(2)"><img id="star2" src='img/star165.png' /></li>
<li  οnclick="lightstar(3)"><img id="star3" src='img/star165.png' /></li>
<li  οnclick="lightstar(4)"><img id="star4" src='img/star165.png' /></li>
<li  οnclick="lightstar(5)"><img id="star5" src='img/star165.png' /></li>
</ul>
<div id="starnumber" style="display: none;"></div>
</body>
<style type="text/css">
ul li{
       list-style: none;
   height: 20px;
   width: 20px;
  margin-left: 5px;
   float: left;
    }
   img{
height: 20px;
width: 20px;
    }

</style>

       <script>

 function lightstar(num){
    //再点击之前将之前点击过的恢复到全为空的状态
    for(var i=1;i<6;i++){
    $("#star"+i).attr("src","img/star165.png");
    }
    var num=num;
    //根据点击的数字  来依次点亮星星
    for(var i=0;i<num;i++){
    $("#star"+(i+1)).attr("src","img/star-icon.png");
    }
    //再将点亮的数字传回去 后期 便于取值
    $("#starnumber").html(num);
   }
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值