jquery实现数字抽奖（版本2）

最新推荐文章于 2024-05-08 15:32:14 发布

听海Movie

最新推荐文章于 2024-05-08 15:32:14 发布

阅读量1.1k

点赞数

分类专栏： jQuery js应用

本文链接：https://blog.csdn.net/u011781769/article/details/50202335

版权

【HTML+Jquery代码】现场抽奖 body{ background:#CF0101; color:#FFF; text-align:center; }table{ margin: 12px auto; border-collapse: collapse; width: 95%; background: #fff;}th, td{

摘要由CSDN通过智能技术生成

【HTML+Jquery代码】

<span style="font-size:14px;"><!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=utf-8"/>
	<title>现场抽奖</title>
	<link rel="stylesheet" type="text/css" href="jquery-ui-1.7.2.custom.css" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>


<style type="text/css">
body{
	background:#CF0101;
	color:#FFF;
	text-align:center;
	}

table{
	margin: 12px auto;
	border-collapse: collapse;
	width: 95%;
	background: #fff;
}

th, td{
	border: 2px solid #333;
}

label{
	margin: 6px 0;
	font-size: 14px;
	font-weight: bold;
	display: block;
}

input[type=text]{
	width:95%;
}
input{
	width: expression(this.type=="text"?"600px":"auto");
}   
textarea{
	width:95%;
}

#main{
	color: #000;
	margin: 0 auto;
	padding-top: 40px;;
	width:600px;
}

#event_title{
	margin: 26px;
	padding: 0;
	font-size: 56px;
	text-align: center;
}
#event_title span{
	padding: 0 32px;
}

#rolling_board{
	color: #000;
	line-height: 40px;
	font-size: 40px;
	font-weight: bold;
	margin: 34px auto;
	padding: 8px;
	text-align: center;
	background: #ff3;
	border: 6px solid #03f;
}

#current_step{
	line-height: 42px;
	font-size: 42px;
	font-weight: bold;
}

#tabs{
	padding: 0;
}



#tabs-2,
#tabs-3,
#tabs-4{
	border: 1px solid #ccc;
	background-color:#FFF;
	font-size:1.5em;
	padding:1em 2em 2em;
}

#tabs-3 h3,
#tabs-4 h3{
	padding-left: 6px;
	border-left: 6px solid #c00;
}
#tabs-3 h2{
	color:red
}

#rotate_div{
	padding-top: 60px;
	height: 400px;
}

#print_box{
	margin-top: 30px;
	font-weight: bold;
	font-size: 28px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#print_box span{
	margin: 4px;
	color: #fff;
	background: #36f;
}
</style>

</head>
<body>

<script type="text/javascript">
<!--
var game;


$(function(){
	$('#loading').hide();
	$('#tabs').slideDown('fast');
	$('#tabs').tabs();

	game = new Game();
	save_setting();
});

// 绑定回车键盘操作
$(document).keypress(function (e){
	switch(e.which){
		case 13:
			game.process();
			break;
		case 32:
			game.process();
			break;
	}
});

//-->
</script>


<div id="main">



<div id="loading" style="text-align: center;">
	<h2>Loading...</h2>
	<p><p>
</div> 




<div id="tabs">
<div id="tabs-1" style="background: #fff;border-radius: 10px;">
	<h1 id="event_title"><span>抽奖软件</span></h1>

	<div id="rotate_div">
		<div><span id="current_step"></span></div>

		<div id="rolling_board">...</div>
		
		<div id="print_box

最低0.47元/天解锁文章

听海Movie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现数字抽奖（版本2）

【HTML+Jquery代码】现场抽奖 body{ background:#CF0101; color:#FFF; text-align:center; }table{ margin: 12px auto; border-collapse: collapse; width: 95%; background: #fff;}th, td{
复制链接

扫一扫