js星星打分

最新推荐文章于 2024-07-20 09:19:45 发布

youngYellow

最新推荐文章于 2024-07-20 09:19:45 发布

阅读量831

点赞数

分类专栏： htlm 文章标签： css

htlm 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

http://www.jb51.net/article/86255.htm

里面有源代码。需要要下载他提供的所有内容，

由于是全局样式，所以自己改了一下

<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  ul.ha {
  padding-left: 0;
  overflow: hidden;
 }
ul.ha li.b  {
  float: left;
  list-style: none;
  width: 27px;
  height: 27px;
  background: url(http://files.jb51.net/file_images/article/201606/2016060910202011.gif)
 }
 ul.ha li.b a.c {
  display: block;
  width: 100%;
  padding-top: 27px;
  overflow: hidden;
 }
 ul.ha li.light {
  background-position: 0 -29px;
 }
 </style>
</head>
<body>
 <ul class="ha">
  <li class=" b"><a class="c" href="javascript:;">1</a></li>
  <li class=" b"><a class="c" href="javascript:;">2</a></li>
  <li class=" b"><a class="c" href="javascript:;">3</a></li>
 </ul>
 
 <button οnclick="getnum()">测试评分按钮 </button>
 
 
 <script>
var num=finalnum = tempnum= 0;
var lis = document.getElementsByTagName("li");
//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 ha b c" : " ha b c ";//点亮星星就是加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(0);//传入值为0，finalnum为tempnum,初始为0
 }
 lis[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星
  tempnum= this.index;
 }
 function getnum(){
 alert(finalnum)
 }
}


</script>
</body>
</html>