您的位置：首页 > Web前端 > JavaScript

关于js实现一个简单的点名器

2020-06-29 04:59 1036 查看

javascript 实现简单点名器

- css样式

<style>
.box{
width: 350px;
height: 300px;
background-color: antiquewhite;
margin: 0 auto;
text-align: center;
}
#names{
width: 260px;
height: 260px;
line-height: 260px;
background-color: aquamarine;
margin: 0 auto;
font-size: 32px;
color: red;
}
</style>

- body部分
<body>

<div class="box">
<div id="names">点名了！！</div>
<button onclick="start()">开始</button>
<button onclick="end()">停止</button>
</div>
- script部分
<!-- 随机点名效果 -->
<script>
var names = document.getElementById('names');
var timeId;
//封装的事随机显示名字的代码
function start(){
//数组，存放学生的名字
var arr = ['亚瑟','不知火舞','安琪拉','貂蝉','鲁班七号'];
timeId = setInterval(function(){
//随机从数组里去元素
var num = parseInt(Math.random() *arr.length)
names.innerHTML=arr[num];
},200)

}

function end(){
clearInterval(timeId);
}

</script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航