基于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 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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
星际争霸任务指南——神族
2020/03/04 星际争霸
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
python 快速排序代码
2009/11/23 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
Windows下安装Scrapy
2018/10/17 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python Gitlab Api 使用方法
2019/08/28 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
实验室的标语
2014/06/20 职场文书
五年级学生评语大全
2014/12/26 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python