JavaScript应用打字练习

我要回母星

于 2024-10-28 20:56:38 发布

阅读量279

点赞数 4

文章标签： javascript css css3

本文链接：https://blog.youkuaiyun.com/2302_77140718/article/details/143313336

版权

一个简单的打字测试网页应用。用户可以在页面上看到示例文字，在文本框中输入相应内容进行打字测试，测试过程中会记录所花时间、错误数量，并在结束时计算打字速度和正确率。

网页运行结果和代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>打字测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
            height: 100%;
        }

        ::-webkit-scrollbar {
            width: 0;
        }

       .fontTextarea,
       .btnGroup,
       .costTime {
            width: calc(100% - 40px);
            margin: 0 20px;
            position: relative;
        }

       .fontTextarea {
            outline: none;
            resize: none;
            overflow-y: auto;
            height: 200px;
            border: 1px solid #bebebe;
            border-radius: 4px;
        }

        textarea:disabled {
            background-color: #f3f4f5;
            color: #535353;
        }

       .fontString {
            padding: 20px;
        }

       .fontTextarea:focus {
            box-shadow: 0 0 10px rgba(204, 243, 239, 0.73);
        }

       .btnGroup>button {
            background-color: transparent;
            border: none;
            border-bottom: 1px solid transparent;
            padding: 4px 12px;
            font: 16px "幼圆";
            color: #141313;
            outline: none;
            border-radius: 4px;
            cursor: pointer;
            display: inline-block;
        }

       .btnGroup>button:last-child {
            margin-left: 15px;
        }

       .btnGroup>button:hover,
       .btnGroup>button:active {
            border-color: #a3ecec;
        }

       .costTime {
            margin-top: 10px;
        }

       .costTime::after {
            content: " ";
            display: block;
            visibility: hidden;
            height: 0;
            clear: both;
        }

       .costTime p {
            width: 33.33%;
            font-size: 16px;
            float: left;
        }

       .costTime p span {
            color: #ff3119;
            padding: 0 2px;
        }

       .errorfont {
            color: #cf2c1a;
        }

       .rightfont {
            color: #29bbff;
        }

        @media screen and (max-width:750px) {
           .costTime p {
                font-size: 12px;
            }
        }
    </style>
</head>

<body>
    <!--示例字-->
    <p class="fontString"></p>
    <!--输入文本-->
    <textarea class="fontTextarea"></textarea>
    <!--测试按钮-->
    <div class="btnGroup">
        <button type="button" class="beginBtn">(重新)开始打字</button>
        <button type="button" class="finishBtn">结束打字</button>
    </div>
    <!--测试所花时间-->
    <div class="costTime">
        <p>所花时间:<span class="time">0</span>秒</p>
        <p>错误数量:<span class="error">0</span>个</p>
        <p>打字速度:<span class="speed">0</span>个/分</p>
        <p>正确率:<span class="accuracy">0</span></p>
    </div>
</body>
<!--js部分-->
<script type="text/javascript">
    function _class(str) {
        return document.getElementsByClassName(str);
    }
    var fontstring = _class("fontString")[0];
    var strExample = "网上打字测试，点开始之后可以开始打字，按下第一个键之后开始计时，" +
        "打字结束之后可以按计算速度计算你刚才打字的速度，下方同时显示错误的字数、经过的时间。" +
        "打错的字是红色显示，正确的是蓝色字，还没有打的是黑色。";
    var timeSpan = _class("time")[0];
    var errorSpan = _class("error")[0];
    var speedSpan = _class("speed")[0];
    var accuracySpan = _class("accuracy")[0];
    var costTime = 0;
    var errorCount = 0;
    var timer;
    var haveEnter = false;
    var fonttextarea = _class("fontTextarea")[0];
    var beginbtn = _class("beginBtn")[0],
        finishbtn = _class("finishBtn")[0];

    window.onload = function () {
        fonttextarea.disabled = true;
        fontstring.innerText = strExample;
        fonttextarea.onkeydown = function () {
            var strCount = 0;
            var str = "";
            var inputLength = fonttextarea.value.length;
            if (fonttextarea.value == "") return;
            if (!haveEnter) {
                haveEnter = true;
                costTime = 0;
                timer = setInterval(function () {
                    showtimeFun();
                }, 1000);
            }
            for (var i = 0; i < strExample.length - 1; i++) {
                if (i < inputLength) {
                    if (fonttextarea.value.slice(i, i + 1) == strExample.slice(i, i + 1)) {
                        str = str + "<span class='rightfont'>" + strExample.slice(i, i + 1) + "</span>";
                    } else {
                        str = str + "<span class='errorfont'>" + strExample.slice(i, i + 1) + "</span>";
                        strCount++;
                    }
                } else {
                    str = str + strExample.slice(i, i + 1);
                }
            }
            errorCount = strCount;
            fontstring.innerHTML = str;
            errorSpan.innerText = errorCount;
            var totalInputLength = fonttextarea.value.length > strExample.length? strExample.length : fonttextarea.value.length;
            var accuracy = (totalInputLength - errorCount) / totalInputLength;
            accuracySpan.innerText = accuracy.toFixed(2);
        }

        function showtimeFun() {
            costTime++;
            timeSpan.innerText = costTime;
        }

        beginbtn.onclick = function () {
            errorCount = 0;
            fontstring.innerText = strExample;
            fonttextarea.value = "";
            fonttextarea.disabled = false;
            fonttextarea.focus();
            errorSpan.innerText = errorCount;
            speedSpan.innerText = "0";
            accuracySpan.innerText = "0";
        }

        finishbtn.onclick = function () {
            clearInterval(timer);
            timeSpan.innerText = 0;
            fonttextarea.disabled = true;
            var sp = 0;
            if (fonttextarea.value == "") {
                return sp;
            } else {
                sp = Number(fonttextarea.value.length * 60 / costTime).toFixed(2);
                speedSpan.innerText = sp;
                haveEnter = false;
            }
        }
    }
</script>

</html>