刻意练习：舒尔特方格提升专注力

news2024/11/17 2:28:26

1.功能描述

刻意练习：舒尔特方格提升专注力

如果发现自己存在不够专注的问题，可以通过一个小游戏来提升自己专注力--舒尔特方格。

舒尔特方格的实施步骤如下：

一张纸上画出5X5的空方格。
在方格中，没有任何规律的随机填写数字1~25，每个方格填一个数字。
训练时，使用秒表计时器，按1~25的顺序，用手一次指出并念出每个数字。
数完后，结束计时，通常，25秒内完成属于中等水平，16秒内完成就是优秀。注意：练习时一定要手嘴并用，目光很容易飘忽不定，通过手指来引导目光可以避免遭受干扰。

2.代码实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>《西蒙学习法》5.7舒尔特方格提升专注力</title>
    <style>
        #big {
            position: absolute;
            left: 10%;
            right: 10%;
        }

        #container {
            float: left;
            width: 250px;
            border: 1px solid;

        }

        .cell {
            text-align: center;
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            border: 1px solid;
            box-sizing: border-box;
        }

        button#refresh {
            margin-top: 20px;
            width: 255px;
            height: 50px;
            border-radius: 10px;
            background-color: #409EFF;
            border: #409EFF;
            color: white;
            font-size: 20px;
        }

        button#refresh:hover {
            background: #67C23A;
        }

        p {
            text-indent: 2em;
        }

        #timer {
            width: 255px;
            margin-top: 20px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        #timer span {
            display: inline-block;
            margin: 4px;
            font-size: 20px;
            color: red;
        }

        #timer button {
            background-color: #fff;
            border-radius: 10px;
            border: 1px solid #409EFF;
            color: #67C23A;
        }

        #timer button:hover {
            background-color: #409EFF;
            color: white;
        }
    </style>
    <script>
        function refresh() {
            //创建25个元素为0的数组
            var array25 = new Array(25).fill(0);
            //获取25个格子
            var cells = document.getElementsByClassName("cell");
            //给每个格子插入不同数字
            for (var i = 0; i < 25; i++) {
                while (true) {
                    var randomNum = findRandomNum(25);
                    if (array25[randomNum] == 0) {
                        cells[i].innerHTML = randomNum + 1;
                        array25[randomNum] = 1;
                        break;
                    } else {
                        continue;
                    }
                }
            }
        }
        //先找到小于当前数组长度的一个随机数
        function findRandomNum(n) {
            return Math.floor(Math.random() * n);
        }

        var seconds = 0;
        var intervalId;

        function reset() {
            seconds = 0;
            document.getElementById("seconds").innerHTML = seconds;
        }

        function end() {
            if (intervalId) {
                clearInterval(intervalId);
            }
            document.getElementById("end").style.display = "none";
            document.getElementById("start").style.display = "inline-block";
            if (seconds <= 16) {
                document.getElementById("seconds").innerHTML = seconds + "(优秀)";
            } else if (seconds <= 25) {
                document.getElementById("seconds").innerHTML = seconds + "(中等)";
            } else {
                document.getElementById("seconds").innerHTML = seconds + "(不佳)";
            }
        }

        function start() {
            intervalId = setInterval(() => {
                seconds++;
                document.getElementById("seconds").innerHTML = seconds;
            }, 1000);
            document.getElementById("start").style.display = "none";
            document.getElementById("end").style.display = "inline-block";
        }
    </script>
</head>

<body onload="refresh()">
    <div id="big">
        <h1>刻意练习：舒尔特方格提升专注力</h1>
        <div id="container">
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
        <div style="clear: both;">
            <button id="refresh" onclick="refresh();">刷新</button>
        </div>
        <div id="timer">
            <span id="seconds">0</span>
            <div style="padding: 5px;">
                <button id="start" onclick="start();">开始计时</button>
                <button id="end" onclick="end();" style="display: none;">结束计时</button>
                <button id="reset" onclick="reset();">重置时间</button>
            </div>
        </div>
        <p>
            如果发现自己存在不够专注的问题，可以通过一个小游戏来提升自己专注力--舒尔特方格。<br />
        <h5>舒尔特方格的实施步骤如下：</h5>
        <ol>
            <li>一张纸上画出5X5的空方格。</li>
            <li>在方格中，没有任何规律的随机填写数字1~25，每个方格填一个数字。</li>
            <li>训练时，使用秒表计时器，按1~25的顺序，用手一次指出并念出每个数字。</li>
            <li>数完后，结束计时，通常，25秒内完成属于中等水平，16秒内完成就是优秀。</li>
        </ol>
        注意：练习时一定要手嘴并用，目光很容易飘忽不定，通过手指来引导目光可以避免遭受干扰。
        </p>
    </div>
</body>

</html>