功能实现
//实现五星评分效果
/**
* 功能1 鼠标移入某星 该星和之前的星变色
* 鼠标移出 都不变色
*
* 功能2 点击某星 该星和之前的星变色
* 鼠标移出 保持变色
*
* 难点 给该星注册两种事件
*/
实现效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
#comment {
font-size: 40px;
color: #ff16cf;
}
#comment li {
float: left;
}
.current{
/* color:blueviolet ; */
}
ul {
list-style: none;
}
</style>
<!-- <script src="jquery-1.12.4.js"></script> //文件自己引
<script>
$(function () {
//1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
var wjx_k = "☆";
var wjx_s = "★";
$(".comment>li").on("mouseenter", function () {
$(this).text(wjx_s).prevAll().text(wjx_s);
$(this).nextAll().text(wjx_k);
});
//2. 给ul注册鼠标离开时间，让所有的li都变成空心
$(".comment").on("mouseleave", function () {
$(this).children().text(wjx_k);
//再做一件事件，找到current，让current和current前面的变成实心就行。
$("li.current").text(wjx_s).prevAll().text(wjx_s);
});
//3. 给li注册点击事件
$(".comment>li").on("click", function () {
$(this).addClass("current").siblings().removeClass("current");
});
});
</script> -->
</head>
<body>
<ul id="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script type="text/javascript">
//实现五星评分效果
/**
* 功能1 鼠标移入某星 该星和之前的星变色
* 鼠标移出 都不变色
*
* 功能2 点击某星 该星和之前的星变色
* 鼠标移出 保持变色
*
* 难点 给该星注册两种事件
*/
//获取五星
var lis=document.getElementById("comment").getElementsByTagName("li");
console.log(lis.length);
//注册鼠标移入事件
for(var i=0;i<lis.length;i++)
{
lis[i].className="";
lis[i].id=i;
//鼠标移入
lis[i].onmouseover=function(){
index=this.id;
// console.log(this.id);
for(var j=0;j<=index;j++)
{
lis[j].innerHTML="★";
}
}
//鼠标移出
lis[i].onmouseout=function(){
for(var i=0;i<lis.length;i++)
{
lis[i].innerHTML="☆";
}
var liCur=document.getElementsByClassName("current");
for(var k=0;k<liCur.length;k++)
{
lis[k].innerHTML="★";
// console.log("我执行了");
}
}
//点击
lis[i].onclick=function(){
for(var o=0;o<=index;o++)
{
lis[o].className="current";
lis[o].innerHTML="★";
}
}
}
</script>
</body>
</html>
1915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
