小程序流程简介_JS完成随机点名器

JS实现随机点名器       这篇文章主要为大家详细介绍了JS实现随机点名器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现随机点名器的具体代码,供大家参考,具体内容如下

实现一个简单的随机点名器

需求分析:

两个按钮实现随机点名的开始和结束
创建ul元素,添加到父级div中,实现了每个名字需要放在一个单独的盒子中
根据随机数进行随机选择,(涉及到了两个函数 setInterval clearInterval)在选择之前,先清空盒子的所有类样式,如果被选中,则重新赋予类样式
当点击停止按钮时,根据上一步拥有重新选择出来的li标签获取标签内容,并且直接可以展示到对应的文本框。

下面开始实现

1.编写html页面

 div id="dv" 
 input type="button" value="开始点名" id="btu" 
 input type="button" value="停止" id="btu1" 
 div 你将会是下一个幸运儿吗?请看大屏幕 /div 
 div 
 span /span 
 /div 
 /div 

2.页面css样式

 margin: 0px;
 padding: 0px;
body{
 background-color: cornsilk;
 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;
 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. unction () {
 //每次运行之前清除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. unction () {
 //清除timer;
 clearInterval(timer);
 //根据类样式找到选中的元素
 var choise = document.getElementsByClassName("change")[0];
 //获取选中元素的内容
 var name=choise.innerText;
 //获取选中展示位置
 var nameSpan = document.getElementsByClassName('name')[0];
 //位置添加内容
 nameSpan.innerText=name+"号";
}

效果图如下:

以上就是所有的代码,不周之处请教之,思想需要碰撞,知识需要交流嘿嘿,再分享一句今日正能量小金句:当前你所遇见的所有困境,都将成为你以后不断上升的阶梯;加油!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读