原生JS實現-星級評分系統

本文轉載自查看原文 2016-08-20 14:31 1949 實戰JavaScript/ 星級評分

今天我又寫了個很酷的實例：星級評分系統（可自定義星星個數、顯示信息）
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(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;
        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>
<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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 原生js實現星級評分 JS實現星級評分 JS實現星級評分 js 實現星級評分【javascript】原生 js 星級評分 KTV評分系統實現總結 js實現星級評分之方法一 jQuery實現星級評分純css實現星級評分效果 js實現星級評分效果（非常規5個li代碼）