抽奖.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. mysql 多个字段合并

    group_concat 函数默认“,”合并 select p.id as patent_id,p.application_no,p.name,p.inventer,group_concat(pi.` ...

  2. 实战ELK（7）ElasticSearch常用的基本查询语句

    1.term 过滤 term主要用于精确匹配哪些值,比如数字,日期,布尔值或 not_analyzed 的字符串(未经切词的文本数据类型): { "term": { "d ...

  3. 【函数】isinstance内建函数（小窗help）

    #学到了第八天,还有很多没有理解,不过,没关系,相信任何复杂的问题都是由简单的组成,只有将每一个细节理解到位,自然问题迎刃而解 今天遇到了isinstace函数,忘了,先看一下语法 查百度附上链接:h ...

  4. !!!常用JS代码块 （jquery）

    jquery代码块 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> ...

  5. java.lang.NoClassDefFoundError: org/apache/tomcat/util/res/StringManager

    一个比较老的web项目,  IDEA 导入后不能用,  出现了各种问题, 但是, 别人用eclipse 导入就不会有问题,  我折腾了半天, 还是各种问题,  真是郁闷了.  哎, 承认很难配置吧, ...

  6. ElasicSearch(3) 安装elasticsearch-head

    https://github.com/mobz/elasticsearch-head 1.git install git 2.git clone git://github.com/mobz/elast ...

  7. Shell脚本处理JSON数据工具jq

    shell脚本如何方便地处理JSON格式的数据呢,这里介绍一个工具:jq 使用参数介绍:https://stedolan.github.io/jq/manual/ 官方教程简单翻译如下. 1.获取JS ...

  8. PHP Laravel定时任务Schedule

    前提:本文方法是利用Linux的crontab定时任务来协助实现Laravel调度(Mac也一样). 一.首先添加Crontab定时任务,这里只做简单介绍. 用命令crontab -e 添加如下内容 ...

  9. 10.13 新版本go on~

    上午1.5 终审 and 排期 合同管理那边又是切换选项时各种联动,我第一想法是 好麻烦,不想做这个...第二想法才是给我做吧 锻炼锻炼我 然后 分任务的时候 分给我了,,哈哈 开心 虽然我没想躲 但 ...

  10. 763. Partition Labels 相同字母出现在同一块中，且块数最多

    ［抄题］: A string S of lowercase letters is given. We want to partition this string into as many parts ...