舒尔特表-计时开始-暂停-继续 js
严永丰
之前写的舒尔特表，只有开始，没有结束。最近一直在调试，还是不太理想，但还是出一版备份一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>舒尔特表</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<link rel="stylesheet" type="text/css" href="../css/css3.css" charset="utf-8">
<script src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript">
//页面加载执行
$(document).ready(function (){
$("#m_mask").show();//显示遮罩层
//点击确定，隐藏遮罩层。
closebt.onclick=function(){
$("#m_mask").hide();
$("#i_show").show();
}
//二维数组
function getDiffGroup(num, min, max) {
var res = [];
for (var i = min; i <= max; i++){ //从最小数开始 加一 到最大数
res.push(i);//将所有的数 push到数组中
}
res.sort(function () {
return 0.5 - Math.random(); //随机数排序
});
var rst = [];
for (var i = 0; i < res.length; i += num){
rst.push(res.slice(i, i + num));//数组中放入截取后的数组
}
return rst;
}
var rst = getDiffGroup(5, 1, 25);//5*5二维数组
console.log(rst.join('\n'));
//将二维数组放入页面
//var div = document.getElementById('div1');
//拼接table
var str ="<table border='1' width='350' height='350' cellspacing='0' cellpadding='0' >";
// 循环遍历二维数组
for(var i = 0;i<rst.length;i++){//循环最外面的数组
str+="<tr>";
for(var j = 0;j<rst[i].length;j++){//循环里面的数组
str+= "<td align='center'>"+rst[i][j]+"</td>";//拼接<td>
}
str+="</tr>";
}
str+="</table>";
//将table添加到div中
//div.innerHTML = str;
$("#shulte").append(str);
});
//拼接时间
var intervalId;
var i = 0;
var count = 0;
function startTime() {
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var ms = document.getElementById("ms");
var buttonEle = document.getElementById("start");
if(i % 2 == 0) {
buttonEle.innerHTML = "暂停计时";
intervalId = setInterval(function() {
count += 1;
var thehour = parseInt(count / 360000);
var theminute = parseInt(count / 6000 % 60);
var thesecond = parseInt(count / 100 % 60);
var thems = parseInt(count % 100);
if(thehour >= 10) {
hour.innerHTML = thehour + " ";
} else {
hour.innerHTML = "0" + thehour + " ";
}
if(theminute >= 10) {
minute.innerHTML = theminute + " ";
} else {
minute.innerHTML = "0" + theminute + " ";
}
if(thesecond >= 10) {
second.innerHTML = thesecond + " ";
} else {
second.innerHTML = "0" + thesecond + " ";
}
if(thems >= 10) {
ms.innerHTML = thems + " ";
} else {
ms.innerHTML = "0" + thems + " ";
}
}, 10)
} else {
buttonEle.innerHTML = "计时继续";
clearInterval(intervalId);
}
i++;
}
</script>
</head>
<body>
<div align="left" >
<a href="javascript:;" onClick="javascript:history.back(-1);">
<img height="50" width="50" src="../img/tubiao/1.png" border="0" title="返回上一页" >
</a>
</div>
<!--遮罩层显示-->
<div id="m_mask" align="center" style="top:0%; left:0%; padding:16px; border:3px solid orange; background-color:wheat;position:absolute;z-index:1002; overflow:auto; max-width: 100%;height:100%;display: block;">
<div style="font-size: 30px;flood-color: black;word-wrap:break-word;word-break:break-all;overflow:hidden">
<p style="font-size: 35px;flood-color: red;" align="center">使用说明： </p>
<br />
<p >1：舒尔特表格：此表格是一个5*5的表格，请依次将1-25个数字排序找出。使用时间最少即右脑开发越多。</p>
<p>2：每天任务：每天练习1到5次。</p>
<a href="javascript:void(0)" id="closebt" style="flood-color: blue;" >确定 </a>
</div>
</div>
<div id="i_show" style="display: none;">
<!--表格显示 -->
<div style="max-width: 100%;height:350px;display: block;background-size: contain;">
<div class="slide" id="shulte" align="center">
</div>
</div>
<div style="height: 50px;"></div>
<!--时间显示 -->
<div id="firstDiv">
<div id="twoDiv" align="center">
<span><span id="hour">00 </span>时</span>
<span><span id="minute">00 </span>分</span>
<span><span id="second">00 </span>秒</span>
<span><span id="ms">00 </span>毫秒</span>
<button id="start" onclick="startTime()" style="font-size: 20px;">开始计时</button>
</div>
</div>
</body>
</html>
类似资料：