基于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下弹出窗口的变通
Apr 18 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 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模板技术[转]
2007/01/04 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
window.open的功能全解析
2006/10/10 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
js获取内联样式的方法
2015/01/27 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
numpy基础教程之np.linalg
2019/02/12 Python
ipython和python区别详解
2019/06/26 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
计算机求职信
2013/12/01 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
考研导师推荐信范文
2015/03/27 职场文书
总经理司机岗位职责
2015/04/10 职场文书
圆明园观后感
2015/06/03 职场文书
泰坦尼克号观后感
2015/06/04 职场文书