原生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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 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 和 MySQL 基础教程(二)
2006/10/09 PHP
Wordpress php 分页代码
2009/10/21 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python程序退出方式小结
2017/12/09 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
基于python监控程序是否关闭
2020/01/14 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
工作个人的自我评价
2014/01/14 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
护理见习报告范文
2014/11/03 职场文书
企业法人任命书
2015/09/21 职场文书
财务人员入职担保书
2015/09/22 职场文书