原生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 相关文章推荐
判断浏览器的javascript版本的代码
Sep 03 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 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下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Python装饰器用法示例小结
2018/02/11 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
python中时间模块的基本使用教程
2019/05/14 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
学习自我鉴定
2014/02/01 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
农村葬礼主持词
2014/03/31 职场文书
关于环保的活动方案
2014/08/25 职场文书
文明单位汇报材料
2014/12/24 职场文书
团代会开幕词
2015/01/28 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
高中运动会前导词
2015/07/20 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
PyTorch的Debug指南
2021/05/07 Python
PyTorch device与cuda.device用法
2022/04/03 Python