CSS 星星評分器效果 #web前端

天給大家帶來的是一個評分的效果，大家可以看我把它放大一下，當然簡單。

·首先在vivo水土容器里面放了五顆星，剛好只有五顆。我用的開發工具是hb的x開發uni up的，主要要看css樣式部分。大家可以看到vivo這里是聽特別簡單。

·下面就是css部分，首先方式是背景顏色，這大家應該都知道。整體的效果的移動，為了方便我就把它給放到了中間位置給移一下。這句話也不對框就是單選，大家可以看到每顆星都是一個輸入框，有一樣式的。

·然后進行隱藏當做單選，進行了向右的對齊，默認的顏色，這也包括這個都有。

·還有一個就是講過了，下面就是buffer尾顏色。

·最后就進行了鼠標懸浮移動，進行顏色的改變，過渡的效果。

其實就幾個，大家可以看一下就很少，但是很多地方都可以用到文章的評分、打新之類的，感興趣的可以動手自己去寫一下。

喜歡的可以轉發點贊收藏一下，想要不想寫，想要元代碼的可以找我嘮嗑進行獲取就行，因為今天先講到這里。

.css3星星評分代碼演示

用CSS3控制手動星星評分的代碼，可以點從一星到五星。

代碼地址：http://www.gbtags.com/gb/rtreplayerpreview/1204.htm

2.簡單實用的CSS動畫復選框

這段代碼可用在確認與取消，簡單實用。

代碼地址：http://www.gbtags.com/gb/rtreplayerpreview/1201.htm

3.百度echart環餅圖

此代碼表現如何制作一個可以顯示百分比的圓環圖，可用在適當的網頁中。

代碼地址：http://www.gbtags.com/gb/rtreplayerpreview/1191.htm

4.CSS實現的電路板效果

本代碼使用CSS實現了一個電路板的效果，在生成頁面背景及填充時非常有用。

代碼地址：http://www.gbtags.com/gb/rtreplayerpreview/1153.htm

5.使用echarts實現氣泡動態背景

你想制作一個氣泡效果的動態背景嗎？參照此代碼吧。

代碼地址：http://www.gbtags.com/gb/rtreplayerpreview/1190.htm

6.CSS3實現的SafariCompass效果

這個效果制作動態圖標正是非?？岚?，有沒有想試一下呢？

代碼地址：http://www.gbtags.com/gb/rtreplayerpreview/1151.htm

7.神奇的前端輸入模擬插件--typed.js

這個模擬輸入對想在頁面上做宣傳的小伙伴是不是非常有用呢？

代碼地址：http://www.gbtags.com/gb/rtreplayerpreview/1169.htm

8.用Chart.js生成的餅圖效果

Chart.js生成的餅圖效果，使用了畫布實現最后的圖形繪制，也是很有用的東東。

代碼地址：http://www.gbtags.com/gb/rtreplayerpreview/1130.htm

原文鏈接：http://www.gbtags.com/gb/share/5935.htm

