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

利用原生js实现随机点名

2020-01-14 21:28 399 查看

类型一：

效果：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;

}

.wrapper {
width: 800px;
margin: 10px auto;
border: 2px solid blue;
text-align: center;
}

.lucking {
width: 200px;
height: 100px;
line-height: 100px;
border: 1px solid blue;
}

.wrapper ul li {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 4px;
border: 2px solid blue;
border-radius: 5px;
display: inline-block;
}

.wrapper button {
margin-top: 20px;
width: 120px;
height: 50px;
border: none;
background-color: #ddd;
border-radius: 5px;
font-weight: 700;
outline: none;
cursor: pointer;
color: #fff;
font-size: 18px;
}

.wrapper .active {
background-color: orange;
font-weight: bold;
color: #fff;
}

.wrapper .start {
background: green;
}

.wrapper .stop {
background: red;
}
</style>
</head>

<body>
<div class="wrapper" id="_wrapper">
<ul id="_ul"></ul>
<button class="start">开始点名</button>
<button class="stop">停止</button>
<div class="lucking" id="_lucking">
<p></p>
</div>
</div>
<script>
var array = ['张学友', '郭富城', '郑源', '卓依婷', '李易峰', '杨紫', '黄晓明', '易烊千玺', '杨洋', '陈钰琪', '杨幂', '李一桐', '李宇春', '周笔畅', '张靓颖', '谢霆锋', '张毅', '周传雄', '黄源', '刘德华', '庾澄庆'];
// 获取元素
var _wrapper = document.getElementById('_wrapper');
var ul = document.getElementById('_ul');;
var timer = null;
init();

function init() {
// 动态创建li
for (var i = 0; i < array.length; i++) {
var oli = document.createElement('li');
oli.innerHTML = array[i];
ul.appendChild(oli);
}
// 点击
click();
}

function click() {
// 获取start按钮
var start = _wrapper.getElementsByTagName('button')[0];
var stop = _wrapper.getElementsByTagName('button')[1];
var lucking = document.getElementById('_lucking');
// 定时器
start.addEventListener('click', function() {
clearInterval(timer);
timer = setInterval(function() {
// 获得随机数
var random = Math.floor(Math.random() * array.length);
for (var i = 0; i < array.length; i++) {
ul.children[i].className = '';
}
ul.children[random].className = 'active';
}, 50);
});
stop.addEventListener('click', function() {
clearInterval(timer);
// 找到此时的元素
var active = document.getElementsByClassName('active')[0];
lucking.children[0].innerText = "幸运儿：" + active.innerText;
})
}
</script>
</body>

</html>

类型二：

效果：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-70%);
}
button{
width:80px;
height: 40px;
border-radius: 10px;
border:none;
outline: none;
color: #fff;
}
</style>
</head>

<body>
<center class="center">
<div id="d" style="background: #aaa;width: 250px;height: 120px;border-radius: 10px;text-align: center;line-height: 120px;">
<!-- 设置背景框颜色和长度 -->
<h1 id='name'></h1> <!-- 用于显示随机的人名 -->
</div>
<div>
<button id='start' type="button" style="margin:10px 0;background: red;">开始</button>
</div>
<div>
<button id='temp' type="button" style="background: green;">暂停</button>
</div>
</center>
<script type="text/javascript">
window.onload = function() {
var names = ['张三', '李四', '王五', '赵六', '周杰伦', '刘德华', '张学友', '郭富城']; //人名数组
var clors = ['red', 'orange', 'blue', 'yellow', 'green', '#ccc', '#fff', 'violet']; //颜色数组
var name = document.getElementById('name'); //获取id为name的元素
var d = document.getElementById('d');
var temp = document.getElementById('temp');
var startR = -1; //记录计时器的序号
var start = document.getElementById('start');

function Random() { //产生随机数，并更改h1中的内容与颜色
var nNum = Math.floor(Math.random() * 8); //这里的8为你当前人名的数量
var cNum = Math.floor(Math.random() * 8);
name.innerHTML = names[nNum];
d.style.color = clors[cNum];
}
start.onclick = function() { //单击开始方法
if (startR == -1) //不加限制，多次点击开始会有多个计时器启动
startR = setInterval(Random, 100);
}
temp.onclick = function() { //单击暂停方法
clearInterval(startR);
startR = -1;
}
}
</script>
</body>

</html>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
qq_42802170 发布了26 篇原创文章 · 获赞 1 · 访问量 655 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航