这个小游戏可以设置为抽奖小游戏，也可以设置为随机点名器，这个软件实现可以多次获取同一个元素的

1、超文本标记语言结构代码如下：

div class=' wrapper ' ul class=' box '/ul button class=' start '开始点名/button button class='stop '停止/button div class=' choose ' span class=' Niu '幸运的的你/span img src=' http : ~/Content/img 1/1。gif '/span class=' name '/span/div/div 2、css样式设置页面代码如下：

钢性铸铁代码不仅仅是修饰页面的美观度，还可以设置动画，使得更生动。包装材料{宽度： 99%;margin: 8px汽车；border: 1px固体# ddd文本对齐：中心；} .方框li {垂直对齐：顶部；显示器：内联块；宽度： 100像素；高度： 50pxborder: 2px实心# dddb order-radius : 15px；文本对齐：中心；线高： 50pxmargin: 5px}。李。更改{底色：红色；color: # fff字体粗细：更粗；} .包装按钮{ display : inline-block；} .包装按钮{ border:无宽度： 100像素；高度： 50px边框半径： 10px光标：指针；大纲：无；边距-top : 20px；字体粗细：更粗；颜色： # 333背景色： # eee} .包装纸。选择{相对位置：宽度： 200像素；高度： 180像素；边界半径：10像素；margin:12px汽车；border: 1px固体# 000;} .包装纸。选择img { position : absolutebotom : 0；左： 0；} .牛{ font-size :24 pxmargin:0px 0px}。name { position : absolutefont-size :29 px；top:43pxleft:71px}3、原生射流研究…取出元素

var Boxul=文档。GetElementsByclassName(' box ')[0]；var start=文档。getelementsbyclassname(' start ')[0]；//获取点击开始按钮元素var stop=文档。getelementsbyclassname(' stop ')[0]//获取点击停止按钮元素var OLi=文档。getelementsbytagname(' Li ')；//获取射流研究…插入的里标签元素//将插入名字存入数组var arr=['01 '，' 02 '，' 03 '，' 04 '，' 05 '，' 06 '，' 07 '，' 08 '，' 09 '，' 10 '，' 11 '，' 12 '，' 13 '，' 14 '，' 15 '，' 16 '，' 17 '，' 18 '，' 19 '，' 20']//html进行字符串拼接var str=//通过为循环进行拼接for(var I=0；一、长度；i ) { //利用字符串拼接str=' Li ' arr[I]'/Li；}//将拼接后的超文本标记语言字符串插入到数字正射影像图结构中boxUl.innerHTML=str//声明计时器定时器=null4，开始按钮的原生射流研究…代码如下：

//点击开始进行选择start.onclick=function () { //每次运行前清除定时器clearInterval(定时器);//设置定时器定时器=设置间隔(函数(){ //根据数组长度范围生成随机数var I=数学。地板(数学。random()* arr。长度)；//先通过为循环清空所有班级名for(var j=0；j . OLi . length j){ OLi[j].className=} //为随机选择的里设置选中的班级名奥利[一].className=' change}，1)；};5、停止按钮原生射流研究…代码如下：

//点击停止stop.onclick=function () { //清空定时器clearInterval(计时器);//找到选中的元素var choise=文档。getelementsbyclassname(' change ')[0]；//找到选中元素的内容var name=choise.innerText//同时为选中位置添加内容var NameSpan=文档。GetElementsByclassName(' name ')[0]；' nameSpan.innerText=name '号；}6、效果图

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