原生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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
react中Suspense的使用详解
Sep 01 Javascript
vuex实现购物车功能
Jun 28 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 源代码压缩小工具
2009/12/22 PHP
php开发环境配置记录
2011/01/14 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php导入模块文件分享
2015/03/17 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
Python实现识别手写数字大纲
2018/01/29 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
Python如何实现爬取B站视频
2020/05/20 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
四风问题查摆剖析材料
2014/10/11 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
Android实现图片九宫格
2022/06/28 Java/Android