运用JavaScript做一个随机点名器

发布时间：2022-02-21 15:11 所属栏目：13 来源：互联网

导读：点名器对于学生来说应该都很熟悉，那么我们如何使用代码来实现一个随机点名器呢？其实很简单，下面就分享用JavaScript实现随机点名器的详细代码。 HTML代码： body h1点名啦/h1 div id=did input id=rollcall-id type=button value=随机点名器br input id=ac

点名器对于学生来说应该都很熟悉，那么我们如何使用代码来实现一个随机点名器呢？其实很简单，下面就分享用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>
       以上用JavaScript实现随机点名的详细代码，感兴趣的朋友能够参照上述内容写一个简易的随机点名器。

（编辑：ASP站长网）