js实现随机点名功能
更新时间：2020年12月23日 10:55:49 作者：等待的L先生
这篇文章主要为大家详细介绍了js实现随机点名功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现随机点名的具体代码，供大家参考，具体内容如下
效果：
PS:在原来的效果中很快的，但是不知怎么的录下来就变得这么慢了
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名</title>
<style>
.box{
width: 800px;
margin: 200px auto;
text-align: center;
}
.box h2{
font-size: 55px;
font-weight: 800;
}
.box input{
outline: none;
border: none;
background: blue;
color: white;
width: 100px;
height: 50px;
font-size: 15px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="box">
<h2 id="res">请点击下面的按钮，开始抽奖！</h2>
<input type="button" value="点击开始" id="btn">
</div>
<script>
var btn= document.getElementById("btn");
var res= document.getElementById("res");
var student=["张三","李四","王二","麻子","小明","小王","小胡","小虎","狗子","多银币","贡子哥","刘青松","瞎子","亚索"]
var flag=true;
var timer=null;
//
btn.onclick=function(){
if(flag){
timer= setInterval(function(){
var index= getRandom(student.length-1,0) ;
res.innerHTML=student[index];
},10);
btn.value="点击结束";
flag=false;
}else{
clearInterval(timer);
btn.value="点击开始";
flag=true;
}
}
function getRandom(max,min){
return Math.round(Math.random()*(max-min)+min);
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了JavaScript实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了配置eslint规范项目代码风格，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了JavaScript获取用户所在城市及地理位置的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-04
本篇文章主要介绍了Ionic3实现图片瀑布流布局，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
JavaScript实现AOP详解(面向切面编程,装饰者模式)
下面小编就为大家分享一篇JavaScript实现AOP的方法(面向切面编程,装饰者模式)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
Bootstrap.css与layDate日期选择样式起冲突的解决办法
这篇文章主要为大家详细介绍了BootStrap.css与layDate日期选择样式起冲突的解决办法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
this是Javascript语言的一个关键字它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用,下面分四种情况，详细讨论this的用法，感兴趣的朋友可以了解下2013-09-09
这篇文章主要为大家详细介绍了JS实现简易日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要为大家介绍了JS组件Bootstrap Select2使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
JavaScript动态插入script的基本思路及实现函数
偶尔需要动态插入javascript代码的需求，基本思路是动态创建一个script标签，设置其src属性，type属性等，需要的朋友可以参考下2013-11-11
最新评论