<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery版的网页倒计时效果</title>
<style type="text/css">
h1 {
font-family:"微软雅黑";
font-size:40px;
margin:0 auto;
padding-bottom:20px;
letter-spacing:2px;
text-align:center;
width:600px;
}
.time-item{
margin:0 auto;
width:600px;
text-align:center;
}
.time-item strong {
background:#C71C60;
color:#fff;
line-height:49px;
font-size:36px;
font-family:Arial;
padding:0 10px;
margin-right:10px;
border-radius:5px;
box-shadow:1px 1px 3px rgba(0,0,0,0.2);
}
#day_show {
float:left;
line-height:49px;
color:#c71c60;
font-size:32px;
margin:0 10px;
font-family:Arial,Helvetica,sans-serif;
}
.item-title .unit {
background:none;
line-height:49px;
font-size:24px;
padding:0 10px;
float:left;
}
#banner{
height:800px;
width:1920px;
border:solid 1px #333333;
}
.menu{
clear:left;
border:solid 1px #FF0000;
width:200px;
height:800px;
float:left;
}
.menu ul{ margin:0; padding:0px;}
.menu ul li{
list-style-type:none;
margin:50px;
background:#0066CC;
height:100px;
width:100px;
color:#FFFFFF;
line-height:100px;
text-align:center;
font-size:20px;
border-radius:50px;
-moz-border-radius:50px;
}
.menu ul li a{
text-decoration:none;
}
#content{
font-size:160px;
font-weight:bold;
}
.sss{
}
</style>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
var intDiff = parseInt(300);//倒计时总秒数量
function timer(intDiff){
window.setInterval(function(){
var
hour=0,
minute=0,
second=0;//时间默认值
if(intDiff > 0){
day = Math.floor(intDiff / (60 * 60 * 24));
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
if(minute==0&&second==0) alert("你获得了"+btn+"分");
$('#day_show').html(day+"天");
$('#hour_show').html('<s id="h"></s>'+hour+'时');
$('#minute_show').html('<s></s>'+minute+'分');
$('#second_show').html('<s></s>'+second+'秒');
intDiff--;
}, 1000);
}
$(function(){
timer(intDiff);
});
</script>
<script>
var count = 0;
var con;
var btn=0;
function getRandom() {
return Math.floor(Math.random()*20);//范围
}
function getOperator() {
var arr = ['+', '-', '×', '÷'];
return arr[Math.floor(Math.random()*arr.length)];
}
function create() {
con = document.getElementById("content");
var num1 = getRandom();
var num2 = getRandom();
var op = getOperator();
var opTemp = op;
if (op === '×') opTemp = '*';
if (op === '÷') opTemp = '/';
var answer = eval(num1 + (opTemp) + num2);
if(!validate(num1, op, num2)) return;
var str = num1 + " " + op + " " + num2 + " =" + " " + "<input type='text' style='width:200px; height:120px; padding-top:80px; font-size:160px;'/>";
var newNode = document.createElement("div");
newNode.className = "sss";
newNode.setAttribute('data-answer', answer);
newNode.style.width = "160px;";
newNode.innerHTML = str;
con.appendChild(newNode);
count ++;
}
function validate(num1, op, num2) {
if (op === '÷' && num2 === 0) return false;
if (num1%num2 != 0) return false;
if (op === '-' && num1 < num2) return false;
return true;
}
function load() {
while (count < 1) {
create();
}
}
function getAnswer() {
abc=function(){
create();
getOperator();
}
for (var i = 0, c = con.childNodes; i < c.length; i ++) {
if (c[i].className != 'sss') continue;
var input = document.getElementsByTagName('input')[i-1];
var value = input.value;
if (c[i].getAttribute('data-answer') == value) {
alert("答案正确");
paras = document.getElementsByClassName('sss');
for(i=0;i<paras.length;i++){
if (paras[i] != null)
paras[i].parentNode.removeChild( paras[i]);
}
abc();
btn++;
$("#ccc").click(function(){
htmlobj=$.ajax({context:document.body,async:false});
$("load()").html(htmlobj.responseText);
});
} else {
}
}
}
</script>
</head>
<body onLoad="load();">
<h1>游戏时间</h1>
<div class="time-item">
<strong id="minute_show">0分</strong>
<strong id="second_show">0秒</strong>
</div>
<!--倒计时模块-->
<div id="banner">
<div class="menu">
<span>选择难度</span>
<ul>
<li><a href="index.html">10以内</a></li>
<li><a href="2.html"> 20以内</a></li>
<li><a href="3.html">50以内</a></li>
<li><a href="4.html">100以内</a></li>
</ul>
</div>
<div id="content">
</div>
<div>
<button onClick="getAnswer();" id="ccc"style="width:200px; height:160px; font-size:60px;">提交</button>
<button onClick="location = location;" style="width:200px; height:160px; font-size:60px;">重置</button>
</div>
</div>
</body>
</html>
一杯2块的奶茶