JS特效-五星好评效果

来源：互联网发布：电容感应开关单片机编辑：程序博客网时间：2024/05/01 23:34

入职之后，已经有一段时间没有写html代码了，或者应该说是没有比较全面的去编写HTML代码。想当初也是写出两个网页小游戏出来的人，数字拼图和推箱子。

如今在工作中对前端代码的编写量相对来说较少，但是基础知识却不能忘，今天就先带来一个下Demo，五星好评效果（JS中运算符的妙用，研究过jquer源码的同学一定发现了在代码用运用了大量的与、或运算符，至于这些符号的妙处，我准备在下一篇博客中讲解）

本人用的编辑器是Hbuilder，因为用习惯了，就没有换其他的编译器了。话不多少，开始项目。

我们最常见的五星评价效果是在某宝购物评价时出现的比较多，现在应用却很广泛。
五星评价的效果是鼠标（PC端））或者手指滑动（移动端）），星星的个数跟着改变。

咱们会用到一张图片，

先看看body部分

<body>        <div id="star">            <span>点击星星就能打分</span>            <ul>                <li>                    <a href="javascript:;">1</a>                </li>                <li>                    <a href="javascript:;">2</a>                </li>                <li>                    <a href="javascript:;">3</a>                </li>                <li>                    <a href="javascript:;">4</a>                </li>                <li>                    <a href="javascript:;">5</a>                </li>            </ul>            <span></span>            <p></p>        </div>    </body>

接着肯定是将样式写出来了，代码如下`

* {        margin: 0;        padding: 0;    }   body {        color: #666;        font: 12px/1.5 Arial;    }    ul {        list-style-type: none;    }    #star {        position: relative;        width: 600px;        margin: 100px auto;    }    #star span {            float: left;            display: inline;            height: 19px;            line-height: 19px;        }    #star ul{        float: left;        display: inline;   /* 设置对象为行内元素*/        margin:0 20px;    }    #star ul li {        float: left;        width: 24px;        cursor: pointer;        /* //文本快中首行文本的缩进,这里的效果是将文字消失*/        text-indent: -9999px;        background: url(img/star.png) no-repeat;    }    #star strong {        color: #f60;        padding-left: 10px;    }    #star li.on {        background-position: 0 -28px;    }    #star p {        position: absolute;        top: 20px;        width: 159px;        height: 60px;        display: none;        background: url(img/icon.gif) no-repeat;        padding: 7px 10px 0;    }    #star p em {        color: #f60;        display: block;        font-style: normal;    }</style>`

最后让我们一起来看JS代码部分

<script type="text/javascript">        window.onload = function() {            var oStar = document.getElementById("star");            var oLi = oStar.getElementsByTagName("li");            //这里标签后面的数组表示同一类标签的第一个元素            var oUl = oStar.getElementsByTagName("ul")[0];            var oSpan = oStar.getElementsByTagName("span")[1];            var oP = oStar.getElementsByTagName("p")[0];            var iScore = iStar = 0;            var aMsg = ['很不满意', '不满意', '一般', '满意', '非常满意']            for(var i = 0; i < oLi.length; i++) {                oLi[i].index = i + 1                    //                              //保证当前数字从从1开始，实际位置为0（因为是数组）                oLi[i].onmousemove = function() {                    showStar(this.index);                };                //当鼠标离开后，那么当前调用函数无参数，选择默认样式                oLi[i].onmouseout = function() {                    showStar();                };                // 单击时，用全局变量暂存对应的数字，这样下一次滑动，                // 单击的数字颜色就会改变                oLi[i].onclick = function() {                        iStar = this.index;                }            }            //这里主要控制星星的变色问题，如果参数为真值，那么就选择带有颜色的样式，否则反之            function showStar(_index) {                //因为isStar始终为零，所以或运算结果为左边的数字                 iScore = _index || iStar                for(var i = 0; i < oLi.length; i++) {                    oLi[i].className = i < iScore ? "on" : "";                }            }        }    </script>

项目展示图

这里写图片描述

最后，总结一下，还有一个效果没有添加上去，就是滑动显示文字的效果，单击后保存所对应的文字数字，下一次添加上去。
还有就是有几个标签，有一段时间没有使用了，有些忘记，以后会在每次的项目中写出来，加深印象。还有就是JS中运算符的妙用，也得多熟悉熟悉

2 0