原生js实现抽奖小游戏


Posted in Javascript onJune 27, 2019

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

1、HTML结构代码如下:

<div class="wrapper">
 <ul class="box"></ul>
 <button class="start">开始点名</button>
 <button class="stop">停止</button>
 <div class="choose">
  <span class="niu">幸运的的你</span>
  <img src="~/Content/img1/1.gif" />   
  <span class="name"></span>
 </div>
</div>

2、css样式设置页面代码如下:

css代码不仅仅是修饰页面的美观度,还可以设置动画,使得更生动

.wrapper {
  width: 99%;margin: 8px auto;
  border: 1px solid #ddd;text-align: center;
 }
 .box li {
  vertical-align: top;
  display: inline-block;
  width: 100px;height: 50px;
  border: 2px solid #ddd;
  border-radius: 15px;text-align: center;
  line-height: 50px; margin: 5px;
 }
 .box li.change {
  background-color: red;
  color: #fff;font-weight: bolder;
 }
 .wrapper button {
  display: inline-block;
 }
 .wrapper button {
  border: none;width: 100px;
  height: 50px;border-radius: 10px;
  cursor: pointer;outline: none;
  margin-top: 20px;font-weight: bolder;
  color: #333;background-color: #eee;
 }
 .wrapper .choose {
  position: relative;
  width: 200px;height: 180px;
  border-radius:10px;margin:12px auto;
  border: 1px solid #000;
 }
 .wrapper .choose img {
  position: absolute;bottom: 0;left: 0;
 }
 .niu{
  font-size:24px; margin:0px 0px;
 }
 .name{
  position:absolute;
  font-size:29px;top:43px;left:71px;
 }

3、原生js取出元素

var boxUl = document.getElementsByClassName('box')[0];
var start = document.getElementsByClassName('start')[0];//获取点击开始按钮元素
var stop = document.getElementsByClassName('stop')[0]//获取点击停止按钮元素
var oLi = document.getElementsByTagName('li');//获取js插入的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循环进行拼接
for (var i = 0; i < arr.length; i++) {
 // 利用字符串拼接
 str += "<li>" + arr[i] + "</li>";
}
// 将拼接后的html字符串插入到dom结构中
boxUl.innerHTML = str;
// 声明timer
var timer = null;

4、开始按钮的原生js代码如下:

// 点击开始进行选择
start.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].className = "";
  }
  // 为随机选择的li设置选中的class名
  oLi[i].className = "change";
 }, 1);
};

5、停止按钮原生js代码如下:

// 点击停止
stop.onclick = function () {
 // 清空定时器
 clearInterval(timer);
 // 找到选中的元素
 var choise = document.getElementsByClassName('change')[0];
 // 找到选中元素的内容
 var name = choise.innerText;
 // 同时为选中位置添加内容
 var nameSpan = document.getElementsByClassName('name')[0];
 nameSpan.innerText = name+"号";
}

6、效果图

原生js实现抽奖小游戏

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

Javascript 相关文章推荐
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
JavaScript实现图片放大镜效果
Jun 27 #Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 #Javascript
微信小程序自定义组件实现环形进度条
Nov 17 #Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 #Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 #Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 #Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 #Javascript
You might like
PHP常用代码
2006/11/23 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php封装一个异常的处理类
2017/06/08 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
javascript 打印页面代码
2009/03/24 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
Python内置函数dir详解
2015/04/14 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
基于Python的关键字监控及告警
2017/07/06 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
python判断变量是否为列表的方法
2020/09/17 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
高一学生评语大全
2014/04/25 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
学校食堂标语
2014/10/06 职场文书
学生个人总结范文
2015/02/15 职场文书
感恩主题班会教案
2015/08/12 职场文书
该怎么书写道歉信?
2019/07/03 职场文书