舒尔特表-最终版 js
大家好:
舒尔特表,又修复了几个bug,终于成为理想的效果,备份一下!
<!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"></head>
<script src="../js/jquery-1.7.2.js"></script><script type="text/javascript">//定义数组的截至数字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');//拼接tablevar 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 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="height: 50px;border-radius:100px;font-size:1rem;"><p align="center" style="color:red;font-weight:bold;font-size:26px">点击计时按钮后依次点击1-25</p></div><!--表格显示 --><div style="max-width: 100%;height:350px;display: block;background-size: contain;"><input id="shulte_text" type="hidden" value="1" /><div class="slide" id="shulte" align="center"></div></div> <div style="height: 50px;"></div><!--时间显示 --><div id="firstDiv"><div id="twoDiv" align="center" ><span style="font-size: 20px;"><span id="hour">00 </span>时</span><span style="font-size: 20px;"><span id="minute">00 </span>分</span><span style="font-size: 20px;"><span id="second">00 </span>秒</span><span style="font-size: 20px;"><span id="ms">00 </span>毫秒</span><button id="start" onclick="startTime()" style="font-size: 20px;">开始计时</button><input id="button_count" type="hidden" value="-1" /></div></div></body>
</html>
舒尔特表-最终版 js相关推荐
- 下载基于LigerUI+JBPM5自定义表单+Node.js的J2EE大型金融项目《财务预算系统》
基于LigerUI+JBPM5自定义表单+Node.js的J2EE大型金融项目<财务预算系统>开发全程实录 地址:http://pan.baidu.com/s/1c3zLGZ2 密码:e7 ...
- 计算机科学科技创新作品怎么做,第五届科技创新小发明策划书 最终版.doc
第五届科技创新小发明策划书 最终版 第五届科技创新小发明策划书 最终版 第五届 科技创新小发明大赛 策 划 书 主办单位:计算机科学与信息工程学院 承办单位: 计信学院分团委?学生会办公室 一.活动背 ...
- multism中ui和uo应该怎么表示_Multisim在模拟与数字电子技术中的应用(最终版)最新版...
<Multisim在模拟与数字电子技术中的应用.doc>由会员分享,可免费在线阅读全文,更多与<Multisim在模拟与数字电子技术中的应用(最终版)>相关文档资源请在帮帮文库 ...
- sepic电路MATLAB,Sepic电路建模、仿真设计(最终版)
<Sepic电路建模.仿真设计.doc>由会员分享,可免费在线阅读全文,更多与<Sepic电路建模.仿真设计(最终版)>相关文档资源请在帮帮文库(www.woc88.com)数 ...
- 版本 3.1(最终版)
1 Java™ Servlet 规范 版本 3.1(最终版) Shing Wai Chan Rajiv Mordani [作者] 穆茂强 张开涛 [译者] 2012 年 6 月翻译 2013 年 7 ...
- 班级奖学金管理系统java_(奖学金评定管理系统设计)(最终版)
<奖学金评定管理系统设计.doc>由会员分享,可免费在线阅读全文,更多与<(奖学金评定管理系统设计)(最终版)>相关文档资源请在帮帮文库(www.woc88.com)数亿文档库 ...
- IDEA的ultimate(最终版)与community(社区版)的区别?
提升自我,为梦想增值! [IDEA的ultimate(最终版)与community(社区版)的区别] IDEA 全称 IntelliJ IDEA,是java编程语言的集成开发环境. (1)commun ...
- 叶新伟 php,基于php+mysql技术bbs论坛设计的开发与实现最终版(样例3)
<基于php+mysql技术bbs论坛设计的开发与实现.doc>由会员分享,可免费在线阅读全文,更多与<基于php+mysql技术bbs论坛设计的开发与实现(最终版)>相关文档 ...
- 基于c语言实现的个人理财系统,基于Android的个人理财系统—设计和实现-论文最终版.doc...
基于Android的个人理财系统-设计和实现-论文最终版 毕业论文(设计)题目: 基于Android的个人理财系统 ---设计与实现 学生姓名: 吴合伟 学 号: 2009018088 专业班级: 计 ...
- 你好,offer(最终版)
你好,offer(最终版) 计算机网络 osi七层模型:物联网叔会试用 物理层 链路层 网络层 传输层 会话层 表示层 应用层 五层协议 UDP相关 TCP相关 TCP的三从握手和四次挥手 三次握手 ...
最新文章
- Oracle 12C 利用Rman Duplicate搭建 Data Guard
- Dell XP版本在非Dell机子上的激活问题
- eclipse中配置spring约束schema
- 如何预防销售人员带走客户?
- HDU2008 数值统计【序列处理】
- Json.NET特殊处理64位长整型数据
- null值是不会算在count以内的
- 七easy网络陷阱上当
- smartsvn 破解
- excel计算机考试,Excel计算机考试操作题全解.doc
- 计算机发展史与程序员思维
- xbox360手柄连主机
- 接入翼支付的php,翼支付商户接入规范.doc
- win10怎么录制电脑屏幕 电脑录制视频
- 微软公司软件测试工程师,【其它微软中国(Microsoft)工资】软件测试工程师待遇-看准网...
- 乐观数据:企业抖音蓝V账号获取流量运营的四个技巧
- LabVIEW中不同颜色连线的含义
- 计算机课程调整论文,计算机课程改革论文
- python入门——Python的两种编程语言:交互式和文件式
- 电销卡在哪里办理,有用过的没
热门文章
- 分辨率测试方法 ——TV line检测
- linux 启动u盘引导,U盘启动引导安装linux
- steam授权_恐怖游戏爱好者的福音!十一月Steam上最值得玩的恐怖游戏
- Java权限管理系统
- 生物信息学主要研究方向
- C语言贪吃蛇完整代码
- 单片机控制步进电机程序c语言正反转停止,51单片机控制步进电机的启动、停止、正转、反转...
- delphi2007 indy发邮件报could not load ssl library问题的解决
- “威金(Worm.Viking)”病毒特点-专杀及_desktop.ini删除
- Jenkins 定时构建和Poll SCM的区别