基于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>

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

赞 (0)

相关推荐

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

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

  • 使用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"

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

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

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

  • JS实现随机点名器

    本文实例为大家分享了JS实现随机点名器的具体代码,供大家参考,具体内容如下 实现一个简单的随机点名器 需求分析: 两个按钮实现随机点名的开始和结束 创建ul元素,添加到父级div中,实现了每个名字需要放在一个单独的盒子中 根据随机数进行随机选择,(涉及到了两个函数 setInterval clearInterval)在选择之前,先清空盒子的所有类样式,如果被选中,则重新赋予类样式 当点击停止按钮时,根据上一步拥有重新选择出来的li标签获取标签内容,并且直接可以展示到对应的文本框. 下面开始实现

  • 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];

  • js实现简单的点名器随机色实例代码

    js简单实现点名器随机色 布局(排版) <body> <button onclick="star()">开始</button> <button onclick="stop()">结束</button> <div id="box"> </div> </body> css样式 <style> #box{ width: 240px; height

  • JavaScript实现简单随机点名器

    JavaScript实现简单随机点名器

    本文实例为大家分享了js随机点名器的具体代码,供大家参考,具体内容如下 <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat

  • js实现随机点名器精简版

    本文实例为大家分享了js实现随机点名器的具体代码,供大家参考,具体内容如下 此点名器开始点名后需点击停止按钮完成点名,因为是精简版没有考虑自动停止需求.姓名数据以字符串形式储存,适合小范围点名使用,有大量需求可自己适当改进. <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&quo

  • js实现简单的随机点名器

    本文实例为大家分享了js实现简单随机点名器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht

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

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

随机推荐