超简单的js 5星评论代码

最新推荐文章于 2023-04-03 21:52:17 发布

vicky_qiu

最新推荐文章于 2023-04-03 21:52:17 发布

阅读量2.4k

点赞数 1

分类专栏：代码收藏文章标签： javascript

本文链接：https://blog.csdn.net/vicky_qiu/article/details/77896769

版权

代码收藏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript星级评分</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
    a{float:left;width:26px;height:20px;background:url(star.png) 0 -20px no-repeat;}
    p{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;}
    </style>
</head>
<body>
    <div class="wrapper">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
    <p></p>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
    var star = document.getElementsByTagName('a');
    var oDiv = document.getElementsByTagName('div')[0];
    var temp = 0;

    for(var i = 0, len = star.length; i < len; i++){
        star[i].index = i;

        star[i].onmouseover = function(){
            clear();
            for(var j = 0; j < this.index + 1; j++){
                star[j].style.backgroundPosition = '0 0';
            }
        }

        star[i].onmouseout = function(){
            for(var j = 0; j < this.index + 1; j++){
                star[j].style.backgroundPosition = '0 -20px';
            }
            current(temp);
        }

        star[i].onclick = function(){
            temp = this.index + 1;
            document.getElementsByTagName('p')[0].innerHTML = temp + ' 颗星';
            current(temp);
        }
    }
    //清除所有
    function clear(){
        for(var i = 0, len = star.length; i < len; i++){
            star[i].style.backgroundPosition = '0 -20px';
        }
    }
    //显示当前第几颗星
    function current(temp){
        for(var i = 0; i < temp; i++){
            star[i].style.backgroundPosition = '0 0';
        }
    }
};
</script>

这里写图片描述

vicky_qiu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
超简单的js 5星评论代码

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>javascript星级评分</title> <style type="text/css"> *{margin:0;padding:0;} .wrapper{height:20px;padding:5px;width:130px;margin
复制链接

扫一扫