舒尔特表-遮罩层-计时排序点击 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"></head>
<script src="../js/jquery-1.7.2.js"></script><script type="text/javascript">//定义数组的截至数字var number = 25;var array=new Array(number);
//页面加载执行
$(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 rsts = getDiffGroup(5, 1, number);//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+"毫秒");}else{//1-25 点击次数赋值$("#shulte_text").attr("value",num);//推荐这种写法,可正常赋值}}else{alert("请点击："+num);}}}//拼接时间
var intervalId;
var count = 0;
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");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 + "&nbsp;";} else {ms.innerHTML = "0" + thems + "&nbsp;";}}, 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相关推荐

添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件
给绝对定位的层多加一个样式:" pointer-events:none; " 这样绝对定位层下的元素就可以点击了如果在绝对定位层上存在能够点击的元素,在添加" poin ...
怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法
mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; le ...
element-ui dialog遮罩层在最上层，关掉dialog遮罩层还在
代码中使用了dialog,dialog中点击某个按钮,又嵌套了一个dialog. 导致最外层的dialog出现后一直被遮罩层遮住,点击确定关掉dialog遮罩层还在. element-ui的dialo ...
点击遮罩层的背景关闭遮罩层
开发工具与关键技术:Adobe Dreamweaver CC 作者:黄灿撰写时间:2019.1.16 在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层, ...
点击遮罩层的背景关闭遮罩层（HTML）
在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层,但唯独点击内容区域不会关闭掉遮罩层.于是我开始模仿这个写案例,连内容也一模一样(因为这个练习就是要写出和 ...
html全屏遮罩层,js遮罩层穿透怎么用JS弄遮罩层？全屏，有透明
也可直接点"搜索资料"搜索整个问题. 遮罩层 js 事件穿透搜索资料本地图片图片链接代码提交回答匿名回答自动保存中 html中的frameset,假如有上中下三个f ...
css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】
目录 1.遮罩层的制作 2.信息层 3.往白色的块里添加表单 1.遮罩层的制作 <!DOCTYPE html> <html lang="zh-CN"> ...
oracle 表名拼接_Oracle之3种表连接方式（排序合并连接、嵌套循环、哈希连接）...
排序合并连接 1.2.4.2.1 排序合并连接排序合并连接(Sort Merge Join)是一种两个表在做表连接时用排序操作(Sort)和合并操作(Merge)来得到连接结果集的表连接方法. 如 ...
iOS开发-舒尔特表
周末闲来无事,看一个概念,挺有意思的,舒尔特表,网上也有很多人写过类似的Demo,本人闲来无事也写了一下,舒尔特表听起来很高大上的样子,不过本人的理解就是一个正方形的矩阵中放的各种小格子,可以是字母, ...
iOS学习笔记-018.舒尔特表游戏
舒尔特表游戏一舒尔特表简介二舒尔特表游戏说明说明作用规则评测图示三跳到下一界面四获取目标ViewController 五返回到主界面六计时时钟的调用七创建存储随机数不重复的数组 ...

舒尔特表-遮罩层-计时排序点击 js

舒尔特表-遮罩层-计时排序点击 js相关推荐

最新文章

热门文章