原生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;
            width: 80%;
            font-size: 12px;
        }
        #star-div{
            margin:5px;
            font-size: 0;
        }
        #star-div a{
            display: inline-block;
            width: 21px;
            height: 21px;
            background: url(https://files.cnblogs.com/files/susufufu/star0.gif) no-repeat;

}
        #star-div .on{
            background: url(https://files.cnblogs.com/files/susufufu/star1.gif) no-repeat;
        }
        #star-info{
            position: absolute;
            top: 55px;
            left: -30px;
            display: none;
            width: 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>
<pre><code><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>

posted on 2016-08-20 14:31 SuriFuture 阅读(2534) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

导航

公告