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

1. 效果：

2. Html代码：

<body>
<form>
  <div align="center">
    <input type="button" value="开始点名" onclick="students()" class="ks"/>
    <input type="button" value="停止点名" onclick="stop()" class="ks" id="nu"/>
    <hr color="blue">
    <br>
    <div id="div1" align="center">随机点名区域</div>
  </div>
</form>
</body>

3. JavaScript代码：

<script type="text/javascript">
    var i = 0;
    //t用来接收setTimeOut()的返回值
    var t;
    var st = ['张三','李四', '老王','旺财','铁柱', '王八','来福','小明','小红','狗蛋','SB.Child'];
    var u;
    //点名函数
    function students()
    {
      //顺序点名
    /*  if (i < st.length)
      {
        u = st[i];
      }
      else
      {
        //点到最后一个就回来重新点起
        i = 0;
        u = st[i];
      }
      i = i + 1;
*/
      //随机点名 产生0-数组长度之间的数作为数组下标
      var num = Math.floor(Math.random()*st.length);
      u = st[num];
      //更改文本框显示的value值
      document.getElementById("div1").innerHTML = u ;
      t = setTimeout("students()", 1000);
    }
    //停止点名函数
    function stop()
    {
      clearTimeout(t);
    }
    </script>

4. CSS代码：

<style type="text/css">
  body{
    background: #f5faff;
  }
  .ks{
    width: 140px;
    line-height: 55px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    text-shadow:2px 2px 2px #333;
    border-radius: 5px;
    margin:0 20px 20px 0;
    position: relative;
    overflow: hidden;
    background-color: limegreen;
    border:1px solid #d2a000;
    box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
  }
  #nu{
    background-color: red;
  }
  #div1 { font:40px '微软雅黑';text-align: center; background-color: gainsboro;
    width: 60%;
    height: 60%;
    margin-bottom:20px;
  }
</style>

以上所述是小编给大家介绍的JS实现课堂随机点名和顺序点名，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 使用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"> <title>随机点名</title> <style type="text/css"> td{ text-align: center; } </style> </head> <body

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

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

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

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

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

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

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

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

  • js实现课堂随机点名系统

    本文实例为大家分享了js随机点名系统的具体代码,供大家参考,具体内容如下 style样式 <style> .cor { background-color: #6083cd; } #box { width: 500px; border: 2px solid black; margin: 0 auto; height: 500px; } ul { list-style: none; } li { width: 50px; height: 50px; margin: 20px; float: lef

  • JS+CSS实现随机点名(实例代码)

    JS+CSS实现随机点名(实例代码)

    HTML代码结构 <body> <div id="box">随机点名</div> <span id="span">开始</span> </body> CSS代码结构 <style> #box { width: 30%; height: 200px; background-color: rgb(233, 248, 214); border: 1px solid rgb(130, 216

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

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

  • JavaScript随机打乱数组顺序之随机洗牌算法

    假如有一个数组是这样子: var arr1 = ["a", "b", "c", "d"]; 如何随机打乱数组顺序,也即洗牌. 有一个比较广为传播的简单随机算法: function RandomSort (a,b){ return (0.5 - Math.random()); } 实际证明上面这个并不完全随机. 随便一搜网上太多这种东西了,看一下stackoverflow上的一个高分回答,答案出自github上. knuth-s

  • JS实现数组随机排序的三种方法详解

    JS实现数组随机排序的三种方法详解

    目录 1.利用数组方法sort实现随机排序 2.洗牌算法实现随机排序 3.洗牌算法深入分析 全部代码 1.利用数组方法sort实现随机排序 实现随机排序方法还是很多的,用for循环是可以写的,用Lodash等三方js方法库也行.但个人以为使用sort比较方便,但是他又缺点,缺点就是不够那么的随机,我看过sort运行机制后,发现他竟然是利用一个比较器两两比较出来的. var arr = [1, 2, 3, 4, 5] arr.sort(function () { return Math.rando

  • JS实现的随机排序功能算法示例

    本文实例讲述了JS实现的随机排序功能算法.分享给大家供大家参考,具体如下: 使用JS编写一个方法 让数组中的元素每次刷新随机排列 方法一: var arr =[1,2,3,4]; var t; for(var i = 0;i < arr.length; i++){ var rand = parseInt(Math.random()*arr.length); t = arr[rand]; arr[rand] =arr[i]; arr[i] = t; } console.log(arr); 方法二:

  • JAVA随机打乱数组顺序的方法

    本文实例讲述了JAVA随机打乱数组顺序的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: import java.util.Random;        public class RandomSort {        private Random random = new Random();        //数组大小        private static final int SIZE = 10;        //要重排序的数组        private int

  • js代码实现随机颜色的小方块

    下面一段代码就是用js实现的随机颜色的小方块,不多说了代码很简单,直接上代码了. /**/js注释已删 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF- "> <meta charset="utf- "> <title>koringz&l

  • js实现网页随机切换背景图片的方法

    本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

随机推荐