抽奖.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="title" class="title">开始抽奖啦</div>
<div class="btns">
<span id="play">开始</span>
<span id="stop">结束</span>
</div>
</body>
</html>
 
index.js代码如下：
var data=['iPhone5','IPad','三星笔记本','佳能相机','惠普打印机'],
timer = null,
flag=0;
window.onload = function(){
var play = document.getElementById('play'),
stop = document.getElementById('stop');
//开始抽奖
play.onclick=playFun;
stop.onclick = stopFun;
//键盘事件
document.onkeyup = function(event){
event = event || window.event;
console.log(event.keyCode);
if(event.keyCode==13)
{
if(flag==0){
playFun();
flag=1;
}
else {
stopFun();
flag = 0;
}
}
}
}
function playFun(){
//var that = this;
var title = document.getElementById('title');
var play = document.getElementById('play');
clearInterval(timer);
timer = setInterval(function(){
var random = Math.floor(Math.random()*data.length);
console.log(random);
title.innerHTML = data[random];
},50);
play.style.background ='#999';
}
function stopFun(){
clearInterval(timer);
var play = document.getElementById('play');
play.style.background ='#036';
}

index.css代码如下：

*
{
margin:0;
padding:0;
}
.title {
width:400px;
height:70px;
margin:0 auto;
padding-top:30px;
text-align:center;
font-size:24px;
font-weight:bold;
color:#F00;
}
.btns {
width:190px;
height:30px;
margin:0 auto;
}
.btns span {
display:block;
float:left;
width:80px;
height:27px;
line-height: 27px;
background:#036;
border:1px solid #eee;
border-radius:7px;
margin-right:10px;
color:#FFF;
text-align:center;
font-size:14px;
font-family:"微软雅黑";
cursor:pointer;
}
 
 
 

js实现抽奖的更多相关文章

  1. js轮盘抽奖

    js轮盘抽奖 需求:实现中奖是否可控 思路:通过旋转角度来实现轮盘转动,根据角度来确定是否中奖 window.onload = function(){ var oTurn = document.get ...

  2. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  3. js转盘抽奖

    这个是很简易的转盘,只用了html,css,js 通过css产生一个转盘上的指针,用js动态改变css中的transparent改变指针的角度.再添加一个背景图片类似于奖项的转盘 <!DOCTY ...

  4. js一个抽奖的例子

    朋友公司开年会,帮忙写了个抽奖的demo,源码如下,github中有程序: html: <header> lottery demo </header> <div clas ...

  5. 原生js轮盘抽奖实例分析（幸运大转盘抽奖）

    效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...

  6. Js 转动抽奖实现

    一.样本 地址:http://js.zhuamimi.cn/choujiang/index.htm 源码:https://pan.baidu.com/s/15KhesfcLf1WMOom6PhzCjA ...

  7. js 简单抽奖实现

    大家在很多活动页面上都看到绚丽多彩的抽奖运用,网上也有比较多关于这方面的js和用as.今天我在工作的时候也要做个抽奖的运用.我之前没有写过这类的js,也不会as,就得屁颠屁颠的问度娘啦,虽然找到有js ...

  8. jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo

    需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...

  9. JS数组抽奖程序教学实例

    数组Javascript中非常重要的知识点,为了在课堂上提高学生兴趣,教学举例的选择就比较重要了. 为了提高学生兴趣,特设计一个可输入,可控制结束的,利用JS数组实现的抽奖教学实例.代码如下:

随机推荐

  1. base64图片

    常见的html中或css中图片的src赋值为data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHR ...

  2. java GC是在什么时候，对什么东西，做了什么事情

    面试题:“你能不能谈谈,java GC是在什么时候,对什么东西,做了什么事情?” 面试题目:地球人都知道,Java有个东西叫垃圾收集器,它让创建的对象不需要像c/cpp那样delete.free掉,你 ...

  3. JDK1.7 的 HashMap

    HashMap是一个用于存储key-value的键值对集合,每个键值对都是一个Entry.这些键值对分散存储在一个数组中,这个数组就是HashMap的主干. HashMap每个初始值都为null. 1 ...

  4. leetcode17

    回溯法,深度优先遍历(DFS) public class Solution { int[] x; int N; string DIGITS; Dictionary<char, List<s ...

  5. Rabbitmq(7) confirm 异步模式

    //存储未确认的消息标识tagfinal SortedSet<Long> confirmSet = Collections.synchronizedNavigableSet(new Tre ...

  6. XAMPP与本地Mysql冲突解决方法

    1.更改regeit目录 https://blog.csdn.net/sinat_37633633/article/details/77645463 2.更改配置文件my.ini (1)https:/ ...

  7. 2018SDIBT_国庆个人第七场

    A - Complete the Word(暴力) Description ZS the Coder loves to read the dictionary. He thinks that a wo ...

  8. source tree图谱

    参考: https://www.jianshu.com/p/0e64ad60899e

  9. window、location、location.href、self、top简单介绍

    1.self:当前窗口对象(如果是在iframe里,则为该框架的窗口对象) 2.top:父窗口对象 3.window:典型情况下,浏览器会为每一个打开的html创建对应的window对象,如果这个文档 ...

  10. idea git 整合使用

    1.首先在github网站上新建一个repository 打开https://github.com/ 找到new repository按钮 输入repository name 选择public 记录下 ...