今天无聊,又刷了一遍复联4,突然想做一个点名器,大学java课老师的点名器曾让我胆战心惊,如果通过js来实现一个点名器该怎么做呢?
废话不多说,先来看看最终要实现的效果:
首先来分析HTML结构:
结构部分主要依靠四个div进行布局,红框为最外层容器,内部有三个子元素,其中 开始 和 点名 两个div是并排的。
HTML:
<div id="outer">
<div id="left">开始</div>
<div id="right">点名</div>
<div id="name">会是谁?</div>
</div>
样式部分主要是针对HTML结构的布局,在这里我们需要对父元素(outer)设置相对定位,确保让其中三个子元素开启绝对定位后,是依靠父元素进行定位的:
CSS:
/* 清除一下默认样式*/
*{
padding: 0;
margin: 0;
}
/* 设置父容器样式*/
#outer{
width: 500px;
height: 400px;
background-color: #161823;
/* 设置父元素相对定位,为子元素定位提供基准*/
position: relative;
border-radius: 20px;
margin: 100px auto;
box-shadow: 5px 5px 10px #808080;
}
/* 父容器下的容器通用样式*/
#outer div{
position:absolute;
height: 100px;
width: 250px;
line-height: 100px;
font-size: 50px;
color: #ffffff;
text-align: center;
}
/* 分别对三个子元素进行定位调整*/
#left{
top: 100px;
left: 0;
}
#right{
top: 100px;
right: 0;
}
#outer #name{
bottom: 50px;
width: 500px;
color: #ffc64b;
}
做到这里之后,点名器的结构样式已经完成了,接下来我们就要通过js来让我们的点名器产生交互。
在这里我们的需求是当鼠标点击开始后,开始文字变为停止,其次会是谁?会不断的更新名字,当再次点击停止,文字又会变为开始,而下方的名字就不会变了。而在姓名不断切换的过程中,需要使用到js中的定时器来实现。
其实在这里,我最开始并不知道如何做,一开始我是通过循环来遍历整个数组,但是这样遍历程序执行的有点快,根本看不到姓名切换的效果,于是我又想到,也许在写入姓名之前加一个等待,获取可以实现切换的效果,这样也可以观察出来,但是js中并没有像Python中的time.sleep(),于是我在查了百度后,找到了一个方法,那就是计时器。
JavaScript:
// 页面全部加载后,再执行js程序
window.onload = function(){
// 将姓名存入数组
var nameArr = ['蜘蛛侠','黑豹','奇异博士','美国队长',
'钢铁侠','绿巨人','雷神','蚁人','死侍','惊奇队长','幻视',
'红绯女巫','猎鹰','黑寡妇','灭霸','王','黄蜂女'];
var btn = document.getElementById('left');
var nameList = document.getElementById('name');
// 标志位
var flag = true;
btn.onclick = function(){
if(flag){
// 修改文本
btn.style.color = 'red';
btn.innerHTML = '停止';
// 定时器
var timer = setInterval(function(){
// 随机产生索引
var i = Math.floor(Math.random() * nameArr.length);
// 通过索读取姓名,并将姓名写入HTML中
nameList.innerHTML = nameArr[i];
// 这一步的目的是当第二次点击时,让计时器停止,使得最后写入的姓名固定下来
// 因为在第一次点击时,计时器需要启动,而这个时候标志位flag已经变为false
// 所以第二次点击,标志位flag变为true,代表需要停止,这时候停止计时器
if(flag == true){
clearInterval(timer);
}
},50)
}else{
// 再次点击恢复原状
btn.style.color = '#ffffff';
btn.innerHTML = '开始';
}
// 更改标志位状态值
flag = !flag;
}
}
做到这里,我们的计时器就全部完成了,在点名器中,最重要的点是计时器 ,通过计时器来快速随机访问数组的索引读取姓名,关于计时器的使用方法,可以通过菜鸟教程学习:
最后,还可以在这个例子上延伸一下:
如果需要一次性点多个人姓名,一次性将多个姓名写入空白区域。
最后如果您觉得对您有帮助的话,点个赞吧!