课堂时老师抽查作业, 下面的小盆友是不是经常担心受怕, 我们现在开始学习吧
以下源码, 并未优化
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 点名表 </title>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- #myBox{
- width: 400px;
- height: 200px;
- border: 1px solid;
- margin: 0 auto;
- overflow-y: auto;
- }
- #myBtn{
- text-align: center;
- }
- marquee{
- font-size: 36px;
- }
- span{
- padding-left: 10px;
- }
- </style>
- </head>
- <body>
- <div id="myBox"></div>
- <div id="myBtn">
- <select name=""id="myNumber"></select><button id="start"> 开始点名 </button><button id="end" disabled > 结束点名 </button>
- </div>
- </body>
- <script>
- var myNumber = document.getElementById("myNumber");
- var start = document.getElementById("start");
- var end = document.getElementById("end");
- var user = document.getElementById("user");
- var str = "";
- var num = 0;
- var myAy = [];
- // 这里是班级人员名单
- var data = ["张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三","张三"];
- // 循环输出下拉框
- for(var i = 1;i <= 10;i++){
- str += "<option>"+i+"</option>";
- }
- myNumber.innerHTML = str;
- // 开始抽查
- start.onclick = function () {
- myAy = [];
- end.disabled = false;
- this.disabled = true;
- myBox.innerHTML = "<marquee > 要抽查倒霉孩纸喽 </marquee>"
- };
- // 结束抽查
- end.onclick = function () {
- start.disabled = false;
- this.disabled = true;
- num = myNumber.value;
- myNum()
- };
- // 随机数位置, 总人数多少就设置多少
- function doRandom() {
- return Math.floor(Math.random()*39);
- }
- function myNum() {
- while (myAy.length <num){
- var i = doRandom();
- if(myAy.indexOf(i) == -1){
- myAy.push(i);
- }
- }
- var html = "";
- for(var n = 0;n < myAy.length;n++){
- html += ","+data[myAy[n]];
- }
- // 截取字符串
- myBox.innerHTML = html.substr(1);
- }
- </script>
- </html>
来源: http://www.qdfuns.com/article/40084/cc4f3717cac86f45235ba252d6d59828.html