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 相关文章推荐
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
php生成短网址示例
2014/05/05 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
跟老齐学Python之dict()的操作方法
2014/09/24 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
简单了解Python3里的一些新特性
2019/07/13 Python
Python字节单位转换实例
2019/12/05 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
python+OpenCV实现图像拼接
2020/03/05 Python
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
公司培训欢迎词
2014/01/10 职场文书
销售人员求职信
2014/07/22 职场文书
教师个人总结范文
2015/02/11 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript