原生JS实现-星级评分系统

今天我又写了个很酷的实例：星级评分系统（可自定义星星个数、显示信息）
sufuStar.star();使用默认值5个星星，默认信息
var msg = [........]; sufuStar.star(10,msg);自定义星星个数为10、显示信息msg格式参考默认值，条数必须和星星个数一致；

自己实现一些实例，有个好处，能增加应用各知识点的熟练度，还能检验出自己的薄弱项！一经发现，立即翻API文档恶补！

不知道是不是我太笨，这个实例居然写了整整一天！

不废话了，先说下这个实例涉及的知识点：

用CSS的border来画个三角形，并用before来把它加到其它元素上；
学习如何用CSS来定位元素；
学习事件的代理；
如何优化性能；
String对象的match方法的应用，正则表达式的应用；
注册事件与事件处理，需要兼容IE的写法；
学习如何利用‘||’给变量设置默认值；
简化代码：将可能要重复写的代码拿出来，单独写成一个函数；

下面是带注释的完整代码，碰到不懂得就查文档吧，以我目前的水平只能写成这样了，若有好的建议，欢迎前辈指出！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #star{
            position: absolute;
            left: 0;
            right: 0;
            top: 30px;
            bottom: 0;
            margin: auto;
             80%;
            font-size: 12px;
        }
        #star-div{
            margin:5px;
            font-size: 0;
        }
        #star-div a{
            display: inline-block;
             21px;
            height: 21px;
            background: url(http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat;
<pre><code>    }
    #star-div .on{
        background: url(http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat;
    }
    #star-info{
        position: absolute;
        top: 55px;
        left: -30px;
        display: none;
         155px;
        height: 50px;
        padding: 2px;
        line-height: 17px;
        border-radius: 8px;
        background-color: gold;
        z-index: 5;
    }
    #star-info:before{
        content: '';
        border-bottom: 10px solid gold;
        border-left: 10px solid rgba(0,0,0,0);
        border-right: 10px solid rgba(0,0,0,0);
        position: absolute;
        left: 35px;
        top: -10px;
    }
    #star-span{line-height: 14px}
    #star-info strong,#star-span strong{
        color: red;
    }
</style>
<script>
    window.onload = function(){
        var sufuStar = function (){
            //工具函数
            function gbyId(id){return document.getElementById(id);}

//调用执行: sufuStar.star(num,myMsg),参数可为空,参数num,myMsg将设为默认值
        sufuStar.star();
    }
</script>
</code></pre>
</head>
<body>
<div id="star">
    <span>点击星星打分:</span>
    <div id="star-div">
    </div>
    <span id="star-span"></span>
    <p id="star-info">
    </p>
</div>
</body>
</html>

相关阅读:
正则表达式
悟透JavaScript
2时序逻辑电路寄存器
MSP430F5438时钟系统
2时序逻辑电路移位寄存器
1组合逻辑电路基本门电路
1组合逻辑电路多路选择器与多路分解器
2时序逻辑电路触发器与锁存器
1组合逻辑电路编码器和译码器
ASCII与汉字编码方法

原文地址：https://www.cnblogs.com/susufufu/p/5790384.html