JS实现随机点名器


Posted in Javascript onApril 12, 2020

本文实例为大家分享了JS实现随机点名器的具体代码,供大家参考,具体内容如下

实现一个简单的随机点名器

需求分析:

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

下面开始实现

1.编写html页面

<div id="dv">
 <input type="button" value="开始点名" id="btu">
 <input type="button" value="停止" id="btu1">
 <div class="luc">你将会是下一个幸运儿吗?请看大屏幕</div>
 <div class="ch">
 <span class="name"></span>
 </div>
</div>

2.页面css样式

*{
 margin: 0px;
 padding: 0px;
}
body{
 background-color: cornsilk;
}
#dv{
 width: 800px;
 margin: 20px auto;
 border: 4px solid darkviolet;
 text-align: center;
}
ul li{
 vertical-align: top;
 display: inline-block;
 width: 100px;
 height: 50px;
 border-radius: 35%;
 border: 3px dashed palevioletred;
 text-align: center;
 line-height: 50px;
 margin: 5px 5px;
}
li.change{
 background-color: greenyellow;
 font-size: 15px;
 color: black;
 font-weight: bolder;
}
#btu,#btu1{
 width: 100px;
 height: 50px;
 font-size: 15px;
 border-radius: 10px;
 cursor: pointer;
 margin: 10px 50px 0 50px;
 color: brown;
 background-color: pink;
}
.ch{
 position: relative;
 width: 150px;
 height: 150px;
 border-radius: 10px;
 margin: 12px auto;
 border: 2px solid yellow;
}
.luc{
 font-size: 20px;
 font-weight: bold;
 margin: 10px auto;
 text-align: center;
 color: green;
}
.name{
 position: absolute;
 font-size: 35px;
 left: 40px;
 top: 50px;
}

3.js代码

DOM获取对应元素

//获取dv元素
var dv=document.getElementById("dv");
//获取点击开始按钮
var btu=document.getElementById("btu");
//获取点击结束按钮
var btu1=document.getElementById("btu1");

创建ul列表,并且构建li数组 这一步其实是在页面加载之后浏览器才实现的

//创建ul列表
var ula=document.createElement("ul");
//将ul追加到父级元素div中
dv.appendChild(ula);
//获取js中插入的Li标签;
var oLi=document.getElementsByTagName("li");
//插入数组
var arr=["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"]
//动态创建li,追加到ul
for(var i=0;i<arr.length;i++){
 //创建li标签
 var liObj=document.createElement("li");
 liObj.innerText=arr[i];
 ula.appendChild(liObj);
}

点击开始按钮开始随机选择

//声明timer
var timer = null;
//点击开始进行随机选择
btu.onclick=function () {
 //每次运行之前清除timer;
 clearInterval(timer);
 //设置定时器
 timer=setInterval(function () {
  //根据数组长度范围生成随机数
  var i = Math.floor(Math.random()*arr.length);
  //通过for循环清空所有class类样式
  for(var j=0;j<oLi.length;j++){
   oLi[j].removeAttribute("class");
  }
  //为随机选择的li重新设置类样式
  oLi[i].className="change";
 },50);
};

点击结束按钮停止选择

btu1.onclick=function () {
 //清除timer;
 clearInterval(timer);
 //根据类样式找到选中的元素
 var choise = document.getElementsByClassName("change")[0];
 //获取选中元素的内容
 var name=choise.innerText;
 //获取选中展示位置
 var nameSpan = document.getElementsByClassName('name')[0];
 //位置添加内容
 nameSpan.innerText=name+"号";
}

效果图如下:

JS实现随机点名器

以上就是所有的代码,不周之处请教之,思想需要碰撞,知识需要交流嘿嘿,再分享一句今日正能量小金句:当前你所遇见的所有困境,都将成为你以后不断上升的阶梯;加油!

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

Javascript 相关文章推荐
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 #Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 #Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 #Javascript
js函数柯里化的方法和作用实例分析
Apr 11 #Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 #Javascript
JavaScript运行机制实例分析
Apr 11 #Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 #Javascript
You might like
自己做矿石收音机
2021/03/02 无线电
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python定时关机小脚本
2018/06/20 Python
numpy基础教程之np.linalg
2019/02/12 Python
django中瀑布流写法实例代码
2019/10/14 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
高级技校毕业生自荐信
2013/11/18 职场文书
给领导的致歉信范文
2014/01/13 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
建筑横幅标语
2014/10/09 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
绿色环保倡议书
2015/04/28 职场文书
工作收入证明范本
2015/06/12 职场文书
优秀创业计划书分享
2019/07/19 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
聊聊JS ES6中的解构
2021/04/29 Javascript
PyMongo 查询数据的实现
2021/06/28 Python