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;
            border-radius: 10px;
        }

        .db {
            width: 100px;
            height: 50px;
            background-color: #fff;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            border: 1px solid red;
            float: left;
            margin-left: 5px;
            line-height: 50px;
            text-align: center;
            /*color: red;*/
        }
    </style>
</head>
<body>
<input type="button" value="开始" id="start"/>

<div id="all">
    <div>小明</div>
    <div>小红</div>
    <div>小梁</div>
    <div>老王</div>
    <div>小绿</div>
</div>
<script src="common.js"></script>
<script>
    //为all中的div添加样式
    var divs = my$("all").getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        divs[i].className = "db";
    }
    //点名
    my$("start").onclick = function () {
        if (this.value == "开始") {
            this.value = "停止";
            timeId = setInterval(function () {
                for (var i = 0; i < divs.length; i++) {
                    divs[i].style.backgroundColor = "";
                    divs[i].style.color = "";
                }
                divs[parseInt(Math.random() * divs.length)].style.backgroundColor = "red";
            }, 100)
        } else {
            //清除定时器
            clearInterval(timeId);
            this.value = "开始";
        }
    };
</script>
</body>
</html>

common.js代码

function my$(id) {
    return document.getElementById(id);
}

原文地址：https://www.cnblogs.com/cuilichao/p/9384818.html

时间： 2024-08-28 06:52:25

JavaScript简单的随机点名系统的相关文章

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

小案例之随机点名系统

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

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

JavaScript实现班级随机点名小应用需求分析

需求如下: 1. 在网页中显示,班级所有人员的名字. 2. 点击开始按钮,人员的颜色开始变化,当停止的时候,会有一个颜色不同的位置,那么这个位置就是被点到的同学了. 大致的图形界面如下: 下面是对上面的需求分析的具体分析如下: 1. 初始化这样一个页面,并设置统一颜色-green. a. 同学的名字,用数组存储 b. 在页面用div块显示 2. 随机选择一个位置让其颜色变化成-red a. 颜色的变化用css样式去控制 b.

用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];

随机点名系统

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

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

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

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