JavaScript实现随机点名程序

本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下

效果:

录制的gif效果图没那么理想,其实速度是比这个快的

思路:

1.定义一个数组,存放名单
2.启动定时器,设定间隔时间不断调用函数
3.Math.random()获取随机下标,根据下标的随机变换取出数组中对应的元素
4.逻辑代码完成后,通过DOM对象把变化的结果呈现在页面上

JS代码:

<script>
var arr = ["唐僧", "孙悟空", "猪八戒", "沙悟净", "白骨精", "玉皇大帝", "红孩儿", "白骨精", "太上老君"]

var myTimer = null //定时器编号

// 既是启动定时器的函数,也是停止定时器的函数
function goAndStop(){
  // 如果当前没有定时器在执行,则启动,否则,停止定时器;
  if(myTimer == null){
    // 启动定时器,随机下标,取出名字
    myTimer = setInterval(function(){
      // 1、随机下标
      var index = parseInt(Math.random()*arr.length)

      // 2、根据下标取出学生的姓名,显示在页面上
      document.getElementById("stuName").innerHTML = arr[index]

    },10);

    //启动定时器的同时,改变按钮状态,为下次单击做准备
    document.getElementById("btn").value = "停  止"
  }else{
    // 当前若有有定时器在执行,则停止定时器, 恢复初始状态
    window.clearInterval(myTimer)
    myTimer = null
    document.getElementById("btn").value = "开  始"
  }
}
</script>

HTML + CSS + JS 源码:

<!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:200px;
    height: 300px;
    margin: 100px auto;
  }

  #stuName{
    width: 100%;
    height: 80px;
    border: 2px solid gray;
    line-height: 80px;
    text-align: center;
    font-size: 30px;
    color:orange;
    font-weight: bold;
  }

  input{
    margin-top:30px;
    width: 100%;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
  }

  </style>
</head>
<body>
  <div id="box">
    <div id="stuName">
      随机名单
    </div>
    <input id="btn" type="button" value="开  始" onclick="goAndStop()">
  </div>
</body>
</html>
<script>
var arr = ["唐僧", "孙悟空", "猪八戒", "沙悟净", "白骨精", "玉皇大帝", "红孩儿", "白骨精", "太上老君"]

var myTimer = null
function goAndStop(){
  if(myTimer == null){
    myTimer = setInterval(function(){
      var index = parseInt(Math.random()*arr.length)

      document.getElementById("stuName").innerHTML = arr[index]

    },10);
    document.getElementById("btn").value = "停  止"
  }else{
    window.clearInterval(myTimer)
    myTimer = null
    document.getElementById("btn").value = "开  始"
  }
}
</script>

这是我的一些思路,分享给大家!

如果你有更好的方法,欢迎下方留言相互交流!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-03-25

js实现编辑div节点名称的方法

本文实例讲述了js实现编辑div节点名称的方法.分享给大家供大家参考.具体实现方法如下: 节点html代码如下: 复制代码 代码如下: <div class="img_1" id="img_1" >      <input type="image" class="img_1" src="img/cump.png"></input>      <div class=&

js实现随机点名小功能

本文实例为大家分享了js实现随机点名功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="name1"></div> <button id="btn"

JS实现课堂随机点名和顺序点名

1. 效果: 2. Html代码: <body> <form> <div align="center"> <input type="button" value="开始点名" onclick="students()" class="ks"/> <input type="button" value="停止点名" onc

js实现随机点名系统(实例讲解)

废话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机点名</title> <style type="text/css"> td{ text-align: center; } </style> </head> <body

JavaScript实现随机点名器实例详解

你是公司的程序员,年会的时候公司要给员工抽奖发福利,要求你写一个页面小程序,用来随机选出幸运员工,分设一二三等奖大致如下图示例: 以下是点名器的一种思路,页面比较简陋,只给出了满足最基本要求的代码户要用到计时器,随机数函数等 本抽奖一二三等奖都只设一名幸运员工,开始结束功能用一个按钮实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

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

这个其实是对JS随机数的一个练习方式,先把所有人得名字预先写好在一个数组里,然后让数组里的值快速的显示在区域内,当你按停的时候滚动就会停止达到随机效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS写的随机点名 - 琼台博客</title> <script type="text/javascript">

js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码

复制代码 代码如下: <?php /* <?xml version="1.0" encoding="utf-8"?> <article> <item> <title name="t1"></title> <content>content1</content> <pubdate>2009-10-11</pubdate> </ite

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

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

JavaScript实现随机点名器

本文实例为大家分享了JavaScript实现随机点名器效果图的具体代码,供大家参考,具体内容如下 js实现随机点名器的思路 利用setTimeout()计时器实现随机的效果,功能函数 function show(){ var box=window.document.getElementById("box"); var num=Math.floor((Math.random()*100000))%namelist.length; box.innerHTML=namelist[num];

使用javascript做的一个随机点名程序

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

js实现随机点名程序

最近用到了一下随机点名程序,就自己整理一下.代码实现后的截图如下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ

python写一个随机点名软件的实例

最近有个随机点名软件的需求,故写了一个,上代码:github地址 # -*- coding: utf-8 -*- # @Time : 18-12-31 下午4:21 # @Author : Felix Wang from tkinter import * import tkinter.font as tkFont import random import gc import os, sys import chardet import copy from threading import Thre

python用tkinter实现一个简易能进行随机点名的界面

今天学到Python 有一个名为 random 的内置模块,可用于生成随机数, 这个好玩~可以用来做为上课随机点名的程序了哈哈.. def main_cor(): import random i = random.randrange(0,29) with open('roll_call.txt', encoding='utf-8') as file_obj: contents = file_obj.read() stuff = contents.split(' ') s = stuff[i] s

基于JavaScript实现简单的随机抽奖小程序

对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译运行工具也能够经可能简单(诸如text文本即可编辑,window系统自带的浏览器即可编译运行的情况),决定尝试使用javascript来做.本人对javascript的研究不深,平时主要用于网站开发中对来自客户端的数据进行有效性判断(基于安全性的考虑,安全性要求高的网站尽量使用服务器端语言对数据有效

javascript网页随机点名实现过程解析

主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机点名</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 1

javascript如何使用函数random来实现课堂随机点名方法详解

如何使用函数random来实现课堂随机点名 1.最初的样子如下 2.点击开始点名,上面一行的文字变成名字,名字在不停的变化,开始点名变成停止点名,如下 3.点击停止点名,上面名字不动,停止点名变成开始点名,如下:李四同学回答老师问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #d2{

javascript 随机抽奖程序代码

随机抽奖程序 请单击开始抽奖 开始抽奖(S) 停止(O) [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]