<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>随机</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
#dv {
width: 800px;
height: 600px;
background-color: rgba(150, 243, 223, 0.7);
margin: 0 auto;
position: relative;
border-radius: 10px;
margin-left: 400px;
}
td {
border-radius: 15px;
box-shadow: 1px 2px 5px 2px #54d8fd5c;
}
input {
background-color: #fff;
border-radius: 50%;
width: 100px;
height: 50px;
outline-style: none;
border: none;
box-shadow: 0px 5px 9px 0px#2196f375;
}
.input1 {
position: absolute;
bottom: 20px;
margin-right: 20px;
left: 170px;
}
.input2 {
position: absolute;
bottom: 20px;
margin-right: 20px;
left: 320px;
}
.input3 {
position: absolute;
bottom: 20px;
left: 470px;
}
.bgimg {
padding-top: 20px;
position: fixed;
width: 250px;
height: 1000px;
background-color: rgba(196, 123, 255, 0.404);
}
.bgimg img {
opacity: 0.8;
width: 200px;
height: 110px;
}
body {
background-image: url("./images/14.jpg");
}
input {
cursor: pointer;
}
</style>
<body id="bd">
<div id="dvM" style="position: absolute;">
<img src="./images/tianshi.gif" alt="">
</div>
<div class="bgimg" id="bgimgId">
<img src="./images/jianbian11.png" alt="">
<img src="./images/jianbian12.png" alt="">
<img src="./images/jianbian13.png" alt="">
<img src="./images/jianbian14.png" alt="">
<img src="./images/jianbian15.png" alt="">
</div>
<div id="dv">
<input type="button" name="" id="btn1" value="start" class="input1">
<input type="button" name="" id="btn2" value="end" class="input2">
<input type="button" id="btn3" value="double" class="input3">
</div>
<script>
function dvFly() {
var dvM = document.getElementById("dvM");
if (!dvM) {
return;
}
var intX = window.event.clientX;
var intY = window.event.clientY;
dvM.style.left = intX + "px";
dvM.style.top = intY + "px";
};
document.onmousemove = dvFly;
var list = [
["one", "two", "three", "four", "five"],
["one", "two", "three", "four", "five"],
["one", "two", "three", "four", "five"],
["one", "two", "three", "four", "five"],
["one", "two", "three", "four", "five"],
];
var table = document.createElement("table");
table.style.margin = "0 auto";
table.style.paddingTop = "50px";
table.style.color = "white";
document.getElementById("dv").appendChild(table);
var tds = [];
var showTime;
var current;
for (var i = 0; i < list.length; i++) {
var tr = document.createElement("tr");
table.appendChild(tr);
for (var j = 0; j < list[i].length; j++) {
var td = document.createElement("td");
td.innerText = list[i][j];
tr.appendChild(td);
td.style.backgroundColor = "rgba(200, 200, 200, 0.2)";
td.style.margin = "5px 7px";
td.style.padding = "30px 60px";
tds.push(td);
}
}
var r, g, b;
var excTime = null;
for (var i = 0; i < 100; i++) {
setInterval(function () {
r = parseInt(Math.random() * 256);
g = parseInt(Math.random() * 256);
b = parseInt(Math.random() * 256);
for (var j = 0; j < 100; j++) {
tds[j].style.border = "2px solid rgb(" + r + "," + g + "," + b + ")";
}
}, 1500);
}
document.getElementById("btn1").onclick = function () {
clearInterval(excTime);
excTime = setInterval(function () {
for (var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = "rgba(200, 200, 200, 0.2)";
tds[i].style.boxShadow = "0px 2px 5px 3px #b461f1d4";
}
var random1 = Math.floor(Math.random() * tds.length);
tds[random1].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
tds[random1].style.boxShadow = "0px 2px 10px 1px #000";
}, 100);
};
document.getElementById("btn2").onclick = function () {
clearInterval(excTime);
}
document.getElementById("btn3").onclick = function () {
clearInterval(excTime);
excTime = setInterval(function () {
for (var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = "rgba(200, 200, 200, 0.2)";
tds[i].style.boxShadow = "0px 2px 5px 3px #b461f1d4";
}
var random1 = Math.floor(Math.random() * tds.length);
var random2 = Math.floor(Math.random() * tds.length);
tds[random1].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
tds[random1].style.boxShadow = "0px 2px 10px 1px #000";
tds[random2].style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
tds[random2].style.boxShadow = "0px 2px 10px 1px #000";
}, 100);
};
var imgObjs = document.getElementById("bgimgId").children;
for (var i = 0; i < imgObjs.length; i++) {
imgObjs[i].style.cursor = "pointer";
imgObjs[i].onclick = function () {
document.getElementById("bd").style.background = "url(" + this.src + ")";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "100%";
};
}
</script>
</body>
</html>
- 三个按钮,分别是点单个人,停止,双人点名。
- 可以依据人数的多少修改数组中的元素。
- 右边的几张图片用来依据点名人的心情来选择自己喜欢的渐变色背景图。
- 点名的过程中单元格会变色,被选中的背景色也会变化,因为本人觉得可以让随机点名看起来彩色斑斓点。
- 为了综合知识点,本人还用了小图片会跟随鼠标,但是截图没截到,代码中可以看出来。
- 总的来说,本人综合了用了一下几个知识点
- 动态创建表格。
- 随机色就是
Math.random()
的应用。 window.event.clientX
和 window.event.clientY
的应用。- 最后本人不保证没有小bug ,才疏学浅,有待提高。