<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机点名</title>
</head>
<style>
.k{
margin:0px auto;
width: 500px;
height: 500px;
/* background: red;*/
}
.name{
width: 500px;
height: 500px;
/*background: #55CBEA;*/
border:20px solid;
border-radius:25px;
font-size: 80px;
text-align: center;
line-height: 500px;
font-family: 微软雅黑;
font-weight: bold;
text-shadow: 10px 10px 10px #C4CBCB;
box-shadow: 10px 10px 10px #C4CBCB;
}
.kai{
width: 550px;
height: 150px;
font-size: 30px;
background: #fff;
font-weight: bold;
position: relative;
top: 50px;
border:20px solid;
border-radius:25px;
box-shadow: 10px 10px 10px #C4CBCB;
}
.xuanze{
width: 500px;
height: 30px;
text-align: center;
font-family: 微软雅黑;
font-family: 40px;
font-weight: bold;
text-shadow: 10px 10px 10px #C4CBCB;
}
</style>
<body>
<div class="k">
<div class="xuanze" id="xuanze">
<label><input type="radio" id="suiji" name="1" checked/>
随机式</label>
<label><input type="radio" id="daojishi" name="1" />
倒计时式</label>
</div>
<div class="name" id="m">准备点名</div>
<button class="kai" onmouseup="ok()" id="kai">开始</button>
</div>
</body>
<script>
var member = new Array('帅逼风影','屌逼风影','强者风影','王者风影','至尊风影','宇宙风影','绝地风影'); //创建数据数组
var color = new Array('red','green','pink','blue','#f5f','#000','#D55');
var m = document.getElementById('m'); //准备点名那个对象
var kai = document.getElementById('kai'); //按钮对象
var suiji = document.getElementById('suiji');
var daojishi = document.getElementById('daojishi');
function ok(){
if (suiji.checked==true) { //判断随机模式
if (kai.innerHTML == '开始') { //判断是否点击了开始
timmer = setInterval(function(){
shu = Math.floor(Math.random()*(parseInt(member.length))); //随机数最大值,转成整数型
colorshu = Math.floor(Math.random()*(parseInt(color.length))); //颜色数组个数
m.innerHTML=member[shu];
m.style.color=color[colorshu];
},50)
kai.innerHTML = '停止';
}else{
clearInterval(timmer);
kai.innerHTML = '开始';
}
}else{
if (kai.innerHTML == '开始') { //判断是否点击了开始
timmer = setInterval(function(){
shu = Math.floor(Math.random()*(parseInt(member.length))); //随机数最大值,转成整数型
colorshu = Math.floor(Math.random()*(parseInt(color.length))); //颜色数组个数
m.innerHTML=member[shu];
m.style.color=color[colorshu];
},50)
num = 5;//默认5秒
kai.disabled=true;
kai.innerHTML = '开始(倒计时:'+num+'秒)'; //直接先显示要不然有1秒的空档期
timmer1 = setInterval(function(){
num--;
kai.innerHTML = '开始(倒计时:'+num+'秒)';
if (num<=0) {
kai.disabled=false;
clearInterval(timmer1);
clearInterval(timmer);
kai.innerHTML = '开始'
}
},1000)
}
}
}
window.onkeydown = function(){
if (event.keyCode==32) {
ok();
}
}
</script>
<script>
function changeColor(){
var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
color=color.split("|");
document.getElementById("xuanze").style.color=color[parseInt(Math.random() * color.length)];
}
setInterval(changeColor,100);
</script>
</html>
来源：https://blog.kieng.cn/167.html
赏
支付宝打赏
微信打赏
支付宝打赏
微信打赏
如果文章或资源对您有帮助，欢迎打赏作者。一路走来，感谢有您！
txttool.com 说一段 esp56物联 查询128 IP查询