原生js的评分效果代码_网站常用

内容介绍

1. 鼠标移上去的时候星星变亮，下面的文字显示。鼠标移出的时候星星变黑，下面文字不显示。

2. 鼠标移到某个星星上，它之前的所有星星都会亮。

3. 鼠标移到某个星星上并点击，会显示打分结果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
   ul,li{margin:0;padding: 0;list-style: none}
   .box{ width: 300px;height: auto;margin:0 auto; }
   ul{overflow: hidden;}
   .star>li{float: left;margin-top: 15px;font-size: 32px;cursor: pointer}
   .active{color: #f00}
   .text{width: 100px;height: 38px;line-height: 38px;border: solid 1px #ccc;text-align: center;margin-top: 20px;display: none;}
</style>
<script>
    window.onload = function(){
        score();
    }

function score(){
        var start = document.getElementById("star");
        var startLi =start.getElementsByTagName("li");
        var score =document.getElementById("result");
        var text = document.getElementById("text-word");
        var word = ['很差','差','一般',"好","很好"]
        for(var i=0,len=startLi.length;i<len;i++){
            startLi[i].index = i;//给li添加一个索引值
            startLi[i].onmouseover = function(){
                text.style.display = "block";
                text.innerHTML = word[this.index];//this指当前鼠标经过的对象li
                for(var j=0;j<=this.index;j++){//鼠标经过当前li,<=当前li的索引值的所有li都变亮
                    startLi[j].className="active";
                }
            }

startLi[i].onmouseout =function(){
                text.style.display = "none";
              for(var j=0;j<startLi.length;j++){
                    startLi[j].className="";
                }
            }

startLi[i].onclick =function(){
                score.innerHTML = (this.index+1)+"分";
             }

}
    }

</script>
</head>
<body>
    <div class="box">
        <div class="score">
            <span>打分结果</span>
             <span class="result" id="result"></span>
        </div>
        <ul  class="star" id="star">
            <li>★</li>
            <li>★</li>
            <li>★</li>
            <li>★</li>
            <li>★</li>
        </ul>
        <div class="text" id="text-word">一般</div>
    </div>
</body>
</html>

本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行

运行代码复制代码另存代码[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

全站搜索

原生js的评分效果代码

内容介绍

最新推荐

本周排行