<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{
        width: 500px;
        height: 60px;
        border:1px solid #ccc;
        text-align: center;
        line-height:60px;
        margin:10px;
        background-color: gray;
        float: left;
    }
    </style>
</head>
<body onload="init()">
    <button onclick="start()">随机点名开始</button>
    <button onclick = "end() ">随机点名结束</button>
    <div id="path"></div>
   
</body>
<script>
    // 实现随机点名系统第一步就需要建立一个数组
    var arr = ['四川大学','我的大学','四川理工大学','四川科技大学','四川轻化工大学','四川理工大学',
    '四川科技大学','四川轻化工大学','四川理工大学','四川科技大学','四川轻化工大学','四川理工大学','四川科技大学','四川轻化工大学'
    ,'四川理工大学','四川科技大学','四川轻化工大学','四川理工大学','四川科技大学','四川轻化工大学','四川理工大学','四川科技大学','四川轻化工大学'
    ,'四川理工大学','四川科技大学','四川轻化工大学','四川理工大学','四川科技大学','四川轻化工大学','四川轻化工大学'];
    // 设置一个索引值
    var index = -1;//这个必须要是-1的，只有这样随机点名的效果才会出现
    // 设置一个顶点事件段，用来停止用
    var time;
    //  遍历数组，能够实现简单的功能
// 当页面初次进行加载的时候
function nowSend() {
                
                if(index != -1) {
                    //将上一个选中的div的背景还原
                    document.getElementById("id" + index).style.backgroundColor = "gray";
                }
                //随机数
                var num = Math.floor(Math.random() * arr.length);
                index = num; //记录被选中的div的id
                //获取对应的div
                var div = document.getElementById("id" + num);
                //设置背景颜色
                div.style.backgroundColor = "red";
            }
 
// 随机点名开始
    function start() {
    //    要想要】跑起来，可以直接在里面设置一个定时器
    time = setInterval('nowSend()',100);
    }
// 随机点名结束
function end() {
    // 可以直接在里面放一个清除定时器的
    clearInterval(time);
    alert('接下来由'+arr[index]+'学生代表上台进行演讲')
}
// 初始化操作
function init() {
                //将数组显示在页面上
                for(var i = 0; i < arr.length; i++) {
                    //获取父容器
                    var fa = document.getElementById("path");
                    //创建小div
                    var div = document.createElement("div");
                    //设置id属性,方便寻找
                    div.id = "id" + i;
                    div.className = "box"; //方便给小div设置样式
                    //设置小div中显示的内容
                    div.innerHTML = arr[i];
                    //将小div放在父容器中
                    fa.appendChild(div);
                }
            }
</script>
</html>

原生js实现简单的随机点名系统的更多相关文章

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

    import java.util.*; public class Dome{ public static void addSname(String[] students){ Scanner sc = ...

  2. js随机点名系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  4. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  7. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  8. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  9. 原生js实现简单JSONP

    JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接 ...

随机推荐

  1. JavaScript总结摘要

    一 概述 1.什么是JavaScript? 基于对象.由事件驱动的解释性脚本语言. 2.JavaScript语法特点 区分大写小,这一点不同于HTML. 结尾的分号可有可无. 变量是弱类型的:变量在定 ...

  2. 申请微信小程序步骤

    一.注册 注册网址:https://mp.weixin.qq.com/ 选择账号类型:选择 小程序 注册账号 填写邮箱密码并激活:未注册过公众平台.开放平台.企业号.未绑定个人号的邮箱. 填写主体信息 ...

  3. 【阿里云产品公测】在ACE上部署WP测试体验

      ACE服务其实已经有很多类似的服务提供商了,无论收费的还是免费的,  但是到现在为止还没有体验过,正好借着这次机会,来体验一下阿里云的ACE服务. ' !2NSv   /IQ$[WR cx   B ...

  4. C# 使用Guid类生成不重复的随机数

    什么是Guid GUID(全局唯一标识符)         全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID ...

  5. Java中由Calendar类获取的月、天和小时的简单处理

    在Java中,Calendar是日期处理的一个重要的类.但是,我们使用Calendar获取的月份,天,小时等可能需要进行简单的处理才能满足我们的需要.比如,月份范围是0-11,而我们可能需要的是1-1 ...

  6. switch case 忘记 break

    昨天纠结了很久的问题,一直找不到原因,早上发现是一个低级错误: private void selectButton(int id) { switch (id) { case 0: recommend_ ...

  7. 微信小程序——组件（一）

    接着之前讲解的基础内容,应该对小程序有了一点了解.想深入了解的话,需要自己实际操作一遍比较好.首先了解官方给的组件,API等这样等顺序来比较好一些.下面贴两张demo图,demo的项目结构是设置的两个 ...

  8. React - React Developer Tools开发者工具的安装与使用（Chrome调试插件）

    原文地址:http://www.cnplugins.com/zhuanti/how-to-use-react-tools.html 虽然我们曾经在React开发者工具的基础介绍里面有概括性的介绍过Re ...

  9. JDK/bin下工具列表说明

    JDK/bin下工具列表说明 appletviewer.exe:一种执行HTML文件上的Java小程序类的Java浏览器 apt.exe:注解处理工具(Annotation Processing To ...

  10. SAP C/4HANA与人工智能和增强现实(AR)技术结合的又一个创新案例

    今天这篇迟到的文章,来自我的同事Aviva. 去年SAP C/4HANA发布之后,SAP的从业者们可能或多或少都读过一些来自SAP官方渠道,比如微信公众号"SAP天天事"发布的一些 ...