抽奖.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. gradle-4.1-all.zip离线包下载 极速 android studio2.3 3.0编译必备

    http://download.csdn.net/download/yongheng289/10039982 gradle-4.1-all.zip离线包下载 极速 android studio2.3 ...

  2. 定位JVM内存溢出问题思路总结

    JVM的内存溢出问题,是个常见而有时候有非常难以定位的问题.定位内存溢出问题常见方法有很多,但是其实很多情况下可供你选择的有效手段非常有限.很多方法在一些实际场景下没有实用价值.这里总结下我的一些定位 ...

  3. jquery.cookie用法及其注意点

    jquery.cookie是一个轻量级的cookie插件,由于已被封装好,可拿来即用. 基本的创建.读取.删除见另一篇文章 浅谈localStorage.sessionStorage 与cookie  ...

  4. typedef typename

    所以根据上述两条分析,  typedef typename RefBase::weakref_type weakref_type; 语句的真是面目是: typedef创建了存在类型的别名,而typen ...

  5. Jenkin配置执行远程shell命令

    转载自 http://www.cnblogs.com/parryyang/p/6261730.html 在利用jenkins进行集成化部署的时候,我们在部署生成的war包时,往往需要进行一些备份,或者 ...

  6. 转 - spring security oauth2 password授权模式

    原贴地址: https://segmentfault.com/a/1190000012260914#articleHeader6 序 前面的一篇文章讲了spring security oauth2的c ...

  7. JVM参数类型

    java -version看版本号(混合模式) java -Xint -version  解释执行 java -Xcomp -version 编译执行 XX参数是不稳定的用来JVM调优和DeBug B ...

  8. 100-days: ten

    Title: Emma Watson(艾玛·沃森), Keira Knightley(凯拉·奈特莉) among stars(众多明星之一)  urging(竭力主张,呼吁某事) better pro ...

  9. [剑指Offer]36-二叉搜索树与双向链表

    链接 https://www.nowcoder.com/practice/947f6eb80d944a84850b0538bf0ec3a5?tpId=13&tqId=11179&tPa ...

  10. c#: 简单的日志管理类(TextWriterTraceListener)

    以c#实现轻量级的日志管理,着实简单,置一静态类记之: /// <summary> /// 日志管理 /// </summary> public static class Lo ...