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 相关文章推荐
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
Vue.js实现的表格增加删除demo示例
May 22 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
Smarty保留变量用法分析
2016/05/23 PHP
php集成动态口令认证
2016/07/21 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python实现用户答题功能
2018/01/17 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
Python如何根据时间序列数据作图
2020/05/12 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
个人工作表现自我评价
2015/03/06 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技