JS实现随机点名器

实现一个简单的随机点名器
需求分析：

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

下面开始实现

1. 编写html页面

"dv">
    "button" value="开始点名" id="btu">
    "button" value="停止" id="btu1">
    
"luc">你将会是下一个幸运儿吗？请看大屏幕
    
"ch">
        "name">
    

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+"号";
}

效果图如下：

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