javascript实现的一个随机点名功能_JavaScript

javascript实现的一个随机点名功能

2021-02-27 17:16JavaScript教程网 JavaScript

这篇文章主要介绍了JS实现的一个随机点名功能,逻辑简单,用在班级或活动时是个不错的选择,需要的朋友可以参考下

这个其实是对JS随机数的一个练习方式，先把所有人得名字预先写好在一个数组里，然后让数组里的值快速的显示在区域内，当你按停的时候滚动就会停止达到随机效果。

				?

									<!DOCTYPE html>

									<html>

									<head>

									    <meta charset="utf-8" />

									    <title>JS写的随机点名 - 琼台博客</title>

									    <script type="text/javascript">

									    var isRun=true;

									    var a = ["张三","李四","王五","赵六"];  

									    var a2 = new Array();

									    function action(str){

									        var s = document.getElementById("bt").value;

									        if(s=="开始"){

									            isRun=true;

									            run();

									            document.getElementById("bt").value="结束";

									        }else{

									            isRun=false;

									            document.getElementById("bt").value="开始";

									        }

									    }

									    function run(){

									        var i = Math.floor(Math.random() * a.length+ 1)-1;

									        document.getElementById("show").innerHTML=a[i];

									        if(isRun==false){

									            var b =true;

									            for(var j in a2){

									                if(a2[j]==i){

									                    b=false;

									                }

									            }

									            if(b){

									                a2[a2.length]=i;

									                return;

									            }

									        }

									        setTimeout("run()",10);

									    }

									</script>

									</head>

									<body>

									    <div style="text-align:center; margin-top:100px;width:100%;">

									        <div id="show" style="margin:auto;font-size:50px;width:100px;height:50px; background:#FFEEFF"></div>

									        <div style="margin-top:20px;">

									            <input id="bt" type="button" onclick="action()" value="开始"/>

									        </div>

									    </div>

									</body>

									</html>