zoukankan      html  css  js  c++  java
  • 实现评价页面添加星星数量

    var num = finalnum = tempnum = 0;
            var lis = $(".star-box span");
            //num:传入点亮星星的个数
            //finalnum:最终点亮星星的个数
            //tempnum:一个中间值
            function fnShow(num) {
                finalnum = num || tempnum; //如果传入的num为0,则finalnum取tempnum的值
                for(var i = 0; i < lis.length; i++) {
                    lis[i].className = i < finalnum ? "active" : ""; //点亮星星就是加class为light的样式
                }
            }
            for(var i = 1; i <= lis.length; i++) {
                lis[i - 1].index = i;
                lis[i - 1].onmouseover = function() { //鼠标经过点亮星星。
                    fnShow(this.index); //传入的值为正,就是finalnum
                }
                lis[i - 1].onmouseout = function() { //鼠标离开时星星变暗
                    fnShow(0); //传入值为0,finalnum为tempnum,初始为0
                }
                lis[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星
                    tempnum = this.index;
                }
            }
                                <div class="top">
                        <span class="title">满意度:</span>
                        <div class="star-box clearfix">
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                        </div>
                    </div>        
  • 相关阅读:
    MongoDB入门
    查看端口通不通
    jQuery通过name获取值
    thinking in java
    xml配置文件解释
    Spring定时器时间设置规则
    修改序列(Sequence)的初始值(START WITH)
    Go语言实现简单的一个静态WEB服务器
    [转载]XML非法字符的处理
    IIS7解决文件上传大小问题
  • 原文地址:https://www.cnblogs.com/ouchen0312/p/7568448.html
Copyright © 2011-2022 走看看