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字典探测用户名工具
Oct 05 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 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
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
鼠标图片振动代码
2006/07/06 Javascript
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python3常见函数range()用法详解
2019/12/30 Python
入党申请书自我鉴定
2013/10/12 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL