评分五角星随鼠标移动显示

最新推荐文章于 2021-10-07 12:59:21 发布

代码那点事ing

最新推荐文章于 2021-10-07 12:59:21 发布

阅读量658

点赞数

分类专栏： javascript 文章标签： html5 javascript 图片移动鼠标

本文链接：https://blog.csdn.net/qq_36925731/article/details/74332246

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JS代码，评分五角星随鼠标移动显示(当鼠标放在五角星上时前面的显示为黑色五角星，后面的显示白色五角星)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>评分五角星随鼠标移动显示</title>
    <script type="text/javascript" >
        function wjx() {
            var Warp = document.getElementById("warp");
            var Lis = Warp.getElementsByTagName("li");
            for (var i = 0; i < Lis.length; i++) {
                var oLi = Lis[i];
                oLi.style.cursor = 'pointer';//cursor光标样式
                oLi.onmouseover = function () {
                    var index = indexof(Lis, this);
                    for (var j = 0; j <= index; j++) {
                        Lis[j].innerHTML = "★";
                    }
                    for (var z = index + 1; z < Lis.length; z++) {
                        Lis[z].innerHTML = "☆";
                    }
                }
            }
            function indexof(arr, element) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i] == element)
                        return i;
                }
            }
        }
    </script>    
<style type="text/css" >
    #warp li
    {
        float: left;
        list-style:none;
        margin: 10px;
    } 
</style>
</head>
<body οnlοad="wjx()">
<div id="warp">
<ul>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
</div>
</body>
</html>