<!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>
添加回答
举报
0/150
提交
取消