随机点人

最新推荐文章于 2024-08-12 22:28:07 发布

喜新恋旧的lzm

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量259

点赞数

本文链接：https://blog.csdn.net/weixin_50272360/article/details/108890238

版权

HTML JavaScript 事件监听随机数颜色变换

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div {
color: white;
background-color: yellow;
text-align: center;
font-size: 30px;
}

body {
background-color: #000000;
}

.people {
text-align: center;
color: blue;
font-size: 40px;
margin-top: 207px;
}
</style>
</head>

<body>
<div class="div">随机抽取一名天选之子</div>
<p class="people">123</p>
<script>
var people = document.querySelector(".people");
var div1 = document.querySelector(".div");
var name = ""//括号里面是要点的人
var namelist = name.split(",");
var num = 0;
var namecolor = ["yellow", "pink", "red"];
var flag = true;
var index = 0;
var times=null;
console.log(namelist);
var colorName = setInterval(function () {
var getColorindex = getRandom(0, namecolor.length - 1);
var getColor = namecolor[getColorindex];
people.style.color = getColor;
}, 100);
div1.addEventListener("click", function () {
if (flag){
flag=false;
times = setInterval(function(){
var getNameindex = getRandom(0, namelist.length - 1);
index = getNameindex;
var getName = namelist[getNameindex];
name1 = getName;
people.innerHTML = getName;
}, 100);
}else{
flag=true;
clearInterval(times);
}
});
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>

</html>

喜新恋旧的lzm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
随机点人

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .div { ...
复制链接

扫一扫