基于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 相关文章推荐
对于Form表单reset方法的新认识
Mar 05 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
jQuery聚合函数实例
May 21 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
js快速排序的实现代码
2013/12/08 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
详解参数传递四种形式
2015/07/21 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
饭店工作计划书
2014/01/10 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
模具毕业生推荐信
2014/02/15 职场文书
2014年清明节寄语
2014/04/03 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
群众路线剖析材料
2014/09/30 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书