html+css+js制作点名器
点名器具体实现效果观看入口
思路：
1. 运用js给html添加的所有名字盒子，并运用classname拼接的方法给每个盒子不同的一个class(n+ number)。
2. 幸运玩家的点击事件，点击时候生成6个随机计数数字（几个定时器生成几个），开始执行第一个定时器。
3.写出更新样式的函数，将所有名字的样式重置，把classname改为原本的模样。
4. 定时器思路：每个定时器执行的第一步就是调用更新样式函数，然后在使前面点击事件对应的计数数字减减，在全局中定义一个用于赋予样式位置的变量，从-1开始每次定时器都加一直到加到数组最大下标让它从新变为-1，为的就是给对应下标的名字赋予样式，最后在用于计数的数字减为0的时候清楚定时器，执行下一个定时器。
5. 每个定时器从开始到结束时间逐渐增大，这样就起到了点名器旋转慢慢变慢的效果.
源码
html
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<script src="js/xzx_mousemove.js"></script>
<div class="big">
<span id="luck">幸运玩家</span>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
css
body{
background-color: #2C3E50;
}
.big{
width: 900px;
height: 900px;
margin: 34px auto;
border: 1px solid #2C3E50;
position: relative;
color: white;
}
.all{
text-align: center;
line-height: 100px;
font-size: 26px;
font-weight: 550;
position: absolute;
width: 100px;
height: 100px;
border-radius: 4px;
}
/* 前面所有盒子的定位 */
.n1,.n2,.n3,.n4,.n5,.n6,.n7,.n8,.n9{
top: 0;
}
.n2{
left: 100px;
}
.n3{
left: 200px;
}
.n4{
left: 300px;
}
.n5{
left: 400px;
}
.n6{
left: 500px;
}
.n7{
left: 600px;
}
.n8{
left: 700px;
}
.n9,.n10,.n11,.n12,.n13,.n14,.n15,.n16,.n17{
right: 0;
}
.n10{
top: 100px;
}
.n11{
top: 200px;
}
.n12{
top: 300px;
}
.n13{
top: 400px;
}
.n14{
top: 500px;
}
.n15{
top: 600px;
}
.n16{
top: 700px;
}
.n17,.n18,.n19,.n20,.n21,.n22,.n23,.n24,.n25{
bottom: 0;
}
.n18{
right: 100px;
}
.n19{
right: 200px;
}
.n20{
right: 300px;
}
.n21{
right: 400px;
}
.n22{
right: 500px;
}
.n23{
right: 600px;
}
.n24{
right: 700px;
}
.n25,.n26,.n27,.n28,.n29,.n30,.n31,.n0{
left: 0;
}
.n26{
bottom: 100px;
}
.n27{
bottom: 200px;
}
.n28{
bottom: 300px;
}
.n29{
bottom: 400px;
}
.n30{
bottom: 500px;
}
.n31{
bottom: 600px;
}
.n0{
bottom: 700px;
}
/* 中间幸运玩家的样式 */
span{
display: block;
margin: auto;
margin-top: 350px;
width: 200px;
height: 100px;
background-color: #E52C21;
color: white;
font-size: 30px;
text-align: center;
line-height: 100px;
cursor: pointer;
border-radius: 4px;
}
span:hover{
background-color: #BE2C21;
}
.change{
background-color: #E52C21;
color: white;
}
javascript
//将名字添加到框中
var data = ["袁成新","李明鑫","苟丽特","成洪印","任宏瑞","王娟","龚子威",
"王甜甜","吴坤霞","周萌","丰林","杨国建",
"付跃林","李涵","俞苗","张海峰","张华","张利",
"周朝兵","张洋","王飞","李甜","夏哲显","谢松贝","于佳宁",
"姜驱寒","杨益洲","喻洁","侯政强","贾振天","袁紫薇","彭涛"];
var big = document.getElementsByClassName("big")[0];
for (let i = 0; i < data.length; i++) {
var cname = document.createElement("div");
cname.className = " all n" + i;
cname.innerHTML = data[i];
big.appendChild(cname);
}
var luck = document.getElementById("luck");
var all = document.getElementsByClassName("all");
var num;
var allnum;
var luckchange = true;
var num1,num2,num3,num4,num5,num6,time1,time2,time3,time4,time5,time6;
//幸运玩家点击事件
luck.onclick = function(){
if(luckchange == true){
luckchange =false;
allnum = parseInt(Math.random()*31-1);
num1 = parseInt(Math.random()*128);
num2 = parseInt(Math.random()*16);
num3 = parseInt(Math.random()*16);
num4 = parseInt(Math.random()*8);
num5 = parseInt(Math.random()*4);
num6 = parseInt(Math.random()*3);
time1 = setInterval(fun1,50);
}
}
//更新样式函数
function cleanall(){
for (var i = 0; i < all.length; i++) {
all[i].className = "all n" + i;
}
}
//第一个定时器
function fun1(){
cleanall();
num1--;
allnum ++;
all[allnum].className = "all change n" + allnum;
if(allnum == 31){
allnum = -1;
}
if(num1 <= 0){
clearInterval(time1);
time2 = setInterval(fun2,80);
}
}
//第二个定时器
function fun2(){
cleanall();
num2--;
allnum ++;
all[allnum].className = "all change n" + allnum;
if(allnum == 31){
allnum = -1;
}
if(num2 <= 0){
clearInterval(time2);
time3 = setInterval(fun3,250);
}
}
//第三个定时器
function fun3(){
cleanall();
num3--;
allnum ++;
all[allnum].className = "all change n" + allnum;
if(allnum == 31){
allnum = -1;
}
if(num3 <= 0){
clearInterval(time3);
time4 = setInterval(fun4,350);
}
}
//第四个定时器
function fun4(){
cleanall();
num4--;
allnum ++;
all[allnum].className = "all change n" + allnum;
if(allnum == 31){
allnum = -1;
}
if(num4 <= 0){
clearInterval(time4);
time5 = setInterval(fun5,450);
}
}
//第五个定时器
function fun5(){
cleanall();
num5--;
allnum ++;
all[allnum].className = "all change n" + allnum;
if(allnum == 31){
allnum = -1;
}
if(num5 <= 0){
clearInterval(time5);
time6 = setInterval(fun6,600);
}
}
//第六个定时器
function fun6(){
cleanall();
num6--;
allnum ++;
all[allnum].className = "all change n" + allnum;
if(allnum == 31){
allnum = -1;
}
if(num6 <= 0){
clearInterval(time6);
luckchange = true;
}
}
~~~~~~~~ end ~~~~~~~~
