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小时内与您取得联系。

整合营销服务商