标签：
快速的从数字1找到25，每日勤加练习，会增强观察力和记忆力。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#ccc {
width: 550px;
height: 550px;
overflow: hidden;
margin: 0 auto;
margin-top: 30px;
}
.item {
float: left;
width: 100px;
height: 100px;
margin: 5px 5px;
background: #ccc;
color: #595757;
text-align: center;
line-height: 100px;
font-size: 30px;
cursor: pointer;
}
.btn {
margin: 0 auto;
display: block;
text-align: center;
height: 40px;
width: 320px;
line-height: 40px;
text-decoration: none;
background: #e50013;
font-size: 16px;
color: #fff;
}
.timer {
text-align: center;
height: 30px;
line-height: 30px;
font-size: 16px;
color: #595757;
}
.mt50 {
margin-top: 50px;;
}
</style>
</head>
<body>
<a href="javascript:void(0)" id="change" class="btn mt50">随机排序并计时开始</a>
<p class="timer" id="timer">用时0s</p>
<a href="javascript:void(0)" id="stop" class="btn">停止计时</a>
<div id="ccc">
</div>
</body>
</html>
<script>
var timers = 0;
window.onload = function () {
addDiv();
gameStart();
}
function gameStart() {
var cA = document.getElementById("change");
var cStop = document.getElementById("stop");
var cDiv = document.getElementById("ccc")
var timeP = document.getElementById("timer");
cA.onclick = function () {
if (!(timeP.className.indexOf("show") > -1)) {
addDiv();
timer();
}
}
cStop.onclick = function () {
if (timers > 0) {
clearInterval(timers);
timeP.className = "timer";
}
}
cDiv.addEventListener("click", function (e) {
e.preventDefault();
e = e || window.event;
var el = e.srcElement || e.target;
el.onclick = function (e) {
e.preventDefault();
if ((timeP.className.indexOf("show") > -1)) {
if (this.innerHTML == "25") {
clearInterval(timers);
timeP.className = "timer";
this.innerHTML = "完毕";
} else {
this.innerHTML = "";
}
}
}
}, true);
}
function addDiv() {
var pDiv = document.getElementById("ccc");
pDiv.innerHTML = "";
//制造混乱数组
var arr = new Array();
for (var index = 1; index <= 25; index++) {
arr.push(index);
}
arr = arr.sort(randomsort);
//添加div
for (var i = 0; i < 25; i++) {
var newDiv = document.createElement("div");
newDiv.className = "item";
newDiv.innerHTML = arr[i];
pDiv.appendChild(newDiv);
}
}
function randomsort(a, b) {
return Math.random() > .5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
}
function timer() {
var min = 1;
var timeP = document.getElementById("timer");
timeP.innerHTML = "用时0s";
timeP.className = "timer show";
timers = setInterval(function () {
if (min > 60) {
clearInterval(timers);
timeP.className = "timer";
return;
}
timeP.innerHTML = "用时" + min + "s";
min++;
}, 1000);
}
</script>
标签：
原文地址：http://www.cnblogs.com/ccc3/p/4218975.html
