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 相关文章推荐
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
Prototype框架详解
Nov 25 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
基于node.js实现爬虫的讲解
Feb 18 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
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
javascript的BOM汇总
2015/07/16 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
举例介绍Python中的25个隐藏特性
2015/03/30 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
出纳会计岗位职责
2014/03/12 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
通知的格式范文
2015/04/27 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书