抽奖.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. Jvm的体系结构

    1.垃圾回收器 垃圾回收器(又称为gc):是负责回收内存中无用的对象(好像地球人都知道),就是这些对象没有任何引用了,它就会被视为:垃圾,也就被干掉了. 2.类装载子系统 一听名字,大家就知道,肯定是 ...

  2. git上传文件到coding

    一.上传文件到coding:1.远程连接coding,下载远程仓库到本地git clone https://git.coding.net/wanghao_1/besttest_syz.git 2.cd ...

  3. 阿里云视频直播PHP-SDK

    阿里云 视频直播 配置 及 PHP-SDK 接入教程准备工作域名管理配置鉴权地址生成器及DEMO演示-熟悉鉴权接入SDK推流回调的配置阿里云 视频直播 配置 及 PHP-SDK 接入教程 个人感觉,阿 ...

  4. sublime3支持es6语法和vue彩色显示

    支持ES6语法设置: 首先安装nodejs 当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中 (一般安 ...

  5. 35.Spring-jdbc支持.md

    目录 1.JdbcTemplate类 1.1导入jar包 1.2创建Dao对象 1.3将上述例子封装后 2. 3. 1.JdbcTemplate类 传统的jdbc开始,需要对Connection.St ...

  6. <Dare To Dream 团队>第一次作业：团队亮相

    队名:Dare To Dream 2.团队成员组成:学号/姓名(标记团队组长): 201571030333/绽玉林(组长) 201571030132/姚慧霞 201571030308/李金平    2 ...

  7. [Ting's笔记Day1] Ruby on Rails练习- MacOS安装篇

    千里之行,始于足下.喊了要学Ruby on Rails好久,今天终于要来迈向第一步:安装了! 一开始学习新的事物,主要就是跟着这个网页所说的步骤step by step. 很喜欢这个网页的设计流程,透 ...

  8. js----作用域链

    作用域链是javascript的一个难点,要了解它就要了解作用域.变量.执行环境.生命周期等. 下面是找的资料加总结,加深理解. 作用域 变量的作用域可分为 A:全局作用域----最外层函数定义的变量 ...

  9. (vue.js)element ui 表单重置

    el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...

  10. 算法练习LeetCode初级算法之链表

    删除链表中的节点 /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode ne ...