淘宝评论星星级别数目

最新推荐文章于 2019-03-07 19:30:29 发布

吃瓜群众欢乐多

最新推荐文章于 2019-03-07 19:30:29 发布

阅读量954

点赞数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            // 获取元素
            var stars = document.getElementById('stars').getElementsByTagName('span');
            var ret = document.getElementById('ret');

            //定义getStar函数
            function getStar(n) {
                // n = parseInt(n);
                for(var i=0;i<stars.length;i++){
                    if (i <= n - 1) {
                        stars[i].style.color = 'red';
                    }
                    else {
                        stars[i].style.color = '';
                    }
                }
                ret.innerHTML=n+'星';
            }

            // 每个星星节点的点击事件
            for(var i=0; i < stars.length; i++) {
                // for(var i=0;i<stars.length;i++){
                stars[i].onclick = function () {
                    getStar(this.getAttribute('star'));
                }
            }
            
        }
    </script>
</head>
<body>
<div id="stars">
    <span star="1">★</span>
    <span star="2">★</span>
    <span star="3">★</span>
    <span star="4">★</span>
    <span star="5">★</span>
</div>
<div id="ret"></div>
</body>
</html>

吃瓜群众欢乐多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淘宝评论星星级别数目

span { cursor: pointer; } window.onload = function () { // 获取元素 var stars = document.getElementById('stars').getElementsByTagName('
复制链接

扫一扫