js随机点名系统

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         body{
  8             background-color: hotpink;
  9         }
 10         .box{
 11             width: 1000px;
 12             height: 240px;
 13             margin: 0 auto;
 14             margin-top: 100px;
 15             clear: both;
 16         }
 17         #btn{
 18             width: 100px;
 19             height: 30px;
 20             margin-left: 600px;
 21             margin-top: 50px;
 22         }
 23         .name{
 24             width: 100px;
 25             height: 30px;
 26             float: left;
 27             background-color: antiquewhite;
 28             margin-left: 10px;
 29             margin-top: 10px;
 30             text-align: center;
 31             line-height: 30px;
 32         }
 33         #span{
 34             float: right;
 35             position: relative;
 36             top: 55px;
 37             right: 185px;
 38         }
 39         h1{
 40             text-align: center;
 41         }
 42     </style>
 43
 44 </head>
 45 <body>
 46 <h1>随机点名系统</h1>
 47 <span id="span"></span>
 48 <div class="box" id="box"></div>
 49 <input type="button" id="btn" value="点名"/>
 50 <script type="text/javascript">
 51     //创造虚拟后台数据
 52     var arrs = ["崔雪莉","郭雪芙","嘉歆","阿芳","雪灵","老王","刘疙瘩","许大妈",
 53         "韩晁","静涵","允儿","查灿灿","靓影","杨幂","李静","邓超","李伟","蓝老师"
 54         ,"金枝","静恬","允儿","杨幂","晶灵","林志玲","嘉懿","流行","邓超","郭琦"
 55         ,"允儿","许大妈","林妹妹","杨幂","佳思","吉玉","张焕","张赛","师傅","菊月"
 56         ,"王晶","吉玟","王飞","林志玲","曾艳","王翠青","JaydenLD"];
 57     //获取父元素
 58     var boxNode = document.getElementById("box");
 59     for (var i = 0; i < arrs.length; i++) {
 60         //创建新元素
 61         var divNode = document.createElement("div");
 62         divNode.innerHTML=arrs[i];
 63         divNode.className="name";
 64         boxNode.appendChild(divNode);
 65     }
 66     //点名
 67     var btn= document.getElementById("btn");
 68     btn.onclick = function () {
 69         if(this.value==="点名"){
 70                 //定时
 71             timeId=setInterval(function () {
 72                     //清空所有颜色
 73                 for (var j = 0; j < arrs.length; j++) {
 74                     boxNode.children[j].style.background="";
 75                 }
 76                 //留下当前颜色
 77                 var random = parseInt(Math.random()*arrs.length);
 78                 boxNode.children[random].style.background="red";
 79             },100);
 80             this.value="停止";
 81         }else{
 82             //清除计时器
 83             clearInterval(timeId);
 84             this.value="点名";
 85         }
 86     }
 87     var spanNode = document.getElementById("span");
 88     //调用时间
 89     getTime();
 90     setInterval(getTime , 1000);
 91     function getTime() {
 92         var day = new Date();
 93         var year = day.getFullYear();
 94         var month = day.getMonth()+1;
 95         var dat = day.getDay();
 96         var hours = day.getHours();
 97         var minitues = day.getMinutes();
 98         var second = day.getSeconds();
 99         spanNode.innerHTML =year+"-"+month+"-"+dat+" "+hours+":"+minitues+":"+second;
100     }
101 </script>
102 </body>
103 </html>

时间: 2024-10-06 01:38:04

js随机点名系统的相关文章

小案例之随机点名系统

随机点名系统 近日,本人学习了对象和计时器,就想写一个小案例随机点名系统,这个小案例其实很简单只需要生成随机下标,从数组中取值并运用innerHTML方法将获取到的信息显示到网页上(这里有人会提出疑问,字符串也可以遍历为什么不用字符串呢?原因很简单字符串无法分隔每个名字.)话不多说直接上代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></ti

随机点名系统

还记得上学的时候被点名的恐惧吗?没办法,刚学完计时器,通过随机点名系统来巩固下知识点,顺便来感受下乐趣!代码奉上! 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-sca

用C语言编写一个随机点名系统

/*编写一个随机点名系统,运行该系统后,按空格键可以显示出一名同学,以前被选中的同学,将不会再次被选中*/ #include<stdio.h> #include <stdlib.h> #include<string.h> #include <conio.h> #include <time.h> struct studentinfo { char sNo[5]; char sxueNo[14]; char sname[20]; }st[100];

JavaScript实现抖音较火的随机点名系统

前段时间刷抖音,发现一个比较好玩的随机抽查系统,老师可以用它抽查到的名字回答问题,提高课堂活跃度和专注度.今天我用javaScript实现了一个,代码如下!!!可直接粘贴 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="w

Java低配版简单的随机点名系统

import java.util.*; public class Dome{ public static void addSname(String[] students){ Scanner sc = new Scanner(System.in); for(int i=0;i<students.length;i++){ System.out.println("存储第"+(i+1)+"个姓名:"); students[i] = sc.next(); } } pub

JavaScript简单的随机点名系统

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #all { margin-top: 10px; width: 540px; height: 50px; -webkit-border-radius: 10px; -moz-border-radius: 10px

js 随机点名

1.对象构造函数 设置节点与人名 constructor({ printElement, startElement, stopElement , person }) { this.list = person; this.printElement = printElement; this.startElement = startElement; this.stopElement = stopElement; this.interval = null; this.time = 100; } 2.生成

08===跨线程访问之随机点名系统。

3.进程:Process ->方法:1.获取操作系统进程:Process.GetProcess() 2.开始应用程序: Process.Start("程序名","要打开的文件"); 打开网页地址:Process.Start("iexplore.ext","htttp://www.baidu.com"); 3.当程序不是全局类型的时候,程序名要加路径. 4.实例方法:.Thread();.Kill(); 4.线程:Thre

随机点名

今天听课听到了Math对象中的随机数方法random(),然后就想用它设计一个简单的随机点名系统.我记得之前高中的时候语文老师用过一个,是类似于名字滚动的那种,现在太菜就先不考虑这个了,后续有机会再研究吧. 先展示一下最终的效果图. 下面是html代码部分 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>随机点名</title