这篇文章将为大家详细讲解有关如何使用原生js实现抽奖小游戏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的
1, HTML结构代码如下:
& lt; div 类=皐rapper"比;
,& lt; ul 类=癰ox"祝辞& lt;/ul>
,& lt; button 类=笆痹诳嫉忝? lt;/button>
,& lt; button 类=皊top"在停止& lt;/button>
,& lt; div 类=癱hoose"比;
& lt;才能span 类=皀iu"在幸运的的你& lt;/span>
& lt;才能img src=https://www.yisu.com/zixun/" ~/内容/img1/1.gif "/>
2, css样式设置页面代码如下:
css代码不仅仅是修饰页面的美观度,还可以设置动画,使得更生动
.wrapper {
,,宽度:99%,利润率:,8 px 汽车;
边境才能:1 px solid # ddd; text-align:,中心;
,}
,.box li {
vertical-align才能:最高;
,,显示:inline-block;
,,宽度:100 px;高度:,50 px;
边境才能:2 px solid # ddd;
,,这个特性:15 px; text-align:,中心;
,,行高:50 px;,保证金:,5 px;
,}
,.box li.change {
,,背景颜色:红色;
,,颜色:# fff;粗细:,大胆;
,}
,.wrapper button {
,,显示:inline-block;
,}
,.wrapper button {
边境才能:没有,宽度:,100 px;
,,身高:50 px; border - radius:, 10 px;
,,光标:指针;轮廓:,没有;
,,margin-top: 20 px;粗细:,大胆;
,,颜色:# 333;background:, # eee;
,}
,.wrapper .choose {
位置:,才能相对;
,,宽度:200 px;高度:,180 px;
border - radius才能:10 px;保证金:12 px 汽车;
边境才能:1 px solid # 000;
,}
,.wrapper .choose img {
位置:才能,绝对的,底部:,0;左:,0;
,}
,.niu {
字体大小:24 px;才能,保证金:0 px 0 px;
,}
,. name {
位置:绝对的,才能
字体大小:29 px;才能:43 px;左:71 px;
以前,} 3,原生js取出元素
var boxUl =, document.getElementsByClassName(& # 39;盒# 39;)[0];
var start =, document.getElementsByClassName(& # 39;开始# 39;)[0];//获取点击开始按钮元素
var stop =, document.getElementsByClassName(& # 39;停止# 39;)[0]//获取点击停止按钮元素
var oLi =, document.getElementsByTagName(& # 39;李# 39;);//获取js插入李的标签元素//,将插入名字存入数组
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 =, & # 39; & # 39;;//,通过对循环进行拼接
for (var 小姐:=,0;,小姐:& lt;, arr.length;,我+ +),{
,//利用字符串拼接
+=,str “& lt; li>“, +, arr[我],+,“& lt;/li>“;
}//,将拼接后的html字符串插入到dom结构中
boxUl.innerHTML =, str;//,声明计时器
var timer =,零; 4,开始按钮的原生js代码如下:
//,点击开始进行选择
时间=start.onclick function (), {
,//每次运行前清除计时器
,clearInterval(计时器);
,//设置定时器=,,timer setInterval (function (), {//才能,根据数组长度范围生成随机数
var 才能;小姐:=,Math.floor (math . random (), *, arr.length);//才能,先通过对循环清空所有类名
for 才能;(var j =, 0;, j & lt;, oLi.length;, j + +), {
,,奥利[j] .className =,““
,,}//才能,为随机选择的李设置选中的类名
奥利才能[我].className =,“change";
,},1);
}; 5,停止按钮原生js代码如下:
//,点击停止
时间=stop.onclick function (), {
,//清空定时器
,clearInterval(计时器);
,//找到选中的元素
,var choise =, document.getElementsByClassName(& # 39;改变# 39;)[0];
,//找到选中元素的内容
,var name =, choise.innerText;//大敌;同时为选中位置添加内容
,var nameSpan =, document.getElementsByClassName(& # 39;名字# 39;)[0];=,nameSpan.innerText 名称+“号”;
}
