百度的舒爾特方格介紹主要內容如下：
舒爾特方格（Schulte Grid）是一種訓練注意力的方法。在一張方形卡片上畫上 1cm*1cm 的 25 個方格，格子內任意填寫上阿拉伯數字 1 ~ 25 等共 25 個數字。訓練時，要求被測者用手指按 1 ~ 25 的順序依次指出其位置，同時誦讀出聲，施測者一旁記錄所用時間。數完 25 個數字所用時間越短，注意力水平越高。
以 7—12 歲年齡組為例，能達到26"以上為優秀，學習成績應是名列前茅， 42"屬於中等水平，班級排名會在中游或偏下， 50"則問題較大，考試會出現不及格現象。
以 12 ―― 14 歲年齡組為例，能到達 16 "以上為優良，學習成就應是名列前茅， 26 "屬於中等水平，班級排名會在中游或偏下， 36 "則問題較大，測驗會呈現不合格現象。
18 歲及以上成年人最好可到達 8 "的程度， 20 "為中等程度。
由於紙質的是固定的位置，不能隨機排布數字，記憶好了就可以提速，容易產生厭倦心理，所以我就想着用程序寫一個，每次都刷新界面。
下面給出前端的網頁代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } .left-time{ text-align: center; color: #e73480; margin-top: 10px; height: 20px; font-size: 20px; } .num-area{ width: 200px; height: 200px; display: flex; flex-wrap: wrap; margin: 20px auto; border: 1px solid #e73480; cursor: pointer; } .num-area .num-item{ width: 20%; height: 20%; border: 1px solid #e73480; text-align: center; line-height: 38px; cursor: pointer; } .num-area .num-item.selected{ background: green; } .game-status{ padding: 30px; text-align: center; } .game-status .module{ display: inline-block; padding: 10px 20px; border-radius: 5px; cursor: pointer; } .count-up{ margin-right: 20px; } .game-status .module.active{ background-color: #e73480; color: #fff; } .start{ cursor: pointer; display: inline-block; padding: 10px 20px; border-radius: 5px; background-color: #e73480; color: #fff; margin-bottom: 15px; } </style> </head> <body> <div class="left-time"></div> <div class="num-area"> </div> <div class="game-status"> <div class="btn start">開始</div> <!-- <div class="btn pause">暫停</div> --> <br /> <div class="module count-up">計時模式</div> <div class="module count-down">挑戰模式</div> </div> <script> var arr = []; for(var i = 1; i <= 25; i++){ arr.push(i); } // 數組亂序 function disOrder(arr){ function compare(a, b){ return 0.5 - Math.random(); } arr.sort(compare); return arr; } arr = disOrder(arr); console.log(arr); // 通過class過去元素 function getClass(className){ return document.getElementsByClassName(className); } var timeDom = getClass("left-time")[0]; var numsDom = getClass("num-area")[0]; var statusDom = getClass("game-status")[0]; // 渲染1-25的方格 function renderNums(numList){ var str = ""; for(var i = 0, len = numList.length; i < len; i++){ str += '<div class="num-item">'+ numList[i] +'</div>' } numsDom.innerHTML = str; } // renderNums(arr); var findNum = 1; // 當前需要查找的下標 var canChoose = false; var gameModule = 0; // 0 count-up 1 count-down // 為每個方格綁定點擊事件——事件委托 function bindEvent(){ numsDom.onclick = function (e) { if(!canChoose){ console.log("當前不可點擊"); alert("請點擊開始繼續"); return; } e = e || event; console.log(e); var target = e.target || e.srcElement; if(target.classList.contains("num-item")){ if(target.innerHTML == findNum){ target.classList.add("selected"); if(findNum == arr.length){ // alert("勝利了"); success(); }else{ findNum += 1; } }else{ // alert("請按順序點擊"); } } } } bindEvent(); // 渲染當前模式 var modules = getClass("module"); function renderModule(){ for(var i = 0, len = modules.length; i < len; i++){ if(gameModule == i){ modules[i].classList.add("active"); }else{ modules[i].classList.remove("active"); } } } renderModule(); // 模式切換 for(var i = 0, len = modules.length; i < len; i++){ (function(n){ modules[n].onclick = function () { console.log(startTime , timer); if(startTime || timer){ console.log("當前正在"+gameModule+"模式游戲，不可以切換"); return; } gameModule = n; renderModule(); } })(i); } var startTime = 0; var countDown = 15; var timer; var countUpTimer; // 開始 var startBtn = getClass("start")[0]; startBtn.onclick = function () { console.log(timer,"start") if(gameModule == 0){ // 計時模式 if(startTime){ alert("游戲正在進行中"); return; } init(); startTime = Date.now(); var count = 0; timeDom.innerHTML = count; countUpTimer = setInterval(function(){ ++count; timeDom.innerHTML = count; },1000); }else{ // 挑戰模式 倒計時 if(timer){ alert("游戲正在進行中"); return; } init(); countDown = 15; timeDom.innerHTML = countDown; timer = setInterval(function () { console.log(timer); countDown --; timeDom.innerHTML = countDown; if(countDown == 0){ canChoose = false; clearInterval(timer); timer = undefined; console.log(timer,"失敗clear"); setTimeout(function () { alert("挑戰失敗"); },0); } }, 1000); } } // 完成任務的處理 function success () { canChoose = false; console.log("勝利"); if(gameModule == 0){ var endTime = Date.now(); timeDiff = parseInt((endTime - startTime) / 1000 * 10) / 10; console.log("用時" + timeDiff); startTime = 0; clearInterval(countUpTimer); console.log("成功清理startTime"); // alert("用時" + timeDiff + "秒"); }else if(gameModule == 1){ clearInterval(timer); timer = undefined; console.log(timer,"成功clear") alert("挑戰成功"); }else{ console.log("模式異常"); } } function init(){ arr = disOrder(arr); renderNums(arr); findNum = 1; canChoose = true; } </script> </body> </html>
界面入下圖
