js实现简单抽奖小功能

本文实例为大家分享了js实现简单抽奖小功能的具体代码，供大家参考，具体内容如下

1.场景：

点击按钮开始随机抽取奖品，当停止那刻停留在大屏幕的是抽中的奖品（“谢谢”即为没奖）。

2.思路：

众所周知，抽奖主要讲究的就是随机性，并且是在一堆奖项中抽取。那么可以锁定方向：用数组放奖项名，用Math.random()来返回介于 0(包含) ~ 1(不包含) 之间的一个随机数。只要能随机选中数组的下标，便能随机选中奖项。

话不多说，附上代码：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>

 </head>
 <body>
  <button id="start">开始</button>
  <button id="end">停止</button>
  <h1 id="txt">请开始吧</h1>
  <script>
   var ostart=document.getElementById('start');
   var oend=document.getElementById('end');
   var otxt=document.getElementById('txt');
   var timer;
   var m;
   var list=['手机','pad','pad','购物卡','购物卡','购物卡','音响','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢']
   // 开始
   ostart.onclick=function(){
    timer=setInterval(function(){
     // 产生随机数
     m=parseInt(Math.random()*list.length);
     // 修改html
     otxt.innerHTML=list[m]
     // 修改图片 .setAttribute('src',list[m])

    },1000)
   }
   // 停止
   oend.onclick=function(){

    clearInterval(timer);
    alert('恭喜抽中'+list[m]);
    list.splice(m,1,'谢谢');
   }
  </script>
 </body>
</html>

点击“开始”按钮：

抽奖结果：

定时器的时间自己随便调哦，赶紧试试吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js轮盘抽奖实例分析

    js轮盘抽奖实例分析

    现在学习到了过渡效果了,已经开始有做动画效果的意识了,会实现一些比较炫的小玩意,一个网页加入过渡动画效果,会让人看起来很有美观,不僵硬,有看头,动画是一个网页美观的主要体现之一,下面做个使用个过渡效果实现的抽奖例子. 先来效果图: 这个的实现需要使用到一些js代码. 所需图片: 这张图是pointer.png的位置的. turntable-bg.jpg这张是背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现一下,直接另存这三图片引入进去即可.如果不会请修改

  • js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

    绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g

  • js实现简单随机抽奖的方法

    本文实例讲述了js实现简单随机抽奖的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <script type="text/java

  • JS模拟抽奖序效果实现代码

    JS模拟抽奖效果 .a1{ position:relative; font-family:Verdana; font-size:20px; color:#888888; } function lotto(){ if (!document.all&&!document.layers) return for (j=1; j  "+Nos+""); document.layers.layer1.document.close(); } T=setTimeout('lo

  • js抽奖实现随机抽奖代码效果

    随机抽取,简单代码. 复制代码 代码如下: <html> <title>随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <script type="text/javascript"> var alldata = &q

  • js简单抽奖代码

    核心:js的Math对象和Array对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>random</title> <style> #awardListDom{width: 100%;} </style> </head> <body> <label

  • javascript 随机抽奖程序代码

    随机抽奖程序 请单击开始抽奖 开始抽奖(S) 停止(O) [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 原生JS实现九宫格抽奖效果

    原生JS实现九宫格抽奖效果

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> *{margin:0;padding:0;} #container{w

  • jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    需求: 最多可以抽奖5次,而且,每次只会中"2000元理财金"或者"谢谢参与",其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已拥有<span class="play

  • js实现大转盘抽奖游戏实例

    本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

随机推荐