基于JavaScript实现随机点名器

本文实例为大家分享了JavaScript实现随机点名器的具体代码，供大家参考，具体内容如下

HTML代码：

body>
     h1>
    点名啦/h1>
     div id="did">
      input id="rollcall-id" tyPE="button" value="随机点名器">
    br>
      input id="action-id" type="submIT" onclick="doClick()" value="开始">
     /div>
    /body>
    

CSS代码：

style>
 * {
      margin: 0px;
      padding: 0px;
 }
 body {
      background-color: rgb(255, 249, 249);
 }
 h1 {
      text-align: center;
      padding-top: 100px;
      color: rgba(250, 54, 129, 0.562);
 }
 #did {
      position: relative;
      width: 200px;
      margin: 60px auto;
 }
 #did input:First-child {
      width: 200px;
      height: 60px;
      background-color: rgba(250, 54, 129, 0.562);
      /* 不要边框或设边框为透明 */  border: none;
      border-radius: 20px;
      font-Size: 25px;
      color: #fff;
      box-shadow: 0px 0px 3px 3px rgba(250, 54, 129, 0.158);
      /* 点击时边框消失 */  outline: 0;
 }
 #did input:nth-last-child(1) {
      width: 100px;
      height: 40px;
      margin: 40px 50px;
      background-color: rgba(250, 54, 129, 0.562);
      border: 1px solid transparent;
      background-color: rgba(255, 68, 177, 0.432);
      border-radius: 15px;
      box-shadow: 0px 0px 2px 2px rgba(250, 54, 129, 0.158);
      font-size: 17px;
      color: #333;
      outline: 0;
      transition: color 0.2s ease-out;
      transition: box-shadow 0.2s ease-out;
 }
 #did input:nth-last-child(1):hover {
      color: #fff;
      cursor: pointer;
      box-shadow: 0px 0px 4px 4px rgba(250, 54, 129, 0.158);
 }
    /style>
    

JavaScript代码：

script>
     VAR rollcall = document.getElementById("rollcall-id");
     var action = document.getElementById("action-id");
     var h1 = document.getelementsbytagname("h1");
     //不能用name,用name只会取得一个字符 var allName = ["张柳菲", "高颖影", "赵温言", "李颖", "邓辰希", "莫若邻", "秦橙",  "吴筱宇", "赵希", "马素滢", "吕沁雅", "罗鸿哲", "夏素芸", "谢焱之",  "曹梦朦", "李允书", "周枫桥", "孙浩", "江雁菁", "杨振凯", "林舒言",  "钱妙妙", "郭景", "杜贝贝", "童闵然", "钟小凌", "韩云韵", "白然之"];
 //随机产生一个名字 function stringRandom() {
      return parseInt(Math.random() * allName.length);
 }
     var time = null;
     var luckName;
 //开始 function DOStart() {
  if (time == null) {
   time = setInterval(function () {
        //获取随机点名的值    luckName = allName[stringRandom()];
        rollcall.setattribute("value", luckName);
   }
    , 100);
  }
 }
 //停止 function doStop() {
  if (time != null) {
       clearInterval(time);
       time = null;
  }
 }
 //点击事件 function doClick() {
  if (action.value == "开始") {
       //改变样式   action.style.backgroundColor = "#cecece";
       action.style.boxShadow = "0px 0px 2px 2px rgba(100, 100, 100, 0.4)";
       action.value = "停止";
       h1[0].innerHTML = "点名啦";
       //开始随机点名   doStart();
  }
 else if (action.value == "停止") {
       action.style.backgroundColor = "rgba(255, 68, 177, 0.432)";
       action.style.boxShadow = "0px 0px 2px 2px rgba(250, 54, 129, 0.158)";
       action.value = "开始";
       h1[0].innerHTML = "恭喜" + luckName + "同学获得一次发言机会";
       //停止   doStop();
  }
 }
    /script>
    

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

• js实现简单的点名器随机色实例代码
• js实现简单的随机点名器
• js实现随机点名器精简版
• JS实现随机点名器
• JavaScript实现随机点名器
• JavaScript实现简单随机点名器
• JavaScript实现随机点名器实例详解
• javascript实现的一个随机点名功能
• 使用javascript做的一个随机点名程序
• js实现随机点名系统(实例讲解)

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！