JavaScript实现随机点名网页
更新时间：2021年09月02日 13:12:54 作者：风筱默染
这篇文章主要为大家详细介绍了JavaScript实现随机点名网页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript写一个随机点名网页，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
border: 1px solid black;/*设置盒子的边框和颜色*/
width: 500px;
height: 500px;
margin: 100px auto;/*离顶部200px，并且居中*/
background-color: #000000;/*盒子的背景颜色*/
position: relative;/*定位*/
}
p{
width: 500px;
height: 200px;
text-align: center;/*将文本居中*/
line-height: 200px;/*设置行高*/
font-size: 80px;/*字体大小*/
color: #ffff00;
}
#anniu {
width: 200px;
height: 50px;
background-color:#00aaff;
position: absolute;
bottom: 100px;/*距离底部100px*/
left: 50%;
margin-left: -100px;
color: #ffffff;
font-size: 20px
}
</style>
</head>
<body>
<div id="box">
<p id="wenben">随机点名册</p>
<input type="button" value="开始点名" id="anniu">
</div>
</body>
<script>
var wenben = document.getElementById("wenben")
var anniu = document.getElementById("anniu")
var timer //定义计时器
var arr = ['刘一','陈二','张三','李四','王五','赵六','孙七','周八','吴九','郑十']
var test = true
anniu.onclick = function() {
if (test) {
start()
anniu.innerHTML = "结束"
test = false
} else {
stop()
anniu.innerHTML = "开始"
test = true
}
}
function start() { /*开始*/
timer = setInterval(function random() {
var index = parseInt(Math.random() * arr.length)
wenben.innerHTML = arr[index]
}, 50);
}
function stop() { /*结束*/
clearInterval(timer)
}
</script>
</html>
实现效果如下图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
核心是 position:relative;，才能让其内部的 ul 以绝对定位，通过改变 top 值实现向上移位置。2009-10-10
这篇文章主要为大家详细介绍了纯原生js实现贪吃蛇游戏的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
下面小编就为大家带来一篇js操作浏览器的参数方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
ECMAScript是浏览器脚本语言的规范,而我们熟知的js语言,如JavaScript则是规范的具体实现,下面这篇文章主要给大家介绍了关于ES6语法总结的相关资料,需要的朋友可以参考下2022-05-05
在Web开发中,JavaScript不仅是实现交互效果的关键,还可以用于构建复杂的可视化组件,如动态交互式图表,下面我们就来看看如何构建一个动态交互式图表吧2024-02-02
本篇文章主要介绍了js实现扫雷小程序的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
使用Javascript和DOM Interfaces来处理HTML
使用Javascript和DOM Interfaces来处理HTML...2006-10-10
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
这篇文章主要介绍了JavaScript子类用Object.getPrototypeOf去调用父类方法。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要为大家详细介绍了JavaScript实现点击星星小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
用nodejs访问ActiveX对象，以操作Access数据库为例。
有人提问“如果用nodejs访问sql server？” 找了找资料，发现有两类解决方法，使用第三方nodejs插件2011-12-12
最新评论