抽奖.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. Twisted网络库编程实例

    于这一周看了python的第三方网络库Twisted,英文看的头比较大,想看英文的话点击这里.如果英文很烂,可以看中文,这里.总的来说我了解到的主要包括以下三个东东:Factory.protocol和 ...

  2. Spring线程池的5个要素

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE beans PUBLIC "-// ...

  3. 来自Github的优秀源码(python操作iframe框架网页)

    #Please use your username and password for academia in codeimport timefrom selenium import webdriver ...

  4. 微信调用itchat库 实现发消息

    import itchat,timefrom itchat.content import * itchat.auto_login(enableCmdQR=-1)while True: for i in ...

  5. leetcode22

    public class Solution { public IList<string> GenerateParenthesis(int n) { List<string> l ...

  6. saltstack的封装和内网使用

    0.客户端使用 linux:把linux的ragent文件夹拷贝到内网linux /opt目录下,运行初始化脚本 salt服务端:# @Master:"/opt/ragent/python/ ...

  7. Delphi RTTI的应用（一）

    1.获取DbgrdiEH 某一个选项的属性.加载到ComBox procedure TForm1.FormCreate(Sender: TObject); var PropInfo: PPropInf ...

  8. 获取cxgrid footer内容

    cxGridDBTableView1.DataController.Summary.FooterSummaryValues[4];

  9. LevelDB源码分析-Get

    Get LevelDB提供了Get接口用于给定key的查找: Status DBImpl::Get(const ReadOptions &options, const Slice &k ...

  10. SpringBoot +Jpa+ Hibernate+Mysql工程

    1 使用工具workspace-sts 3.9.5.RELEASE (1)新建一个SpringBoot 项目,选择加载项目需要的的组件.DevTools,JPA,Web,Mysql. Finish.  ...