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的单例模式 (singleton in Javascript)
Jun 11 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
微信小程序实现抖音播放效果的实例代码
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中的实现trim函数代码
2007/03/19 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
JSON格式化输出
2014/11/10 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
园林资料员岗位职责
2013/12/30 职场文书
《搭石》教学反思
2014/04/07 职场文书
初中学生期末评语
2014/04/24 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
教师考核表个人总结
2015/02/12 职场文书
退税申请报告怎么写
2015/05/18 职场文书
同意转租证明
2015/06/24 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript