jQuery实现随机抽奖

最新推荐文章于 2022-07-08 11:53:38 发布

zhuzongzhi856

最新推荐文章于 2022-07-08 11:53:38 发布

阅读量1.6k

点赞数 2

本文链接：https://blog.csdn.net/zhuzongzhi856/article/details/73484948

版权

目录结构

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);
	
}

实现效果：

zhuzongzhi856

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现随机抽奖

目录结构index.html 抽奖随机抽奖开始choujiang.lessbody{ text-align: center;}#title{ text-align: center; font-size: 40px; font-weight: 400; font-family: 微软雅黑; margin-bottom: 20p
复制链接

扫一扫