js实现星星打分

科技前沿 • 2025-01-29 11:36 • 阅读 37

大家好，我是讯享网，很高兴认识大家。

先发那个一张效果图

用原生js实现一个类似是淘宝评价打分的效果，比较简单，直接上代码

0.用到的素材

星星图标，选中和未选中两种状态，放在下面👇，可以直接下载

1.页面内容

 // 利用ul标签，设置五颗星星,class=light是选中的效果 <ul> <li class='light'></li> <li></li> <li></li> <li></li> <li></li> </ul>

讯享网

2.css设置

讯享网ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: none; width: 27px; height: 27px; background: url(img/star.png) no-repeat center; } ul li.light { background: url("img/star-checked.png") no-repeat center; }

3.js代码

var lis = document.getElementsByTagName("li"); var num= finalnum = tempnum= 0; //num:传入点亮星星的个数 //finalnum:最终点亮星星的个数 //tempnum:一个中间值 function fnShow(num) { finalnum= num || tempnum;//如果传入的num为0，则finalnum取tempnum的值 for (var i = 0; i < lis.length; i++) { lis[i].className = i < finalnum? "light" : "";//点亮星星就是加class为light的样式 } } for (var i = 1; i <= lis.length; i++) { lis[i - 1].index = i; lis[i - 1].onmouseover = function() { //鼠标经过点亮星星。 fnShow(this.index);//传入的值为正，就是finalnum } lis[i - 1].onmouseout = function() { //鼠标离开时星星变暗 fnShow(-1);//传入值为0，finalnum为tempnum,初始为0 } lis[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星 tempnum= this.index; } }

这样就能简单实现啦~完结~*★,°*:.☆(￣▽￣)/$:*.°★* 。

js实现星星打分

0.用到的素材

1.页面内容

2.css设置

3.js代码

相关推荐