HTML5-右脑开发项目-基础训练-舒尔特表训练shulte-table.html

樱花梦_张艺馨 2019-03-13

展开全文

舒尔特表训练shulte-table.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd">

<html>

<head>

</head>

//定义数组的截至数字

var number = 25;//数组25个数字

var array=new Array(number);//数组定义

var count = 0;//时间秒数记录

//页面加载执行

$(document).ready(function (){

$("#m_mask").show();//显示遮罩层

//点击确定，隐藏遮罩层。

closebt.onclick=function(){

$("#m_mask").hide();

$("#i_show").show();

}

showDiffGroup(5, 1, number);

});

//二维数组

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;

}

//调用二维数组，拼接到页面

function showDiffGroup(num, min, max){

var rsts = getDiffGroup(5, 1, max);//5*5二维数组

array = rsts;

console.log(rsts.join('\n'));

//将二维数组放入页面

//var div = document.getElementById('div1');

//拼接table

var str ="<table border='1' width='350' height='350' cellspacing='0' cellpadding='0' bgcolor='#FFA500'>";

// 循环遍历二维数组

for(var i = 0;i<rsts.length;i++){//循环最外面的数组

str+="<tr>";

for(var j = 0;j<rsts[i].length;j++){//循环里面的数组

str+= "<td align='center' id='td"+i+j+"' name='"+(i+''+j)+"' onClick = 'td_click("+(i+''+j)+")' value='"+rsts[i][j]+"'>"+rsts[i][j]+"</td>";//拼接<td>

}

str+="</tr>";

}

str+="</table>";

//将table添加到div中

//div.innerHTML = str;

$("#shulte").append(str);

}

//在二维数组中查找数字 - 二维数组的下标

function findNumber(target, array){

//循环遍历查找下标

for(var i=0;i<array.length;i++){

for(var j=0;j<array[0].length;j++){

if(array[i][j] == target){

return i+""+j;//查找到后返回下标

}

return 0;//没查找到返回0

}

//表格点击事件

function td_click(td_flag){

//点击表格时，判断是否已经点击计时按钮，若未点击，自动计时

var i = $("#button_count").val();

if(i<0){//未点击

startTime();//自动计时

}

var flag = 0;//数组下标

//循环遍历，查找数组的下标

for(var i=1;i<=number;i++){

var flag =findNumber(i,array);//数字从1-25开始查找。

if(td_flag == flag){

break;

}

//获取点击数字的值。

var td_val =$("#td"+flag).text();

//获取点击次数

var num=$("#shulte_text").val();

//判断点击次数是否比显示的个数少。

if(num<=number){

//判断点击的数字为点击的次数，则正常排序，否则，排序错误，提示。

if(td_val == num){

num++;

if(num>number){//点击数字完毕,触发暂停事件

$("#button_count").attr("value",1);//页面数字是基数

startTime();//暂停时间

//显示使用的时间

var hour = $("#hour").text();

var minute = $("#minute").text();

var second = $("#second").text();

var ms = $("#ms").text();

alert("您用时："+hour+"时"+minute+"分"+second+"秒"+ms+"毫秒");

$("#hour").html("00");

$("#minute").html("00");

$("#second").html("00");

$("#ms").html("00");

$("#start").html("开始计时");

count=0;//将时间秒数重新设置为0

$("#shulte_text").attr("value",1);//点击次数设置为1

$("#button_count").attr("value",-1);//计时时间设置为偶数

$("#shulte").empty(); //将舒尔特表的div清空

showDiffGroup(5, 1, number);//重新生成5*5舒尔特表

}else{//1-25 点击次数赋值

$("#shulte_text").attr("value",num);//推荐这种写法,可正常赋值

}

}else{

alert("请点击："+num);

}

//拼接时间

var intervalId;

function startTime() {

var i = $("#button_count").val();

if(i<0){

i = 0;

}

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");

console.log(count);

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);

}

$("#button_count").attr("value",++i);//页面数字自加1

}

</script>

<body>

</div>

<br />

<p >1：舒尔特表格：此表格是一个5*5的表格，请依次将1-25个数字排序找出。使用时间最少即右脑开发越多。</p>

</div>

点击计时按钮后依次点击1-25

</p>

</div>

</div>

</div>

</body>

</html>

本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。

转藏分享

QQ空间 QQ好友新浪微博微信

献花（0） +1

来自：樱花梦_张艺馨 > 《Html5-小程序》

举报/认领

0条评论

发表

请遵守用户评论公约

类似文章 更多

樱花梦_张艺馨

关注对话

TA的最新馆藏

日语单词快速记忆-日期
奇门遁甲自学-传统起局步骤
《小狗钱钱》
通用脱敏工具类
Json工具类
Cookie工具类

喜欢该文的人也喜欢更多

热门阅读换一换