目录结构
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<link rel="stylesheet" type="text/css" href="css/choujiang.css">
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/choujiang.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="title">随机抽奖</div>
<div id="maincontent"></div>
<div id="btn" class="btn_start" οnclick="qidong()">开始</div>
</body>
</html>
choujiang.less
body{
text-align: center;
}
#title{
text-align: center;
font-size: 40px;
font-weight: 400;
font-family: 微软雅黑;
margin-bottom: 20px;
}
#maincontent{
table{
margin: 0 auto;
}
td{
font-family: arial,宋体,微软雅黑;
font-size: 20px;
font-weight: 400;
text-align: center;
padding: 20px 40px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
}
.btn{
text-align: center;
font-size: 20px;
font-weight: 500;
font-family: arial,微软雅黑;
margin: 20px auto;
width: 100px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid transparent;
background-color: green;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.btn_start{
.btn();
}
.btn_stop{
.btn();
background-color: red;
}
choujiang.js
$(document).ready(function (){
//绘制表格
(function (){
var str = '<table cellspacing="0" cellpadding="0" border="1"><tr>';
for (var i = 0; i < 25; i++) {
str += '<td>'+(i+1)+'</td>';
if ((i+1)%5 == 0){
str += '</tr><tr>';
}
};
str += '</tr></table>';
$('#maincontent').append(str);
})()
});
//开始点击事件
function qidong(){
changeBtnStyle();
changeBtnContent();
suiji();
}
//改变按钮样式
function changeBtnStyle(){
if ($('#btn').attr('class') == 'btn_start'){
$('.btn_start').removeClass('btn_start').addClass('btn_stop');
}else{
$('.btn_stop').removeClass('btn_stop').addClass('btn_start');
}
}
//改变按钮内容
function changeBtnContent(){
$('#btn').text() == '开始' ? $('#btn').text('停止') : $('#btn').text('开始');
}
//产生随机数
function suiji(){
var interval = setInterval(function (){
if ($('#btn').text() == '开始'){
clearInterval(interval);
}
var temp = parseInt(Math.random()*25);
$('table td').css('backgroundColor', 'transparent');
$('table td:eq('+temp+')').css('backgroundColor', 'yellow');
},100);
}
实现效果: