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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 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
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
javascript定时变换图片实例代码
2013/03/17 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
express启用https使用小记
2019/05/21 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
python实现划词翻译
2020/04/23 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
python处理csv中的空值方法
2018/06/22 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
python里glob模块知识点总结
2021/01/05 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
架构师岗位职责
2013/11/18 职场文书
初中生物教学反思
2014/01/10 职场文书
小学教师事迹材料
2014/01/13 职场文书
技术经济专业求职信
2014/09/03 职场文书
九九重阳节致辞
2015/07/31 职场文书
java解析XML详解
2021/07/09 Java/Android
java泛型通配符详解
2021/07/25 Java/Android
前端JavaScript大管家 package.json
2021/11/02 Javascript
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技