基于JavaScript实现随机点名器


Posted in Javascript onFebruary 25, 2021

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 页面关闭前的出现提示的实现代码
May 25 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
jQuery实现文档树效果
Feb 20 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
webpack实现热加载自动刷新的方法
Jul 30 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
JavaScript仿京东轮播图效果
Feb 25 #Javascript
Vue基本指令实例图文讲解
Feb 25 #Vue.js
使用webpack和rollup打包组件库的方法
Feb 25 #Javascript
vue常用高阶函数及综合实例
Feb 25 #Vue.js
原生JS实现音乐播放器的示例代码
Feb 25 #Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 #Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 #Vue.js
You might like
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
在PHP中使用灵巧的体系结构
2006/10/09 PHP
php在线生成ico文件的代码
2007/10/09 PHP
php 异常处理实现代码
2009/03/10 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python使用生成器实现可迭代对象
2018/03/20 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Django框架视图介绍与使用详解
2019/07/18 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
一句话工作感言
2014/03/01 职场文书
会议邀请函
2015/01/30 职场文书
三孔导游词
2015/02/05 职场文书
2016年会开场白台词
2015/06/01 职场文书