一節：二級導航欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二級導航欄</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .wrap{
            width: 960px;
            margin: 10px auto;
        }
        ul{
            display: flex;
            text-align: center;
        }
        ul>li{
            flex: 1;
            position: relative;
        }
        .subnav{
            display: none;
            position: absolute;
            left: 0;
            top: 40px;
        }
        span{
            display: flex;
        }
        span>a{
            flex: 1;
            width: 100px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="">站長之家</a></li>
        <li>
            <a href="">行業資訊</a>
            <div class="subnav" style="display: block;">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="">業界動態</a>|
                        <a href="">收購融資</a>|
                        <a href="">門戶動態</a>|
                        <a href="">搜索引擎</a>|
                        <a href="">網絡游戲</a>|
                        <a href="">電子商務</a>|
                        <a href="">廣告傳媒</a>|
                        <a href="">廠商開發</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="">站長在線</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="">站長報道</a>|
                        <a href="">好站推薦</a>|
                        <a href="">站長聚會</a>|
                        <a href="">站長訪談</a>|
                        <a href="">站長茶館</a>|
                        <a href="">網站排行</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="">網站運營</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="">建站經驗</a>|
                        <a href="">策劃盈利</a>|
                        <a href="">搜索優化</a>|
                        <a href="">網站推廣</a>|
                        <a href="">免費資源</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="">設計在線</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="">酷站推薦</a>|
                        <a href="">網頁設計</a>|
                        <a href="">WEB標準</a>|
                        <a href="">視頻處理</a>|
                        <a href="">設計活動</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="">網絡編程</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="">Asp編程</a>|
                        <a href="">Php編程</a>|
                        <a href="">.Net編程</a>|
                        <a href="">Xml編程</a>|
                        <a href="">Access</a>|
                        <a href="">Mssql</a>|
                        <a href="">Mysql</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="">聯盟資訊</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="">聯盟動態</a>|
                        <a href="">聯盟介紹</a>|
                        <a href="">聯盟點評</a>|
                        <a href="">網賺技巧</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="">服務器</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="">Web服務器</a>|
                        <a href="">Ftp服務器</a>|
                        <a href="">Mail服務器</a>|
                        <a href="">Dns服務器</a>|
                        <a href="">Win服務器</a>|
                        <a href="">Linux服務器</a>|
                        <a href="">安全防護</a>|
                        <a href="">虛擬主機</a>
                    </span>
                </p>
            </div>
        </li>
    </ul>
</div>
<script>
    window.onload = function () {
        var liS = document.getElementsByTagName("li");
        var subNav = document.getElementsByClassName("subnav");
        for (var i = 0;i < liS.length;i++) {
            liS[i].
        }
    }
</script>
</body>
</html>

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個月整理了一份最適合2020年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

第二節：自動播放一幻燈片效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自動播放一幻燈片效果</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .wrap{
            width: 490px;
            height: 170px;
            overflow: hidden;
            border: 10px solid #666666;
            border-radius: 5px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -86px 0 0 -251px ;
        }
        .content{
            height: 100%;
            width: 100%;
            position: relative;
        }
        img{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        .btn-group{
            position: absolute;
            bottom: 0;
            right: 0;
            display: flex;
            width: 120px;
            justify-content: space-between;
        }
        button{
            flex-basis: 20px;
            height: 20px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            background:#F90;
            opacity:0.7;
            filter:alpha(opacity=70);
            color: white;
        }
        .current{
            font-weight:700;
            background:#f60;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="content">
        <img src="../image/01.jpg" style="opacity: 1;" />
        <img src="../image/02.jpg" />
        <img src="../image/03.jpg" />
        <img src="../image/04.jpg" />
        <img src="../image/05.jpg" />
        <div class="btn-group">
            <button class="current">1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
        </div>
    </div>
</div>
<script>
    window.onload = function () {
        var imgS = document.getElementsByTagName("img");
        var btnS = document.getElementsByTagName("button");
        var box = document.getElementsByClassName("wrap")[0];
        var timer,play = null;
        var index = 0;
        for (var i = 0; i < btnS.length; i++) {
            btnS[i].index = i;
            btnS[i].onmouseover = function () {
                showImg(this.index);
            }
        }
        //鼠標劃過，關閉計時器
        box.onmouseover = function () {
            clearInterval(play);
        };
        //鼠標離開開啟計時器
        box.onmouseout = function () {
            autoPlay()
        };
        function autoPlay() {
            play = setInterval(function () {
                index++;
                index >= imgS.length && (index = 0);

                showImg(index);
            },2000);
        }
        autoPlay();
        function showImg(a) {
            index = a;
            var alpha = 0;
            for (var n = 0;n < btnS.length;n++){
                btnS[n].className = "";
            }
            btnS[index].className = "current";
            clearInterval(timer);
            for (i = 0; i < imgS.length; i++)
            {
                imgS[i].style.opacity = 0;
                imgS[i].style.filter = "alpha(opacity=0)";
            }
            timer = setInterval(function () {
                alpha += 2;
                alpha > 100 && (alpha =100);
                imgS[index].style.opacity = alpha / 100;
                imgS[index].style.filter = "alpha(opacity = " + alpha + ")";
                alpha === 100 && clearInterval(timer)
            },20);
        }
    }
</script>
</body>
</html>

第三節：自動播放一幻燈片效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自動播放一幻燈片效果</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .wrap{
            width: 490px;
            height: 170px;
            overflow: hidden;
            border: 10px solid #666666;
            border-radius: 5px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -86px 0 0 -251px ;
        }
        .content{
            height: 100%;
            width: 100%;
            position: relative;
        }
        img{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        .btn-group{
            position: absolute;
            bottom: 0;
            right: 0;
            display: flex;
            width: 120px;
            justify-content: space-between;
        }
        button{
            flex-basis: 20px;
            height: 20px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            background:#F90;
            opacity:0.7;
            filter:alpha(opacity=70);
            color: white;
        }
        .current{
            font-weight:700;
            background:#f60;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="content">
        <img src="../image/01.jpg" style="opacity: 1;" />
        <img src="../image/02.jpg" />
        <img src="../image/03.jpg" />
        <img src="../image/04.jpg" />
        <img src="../image/05.jpg" />
        <div class="btn-group">
            <button class="current">1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
        </div>
    </div>
</div>
<script>
    window.onload = function () {
        var imgS = document.getElementsByTagName("img");
        var btnS = document.getElementsByTagName("button");
        var box = document.getElementsByClassName("wrap")[0];
        var timer,play = null;
        var index = 0;
        var bOrder = true;
        for (var i = 0; i < btnS.length; i++) {
            btnS[i].index = i;
            btnS[i].onmouseover = function () {
                showImg(this.index);
            }
        }
        //鼠標劃過，關閉計時器
        box.onmouseover = function () {
            clearInterval(play);
        };
        //鼠標離開開啟計時器
        box.onmouseout = function () {
            autoPlay()
        };
        function autoPlay() {
            play = setInterval(function () {
                bOrder ? index++ : index--;
                index >= imgS.length && (index = imgS.length - 2, bOrder = false);
                index <= 0 && (index = 0, bOrder = true);
                showImg(index);
            },2000);
        }
        autoPlay();
        function showImg(a) {
            index = a;
            var alpha = 0;
            for (var n = 0;n < btnS.length;n++){
                btnS[n].className = "";
            }
            btnS[index].className = "current";
            clearInterval(timer);
            for (i = 0; i < imgS.length; i++)
            {
                imgS[i].style.opacity = 0;
                imgS[i].style.filter = "alpha(opacity=0)";
            }
            timer = setInterval(function () {
                alpha += 2;
                alpha > 100 && (alpha =100);
                imgS[index].style.opacity = alpha / 100;
                imgS[index].style.filter = "alpha(opacity = " + alpha + ")";
                alpha === 100 && clearInterval(timer)
            },20);
        }
    }
</script>
</body>
</html>

第四節：agruments應用一求出函數參數的總合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>agruments應用一求出函數參數的總合</title>
</head>
<body>
<pre>
<script type="text/javascript">
    var iResult = 0
    function sum()
    {
        for (var i = 0; i < arguments.length; i++)
        {
            iResult += arguments[i]
        }
        return iResult
    }
    <span>//應用</span>
    alert(sum(1,2,3,4,5,6,7,8,9,10)) <span>//輸出55</span>
</script>
</pre>
<script type="text/javascript">
    var iResult = 0;
    function sum()
    {
        for (var i = 0; i < arguments.length; i++)
        {
            iResult += arguments[i]
        }
        return iResult
    }
    alert(sum(1,2,3,4,5,6,7,8,9,10)) //輸出55
</script>
</body>
</html>

第五節：css函數一設置/讀取對象的屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css函數一設置/讀取對象的屬性</title>
    <style>
        .box{
            width:400px;
            height:200px;
            background:#fef4eb;
            border:1px solid #f60;
            margin:0 auto;
        }
        input {
            border: 0;
            color: #fff;
            cursor: pointer;
            font-weight: 700;
            background: #f60;
            padding: 2px 4px;
            margin: 10px 0 0 10px;
        }
    </style>

</head>
<body>
<div class="box">
    <input type="button" value="Get Style" />
    <input type="button" value="Set Style" />
    <input type="button" value="Default Style" />
</div>
<script type="text/javascript">
    var getCss = function(o,key){
        return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
    };
    window.onload = function () {
        var isBtn = document.getElementsByTagName("input");
        var isBox = document.getElementsByClassName("box")[0];
        isBtn[0].onclick = function () {
            alert();
        }
    }
</script>
</body>
</html>

第六節：當前輸入框高亮顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>當前輸入框高亮顯示</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .wrap{
            width: 300px;
            margin: 0 auto;
            border: 2px solid black;
        }
        h1{
            font-size: 14px;
            padding: 10px;
            border-bottom: 2px solid black;
        }
        label{
            display: block;
            padding: 10px 40px 10px 10px;
            font-size: 14px;
            text-align: right;
        }
        button{
            display: block;
            margin: 0 auto;
        }
        .current{
            background: #ffe7e7;
        }
    </style>
</head>
<body>
<div class="wrap">
    <h1>用戶登陸</h1>
    <label>
        <span>用戶名:</span>
        <input type="text" />
    </label>
    <label>
        <span>密碼:</span>
        <input type="text" />
    </label>
    <button>登陸</button>
</div>
<script>
    window.onload = function () {
        var inputS = document.getElementsByTagName("input");
        for (var i = 0; i < inputS.length; i++) {
            inputS[i].addEventListener("focus",function () {
                this.className = "current";
            });
            inputS[i].addEventListener("blur",function () {
                this.className = "";
            })
        }
    }
</script>
</body>
</html>

第七節：數組練習：各種數組方法的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數組練習：各種數組方法的使用</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        pre {
            color: green;
            padding: 10px 15px;
            margin: 12px 0;
            background: #f0f0f0;
            border: 1px dotted #333;
            font: 12px/1.5 Courier New;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
<pre>January(1),February(2),March(3),April(4),May(5),June(6),July(7),Aguest(8),September(9),October(10),November(11),December(12)</pre>
<button>刪除January(1)</button>
<button>刪除December(12)</button>
<pre>0,1,2,3,4,5,6,7,8,9</pre>
<button>復制</button>
<button>還原</button>
<pre>
    red,green,blue,white,yellow,black,brown
</pre>
<button>還原</button>
<button>刪除前三項</button>
<button>刪除第二至第三項</button>
<button>在第二項后面插入(orange, purple)</button>
<button>替換第二項和第三項</button>
<script>
    window.onload = function () {
        var isBtn = document.getElementsByTagName("button");
        var isCon = document.getElementsByTagName("pre");
        var isDate = isCon[0].innerHTML.split(","),
            isNum = isCon[1].innerHTML.split(","),
            isColor = isCon[2].innerHTML.split(","),
            addOrDel1 = true,addOrDel2 = true;
        const lenNum = isNum.length;
        isBtn[0].onclick = function () {
            if (addOrDel1 === true) {
                isDate.shift();
                isBtn[0].innerHTML = "添加January(1)";
                addOrDel1 = false;
            }else{
                isDate.unshift("January(1)");
                addOrDel1 = true;
                isBtn[0].innerHTML = "刪除January(1)";
            }
            isCon[0].innerHTML = isDate.join();
        };
        isBtn[1].onclick = function () {
            if (addOrDel2 === true) {
                isDate.pop();
                addOrDel2 = false;
                isBtn[1].innerHTML = "添加December(12)";
            }else{
                isDate.push("December(12)");
                addOrDel2 = true;
                isBtn[1].innerHTML = "刪除December(12)";
            }
            isCon[0].innerHTML = isDate.join();
        };
        isBtn[2].onclick = function () {
            var len = isNum.length;
            for (var i = 0;i < len;i++) {
                isNum.push(isNum[i]);
            }
            isCon[1].innerHTML = isNum.join();
        };
        isBtn[3].onclick = function () {
            isNum.length = lenNum;
            isCon[1].innerHTML = isNum.join();
        };
        isBtn[4].onclick = function () {
            isColor = ["red","green","blue","white","yellow","black","brown"];
            isCon[2].innerHTML = isColor.join();
        };
        isBtn[5].onclick = function () {
            isColor.splice(0,3);
            isCon[2].innerHTML = isColor.join();
        };
        isBtn[6].onclick = function () {
            isColor.splice(1,2);
            isCon[2].innerHTML = isColor.join();
        };
        isBtn[7].onclick = function () {
            isColor.splice(1,0,"orange", "purple");
            isCon[2].innerHTML = isColor.join();
        };
        isBtn[8].onclick = function () {
            isColor.splice(1,2,"#009900","#0000ff");
            isCon[2].innerHTML = isColor.join();
        }
    }
</script>
</body>
</html>

第八節：事件練習：封裝兼容性添加、刪除事件的函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件練習：封裝兼容性添加、刪除事件的函數</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .btn-group{
            width: 300px;
            margin: 10px auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="btn-group">
    <button>沒用的按鈕</button>
    <button>綁定click</button>
    <button>解除click</button>
</div>
<script>
    window.onload = function () {
        function event() {
            alert("綁定了點擊事件");
        }
        var isBtn = document.getElementsByTagName("button");
        isBtn[1].addEventListener("click",function () {
            isBtn[0].innerHTML = "點擊查看點擊事件";
            isBtn[0].addEventListener("click",event);
        });
        isBtn[2].addEventListener("click",function () {
            isBtn[0].innerHTML = "沒用的按鈕";
            isBtn[0].removeEventListener("click",event);
        })
    }
</script>
</body>
</html>

第九節：星級評分系統

在線咨詢

上一篇：踩過許多坑后，送你這份H5交互的頁面跳轉方式總結
下一篇：html原始字符及其用法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商