JS实现的随机点名的模型

关注

原创最新推荐文章于 2026-10-16 11:33:17 发布 4.6k 阅读 AI 写同款· GEO 优化 ›

一个教育 SaaS 工具平台的技术全景：拾趣课堂 6 款工具的架构设计与产品逻辑教育信息化解决方案通常面临两个矛盾：功能丰富 vs 使用简单，付费盈利 vs 教师预算。拾趣课堂是一个面向中小学及幼教教师的课堂工具平台，试图在这两个矛盾中找到平衡点。本文从教育 SaaS 工具平台的技术选型和课堂工具产品设计角度，拆解这个平台的 6 款工具。工具层各管各的表，平台层只存最少数据。每个工具有独立的数据模型和业务逻辑，通过关联到平台层的班级和学生。这种架构的优势：新工具可以独立开发，不影响已有工具。劣势：跨工具数据聚合需要额外处理。阅读详情

先看看运行效果

再看源代码

<!-- 
  下面的代码是我做的我们班每次上课前的一个随机点名的简单模型
  本人觉得写的不是很好 希望靠各位大侠的想象力和精湛的技术改进下 谢谢了
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>幸运星 就是你</title>
<style>
td {
        background-color: #FFFFFF;
        border: 1px solid #009933;
        font-size: 50pt;
        height: 70px;
        width: 75px;
        text-align: center;
}
.button {
        background-color: transparent;
        border: 1px solid #009933;
        font-size: 20pt;
        color: #009933;
        height: 40px;
        width: 100px;
}
.sp {
        background-color: #FFFFFF;
}
.total {
        border: 1px solid #009933;
        border-bottom: 1px solid #009933;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        background-color: transparent; /* 背景色透明 */
        text-align: center;
        font-size: 14px;
        color: green;
        width: 50px;
}
.f {
        font-size: 14px;
        color: #009933;
}
</style>
<script type="text/javascript" language="javascript">
  var tds = document.getElementsByTagName("td");//获得所有的td
  var time;//每跳一格运行的时间 1-50ms之间
  var count = 0;//每个td对应的下标
  var totalTime;//每跳一格运行时间的总和
  var maxTime;//maxTime是每次运行的最大时间 在1000到6000之间 随机的
  var flag;//用来开始和停止的标识 1表示开始 0表示结束
  
  //开始
  function begin()
  {
    flag = 1;
    maxTime = Math.floor(Math.random()*3000) + Math.floor(Math.random()*2000) + 1000;
    totalTime = 0;//每次运行时 将前一次运行的总时间 清零
    changeColor();
  }
  
  //结束
  function end() 
    {   
        flag = 0;
    } 
  
  function changeColor()
  {   
      time = Math.floor(Math.random()*50) + 1;//本行放在这里 则每次每格运行的时间是不一样的
    if(count < tds.length)
    { 
      //下面这样写 主要是为了按1-16顺序选择 本人觉得不是很好 如果哪位大侠有更好的 欢迎指教
      tds[count].style.color="#FF0DF0";
      rollback(count);
      if(count == 4)
      {
        count = 6;//输出6
      } 
      else if(count == 7)
      {
        rollback(count);
        count = 8;//输出7
      } 
      else if(count == 9)
      {
        rollback(count);
        count = 10;//输出8
      } 
      else if(count == 11)
      {
        rollback(count);
        count = 15;//输出9
      }
      else if(count == 16)
      {
        rollback(count);
        count = 14;//输出10
      }
      else if(count == 15)
      {
        rollback(count);
        count = 13;//输出11
      }
      else if(count == 14)
      {
        rollback(count);
        count = 12;//输出12
      }
      else if(count == 13)
      {
        rollback(count);
        count = 11;//输出13
      }
      else if(count == 12)
      {
        rollback(count);
        count = 9;//输出14
      }
      else if(count == 10)
      {
        rollback(count);
        count = 7;//输出15
      }
      else if(count == 8)
      {
        rollback(count);
        count = 4;//输出16
      }
      else if(count == 5)//当显示的是16时 转头重新从1开始显示
      {
        count = -1;
      }
    }
    countcount = count + 1;    
    
    totalTimetotalTime = totalTime + time;//每次运行的时间累加
    
    if(totalTime < maxTime)//如果累计运行的时间小于maxTime 则继续运行 否则停止
    {
      if (flag == 0)   
            {
        return false;
      }
      setTimeout("changeColor()", time);        
    }   
  }
  
  //rollback方法是为了将不是当前的数字的颜色恢复为以前的颜色 以示区别
  function rollback(s)
  {
    for(var i = 0; i < tds.length; i++)
    {
      if(i != s)
      {
        tds[i].style.color="#000000";
      }
    } 
  }
</script>
</head>
<body>
<form name="luck">
<table id="luckboy" border="0" align="center" cellpadding="0"
  cellspacing="1" style="position: relative; left: 0px; top: 30px">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>16</td>
    <td colspan="3" rowspan="3" class="sp"><img
      src="ImgE_250x250.png" align="middle" /><!-- 你的图片 --></td>
    <td>6</td>
  </tr>
  <tr>
    <td>15</td>
    <td>7</td>
  </tr>
  <tr>
    <td>14</td>
    <td>8</td>
  </tr>
  <tr>
    <td>13</td>
    <td>12</td>
    <td>11</td>
    <td>10</td>
    <td>9</td>
  </tr>
</table>
<br />
<br />
<br />
<div align="center"><input type=button name="start" value="开 始"
  class="button" onclick=begin();> <input type=button
  name="over" value="结 束" class="button" onclick=end();></div>
</form>
</body>
</html>