js评分效果

最新推荐文章于 2023-07-12 15:46:33 发布

MuGuiLin

最新推荐文章于 2023-07-12 15:46:33 发布

阅读量577

点赞数 1

分类专栏： ES6-10 / TS 文章标签： js评分效果评分效果

本文链接：https://blog.csdn.net/muguli2008/article/details/52183582

版权

ES6-10 / TS 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>js评分效果</title>
<style type="text/css">
.box, .box ul { float: left; list-style: none; }
.box li { width: 30px; height: 30px; display: inline-block; border: 1px solid gray; cursor: pointer; }
.box .artcet { background: green; }
.box p { font-family: "微软雅黑"; font-size: 24px; text-align: center;}
</style>
</head>

<body>
<div class="box">
<ul id="ul">
<li rel="1" title="1分"></li>
<li rel="2" title="2分"></li>
<li rel="3" title="3分"></li>
<li rel="4" title="4分"></li>
<li rel="5" title="5分"></li>
</ul>
<p id="show"></p>
<input type="hidden" value="" id="num">
</div>
</body>

<script type="text/javascript">
window.onload = function()
{
var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li");
var show = document.getElementById('show');
var input = document.getElementById('num');

clearAll = function()
{
for(var i = 0; i < li.length; i++)
{
li[i].className = '';
}
}

for(var i = 0; i < li.length; i++)
{
li[i].onclick = function()
{
var num = this.getAttribute("rel");
clearAll();
input.value = num;
for(var i = 0; i < num; i++)
{
li[i].className = 'artcet';
}
show.innerHTML = this.getAttribute("title");
}

li[i].onmouseover = function()
{
var num = this.getAttribute("rel");
clearAll();
for(var i = 0; i < num; i++)
{
li[i].className = 'artcet';
}
}

li[i].onmouseout = function()
{
clearAll();
for(var i = 0; i < input.value; i++)
{
li[i].className = 'artcet';
}
}
}
}
</script>

</html>