您的位置：首页 > Web前端 > JavaScript

抽奖

2016-07-30 16:23 211 查看

html部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>doris</title>

<link rel="stylesheet" style="text/css" href="b.css" />

<script type="text/javascript" src="b.js"></script>

</head>

<body>

<div id="title" class="title">开始抽奖啦!</div>

<div class="btns">

<span id="play">开始</span>

<span id="stop">停止</span>

</div>

</body>
</html>

css：

/* CSS Document */

*{

margin:0;

padding:0;

}

.title{

width:400px;

height:70px;

margin:0 auto;

text-align:center;

font-size:24px;

padding-top:25px;

font-weight:bold;

color:#f00;

}

.btns{

width:190px;

height:30px;

margin:0 auto;

}

.btns span{

display:block;

float:left;

width:75px;

height:27px;

background-color:#FF00FF;

line-height:27px;

text-align:center;

margin-right:10px;

border:1px solid #eee;

border-radius:7px;

font-size:14px;

font-family:"微软雅黑";

cursor:pointer;}

JS：

// JavaScript Document

var data=['毛绒玩具','步步高','钢笔','佳能相机','晴雨伞','谢谢参与','30元充值卡','500元超市购物券'],

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;

if(event.keyCode==13){

if(flag==0){

playFun();

flag=1;

}else{

stopFun();

flag=0;

}

}

}

}

function playFun(){
var title=document.getElementById('title');
var play=document.getElementById('play');
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length);
title.innerHTML=data[random];
},50);

play.style.background='#ccc';

}

function stopFun(){
clearInterval(timer);
var play=document.getElementById('play');
play.style.background='#FF00FF';

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css JS

相关文章推荐

新的分享

章节导航