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>        
  • 相关阅读:
    WordCount
    vs2013安装及测试
    阅读程序,回答问题
    补作业:随机生成二元四则运算
    第一次合作
    漫漫“码农”路
    我的进度条
    Believe
    软件工程个人总结
    结队作业——电梯调度程序
  • 原文地址:https://www.cnblogs.com/ouchen0312/p/7568448.html
Copyright © 2011-2022 走看看