舒尔特表5*5计时

最新推荐文章于 2023-07-30 09:26:45 发布

置顶樱梦雪苹宝

最新推荐文章于 2023-07-30 09:26:45 发布

阅读量2.2k

点赞数

分类专栏： js jquery样式 js样式 html

本文链接：https://blog.csdn.net/yingmengxuepingbao/article/details/87166674

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

js样式

20 篇文章 0 订阅

订阅专栏

html

20 篇文章 1 订阅

订阅专栏

大家好：最近在玩快速记忆，看到舒尔特表，再整理出一版来。v2.0版本。

舒尔特表5*5，1-25个数字随机生成且不重复，添加计时器。

<!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>
<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 (){

//二维数组
 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='400' height='400' 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 start = dsxcc();//页面加载，开始计时。
	//------------------计时器------------
	//时间戳：创建时间   +:将该元素转换秤Number类型  
	//+new Date： 将会调用 Date.prototype 上的 valueOf 方法 等同于 Date.prototype.getTime()
	var currentTime = (+new Date);
	//定义变量
	var scs, dssx, daas = 0;
	//秒表计时
	function dsxcc() {
		scs = setInterval(function() {
			var dsaa = (+new Date);
			var sxx = dsaa - currentTime;
			dssx = get10(Math.floor(sxx / 3600000) % 100) + ":"
					+ get10(Math.floor(sxx / 60000) % 60) + ":"
					+ get10(Math.floor(sxx / 1000) % 60) + ":"
					+ get100(sxx % 1000);
			//-------------------将时间拼接到页面中-------------------
			document.getElementById("dataTime").innerHTML=dssx;
			//$("#dataTime").append(dssx);
		}, 1)
	}
	//时/分
	function get10(i) {
		if (i < 10)
			i = "0" + i
		return i
	}
	//秒
	function get100(i) {
		if (i < 100) {
			if (i < 10) {
				i = "00" + i
			} else {
				i = "0" + i
			}
		}
		return i
	}
});

</script>
</head>
	<body>
		<!--
        	作者：zyx
        	时间：2019-02-13
        	描述：舒尔特5*5表格/计时  //计时结束+顺序选出
        -->
		<div style="max-width: 100%;height: auto;display: block;background-size: contain;">
			<div class="slide" id="shulte" align="center">
			</div>
			
			<div class="slide" id="dataTime" style="display:inline-block;margin-left:20px;">
			</div>
		</div>	
		<div style="height: 450PX;"></div>
	<div align="center"> 
		<a href="javascript:;" onClick="javascript:history.back(-1);">
			<img height="50" width="50"  src="../img/tubiao/1.png" border="0" title="返回上一页">
		</a>
	</div>
	</body>
</html>

樱梦雪苹宝

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
舒尔特表5*5计时

大家好：最近在玩快速记忆，看到舒尔特表，再整理出一版来。v2.0版本。舒尔特表5*5，1-25个数字随机生成且不重复，添加计时器。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head...
复制链接

扫一扫