原生JS實現-星級評分系統_ZenDei技術網路在線

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

-Advertisement-

今天我又寫了個很酷的實例：星級評分系統（可自定義星星個數、顯示信息）使用預設值5個星星，預設信息 `var msg = [........]; sufuStar.star(10,msg);`自定義星星個數為10、顯示信息msg格式參考預設值，條數必須和星星個數一致；自己實現一些實例，有個好處，能 ...

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

}
        #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>
</head>
<body>

<span>點擊星星打分:</span>
    
    
    <span id="star-span"></span>
    <p id="star-info">
    </p>

</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

html5 canvas首屏自適應背景動畫迴圈效果代碼

模板描述：html5 canvas首屏自適應背景動畫迴圈效果代碼由於動態圖太大，怕以後伺服器受不了，所以現在都改為靜態圖了，大家點擊演示地址一樣的，希望大家喜歡，你們的支持就是小海的動力！！ ...
css_03

1、字體屬性：①字體格式：font-family：取值：“microsoft yahei”/Arial……；②字體大小：font-size：取值：pt/px；③字體加粗：font-weight：取值：normal（預設值）/bold（粗體，hn，b，strong的預設值）/400-900；④字體樣式 ...
前端之HTML知識點整理

一、html概述 htyper text markup language 即超文本標記語言超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。標記語言: 標記（標簽）構成的語言. 網頁==HTML文檔，由瀏覽器解析，用來展示的靜態網頁：靜態的資源，如xxx.html 動態網頁 ...
JavaScript學習筆記1之基礎知識點

一、什麼是JavaScrip JavaScript是一種動態類型、弱類型、基於原型的客戶端腳本語言。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，在HTML網頁上使用，用來給HTML網頁增加動態功能。動態：在運行時確定數據類型，通常變數的類型取決於值的類型 ...
<![CDATA[的web使用簡單說明

html、javascript會涉及到三個解析器，html解析器、xml解析器、javascript解析器。那麼好了，問題來了，以上代碼經常混編在一起，各自有各自的規則，終究會有衝突的，如下就是衝突。根據W3C XHTML 1.0的規定：在XHTML中，因為<和&這兩個符號有特殊意義（小於號用於標 ...
網站logo正確寫法，個人拙見，不喜勿噴

網站logo既要考慮seo又需要用圖片代替網站名字，所有H1標簽帶來的權重還是需要使用有些人喜歡直接把<H1></H1>標簽直接hidden掉，個人喜歡使用css Text-indent還是放到屏幕外 .logo h1 { overflow: hidden; position: absolute; ...
正則表達式個人總結(二)：正則表達式語法的深入理解第二部分

4.選擇與分組（1）.分組字元組[]:表示匹配若幹個字元之一字元組可以淺顯的理解為一些字元的組合，字元組與普通字元的區別在於：abc普通字元表示匹配a接下來b接下來c而字元組[abc]表示在同一位置匹配a或者b或者c；由於字元組本身的含義也決定了可以將這個字元組看成是一個普通的特殊字元。普通 ...
webpack學習總結

前言在還未接觸webpack，就有幾個疑問： 1. webpack本質上是什麼？ 2. 跟非同步模塊載入有關係嗎？ 3. 可否生成多個文件，一定是一個？ 4. 被引用的文件有其他非同步載入模塊怎麼辦？在學習webpack時，也有幾個疑問： 1. webpack有哪些常用的插件？ 2. 常用的Load ...