找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发 电商网站动态评分效果

2018-07-27 分类：教程 阅读(694) 评论(0)

web前端是网站开发么|前端开发试题网站|国内购物网站前端开发状况

代码片段 1

<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
    <meta charset=”utf-8″>
    <title>需要前端开发的网站：js评分效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .pingfen {
            width: 220px;
            margin: 10px auto;
            height: 28px;
        }
        .pingfen li {
            width: 27px;
            float: left;
            height: 28px;
            cursor: pointer;
            background: url(http://yinhu.xinnet.tzjdwl.cn/test/score/images/star.gif) no-repeat 0 0;
            list-style: none;
        }
        .pingfen span {
            height: 28px;
            line-height: 28px;
            float: right;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id=”pingfen” class=”pingfen”>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span class=”text”></span>
    </div>
    <div id=”pingfen2″ class=”pingfen”>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span class=”text”></span>
    </div>
    <div id=”pingfen3″ class=”pingfen”>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span class=”text”></span>
    </div>
    <script>
        window.onload = function () {
            function score(id) {
                var oPf = document.getElementById(id);
                var aLi = oPf.getElementsByTagName(‘li’);
                var oText = oPf.getElementsByTagName(‘span’)[0];
                var description = [‘失望’, ‘不满’, ‘一般’, ‘满意’, ‘惊喜’,]
                var i = 0;
                for (i = 0; i < aLi.length; i++) {
                    aLi[i].index = i;
                    aLi[i].onmouseover = function () {
                        for (i = 0; i < aLi.length; i++) {
                            if (i <= this.index) {
                                // console.log(i,this.index);
                                aLi[i].style.backgroundPosition = “0 -29px”;
                                oText.innerText = (this.index + 1) + ‘分 ‘ + description[i];
                            }
                            else {
                                aLi[i].style.backgroundPosition = “0 0”;
                            }
                            // if()
                        }
                    };
                    aLi[i].onmouseout = function () {
                        oText.innerText = ”;
                    };
                    aLi[i].onmousedown = function () {
                        // alert(‘提交成功:’+(this.index+1)+’分’);
                        oText.innerText = (this.index + 1) + ‘分 ‘ + description[this.index];
                    };
                }
            }
            score(‘pingfen’);
            score(‘pingfen2’);
            score(‘pingfen3’);
        };
    </script>
</body>
</html>

网站前端开发公司|网站开发前端和后端的区别|适合新手前端开发的网站

赞(0)
前端开发者 » 前端开发 电商网站动态评分效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论