<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li {
background-color: #ccc;
border: 1px solid #000;
cursor: pointer;
}
.current {
background-color: orangered;
}
</style>
</head>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<body>
<button>点击猜猜有什么10</button>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
$('button').click(function (e) {
var color = ["blue", "purple", "pink", "yellow", "green", "red", '#008c8c', 'white']
e.preventDefault();
for (let i = 0; i < 10000; i++) {
var mli = $(`<li>${i+1}</li>`)
//0-7
mli.css('color', color[Math.floor(Math.random() * 8)]);
mli.appendTo($('ul'))
}
a();
//b();
});
function b() {
var allLis = document.getElementsByTagName("li");
for (var i = 0; i < allLis.length; i++) {
allLis[i].onmouseover = function () {
for (var j = 0; j < allLis.length; j++) {
allLis[j].className = "";
}
console.log(this)
this.className = "current";
}
}
}
function a() {
var allLis = document.getElementsByTagName("li");
var lastOne = 0;
for (var i = 0; i < allLis.length; i++) {
(function (index) {
console.log(index);
allLis[index].onmouseover = function () {
// 清除
// console.log("-----",lastOne);
allLis[lastOne].className = "";
// 设置
//console.log(this)
this.className = "current";
// 赋值,最后鼠标停留的地方
lastOne = index;
}
})(i);
}
}
</script>
</body>
</html>
扫一扫
368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
