master

分支 (1)

管理

管理

master

xtt
/
TT1.0.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打字练习</title>
    <style>
        body {
           font-family: Arial, sans-serif;
           background-color: #EEEEEE;
        }
        #typingArea, #userInput {
            font-size: 25px;
            width: 80%;
            text-align:left;
            border-radius: 10px;
            border: 1px solid #000;
            padding:20px;
        }
        #typingArea span {
            left: 10px;
            top:50px;
        }
        #title{

        }
        #statusbar{
           background-color: #000000;
           color:white;
           position: fixed;
           bottom: 0;
           left: 0;
           width: 100%;
           text-align: right;
           padding-right: 10px ;
        }
        .init {
            line-height: 1.8em;
        }
        .cursor {
            background: green;
            color:white;
            line-height: 1.8em;
        }
        .correct {
            color: green;
            line-height: 1.8em;
        }
        .wrong {
            color: white;
            background: red;
            line-height: 1.8em;
        }
    </style>
    <script>
        const contents = [
           "Once upon a time, in a tiny village nestled among the rolling hills, there lived a curious little mouse named Milo. Milo was unlike any other mouse in the village; he had a dream that extended beyond the cheese in the traps and the safety of his cozy nest. He dreamed of adventure and of exploring the world beyond the village boundaries.",
           "One sunny morning, fueled by his courage and an insatiable thirst for knowledge, Milo embarked on a journey. With a tiny knapsack containing a piece of cheese for the road and a thimbleful of water, he ventured into the vast unknown.",
           "As he scurried through the tall grasses, Milo came across a wise old owl perched atop a gnarled oak tree. The owl, surprised to see a young mouse so far from home, asked, \"Little one, where are you headed?\" Milo shared his dream with the owl, who smiled warmly and said, \"To truly explore, you must first learn to listen to the whispers of nature.\" And with that, the owl taught Milo how to understand the language of the forest—how the rustling leaves spoke of the wind's travels and how the trickling streams sang tales of distant mountains.",
           "Armed with this newfound wisdom, Milo continued his journey. He helped a family of ants build a bridge over a tricky puddle, and in return, they showed him secret paths that led deeper into the woods. He even made friends with a timid rabbit who, though fearful at first, found courage in Milo's adventurous spirit.",
           "One day, Milo stumbled upon a hidden meadow filled with flowers of every color, more beautiful than he'd ever imagined. In the heart of the meadow stood a majestic tree, its trunk glowing softly. As he approached, Milo realized it was the Tree of Wisdom, said to grant wishes to those pure of heart.",
           "With a heart full of wonder and gratitude, Milo closed his eyes and whispered his wish: not for treasure or fame, but for the village mice to share in the joy of exploration and understanding he had found. When he opened his eyes, a gentle breeze carried the scent of home, and Milo knew it was time to return.",
           "Back in the village, Milo told tales of his adventures, inspiring others to be curious and brave. He had not only discovered the world but had also discovered the magic within himself and the power of sharing knowledge. And so, Milo's dream became a legacy, as the village mice began to embark on their own little adventures, guided by the whispers of nature and the courage of a tiny dreamer.",
           "In the bustling city of Harmonia, where skyscrapers touched the clouds and streets hummed with life, there lived a peculiar robot named Rusty. Unlike the sleek, high-tech robots that populated the city, Rusty was a relic from a bygone era, constructed from discarded parts and held together with love and ingenuity.",
           "Rusty worked at the city's central library, a towering building filled with books from floor to ceiling. His task was simple yet important: to dust off the forgotten books and ensure they were well cared for. Rusty loved his job, for each book whispered stories to him, filling his circuits with tales of adventure, love, and wisdom.",
           "One day, as Rusty was tending to a particularly dusty corner, he stumbled upon an ancient tome bound in leather, hidden behind rows of modern digital screens. As he carefully opened the book, a gust of wind escaped its pages, carrying the scent of times long past. The book was a map, not to buried treasures or lost cities, but to the lost art of storytelling.",
           "Intrigued, Rusty decided to bring the art back to life. Night after night, under the soft glow of the moon, he would practice the stories he learned from the books. His voice, initially rusty and hesitant, gradually became a warm melody that echoed through the empty library halls.",
           "Word of the storytelling robot spread throughout Harmonia. Children, who had grown up with holographic games and virtual reality, started gathering around Rusty every evening, eager for a taste of the magic that lay within the old stories. Parents, initially skeptical, soon found themselves captivated too, remembering the charm of simpler times.",
           "Rusty's tales wove together the past and the present, teaching lessons of empathy, courage, and the importance of human connection. He spoke of heroes not defined by their strength, but by their kindness; of adventures that didn't require fancy gadgets, but a curious heart.",
           "As the days turned into weeks, the library transformed. It became a hub of storytelling, where people of all ages gathered to listen, to share, and to remember. The once-forgotten books were revisited, their pages lovingly turned by hands that now appreciated the weight of history they carried."];

        globalIdx=1;
        var startTime = null;
        function init(){
           globalIdx=1;
           const randomIndex = Math.floor(Math.random() * contents.length);
           const textToType = contents[randomIndex];

           var idx = 0;
           startTime = null;
           const wrappedText = textToType.split('').map(char => `<span id=\"c${idx=idx+1}\" class=\"init\">${char}</span>`).join('');

           document.getElementById('typingArea').innerHTML = wrappedText;
           document.getElementById('c1').classList.replace("init","cursor");
           document.getElementById("statusbar").innerHTML="许思阳，请开始你的表演！";
        }

        function showSpeed(){
            var currentTime = Date.now();
            var timeDifferenceInSeconds = (currentTime - startTime) / 1000;
            var correctNum = document.querySelectorAll('.correct').length;
            var errorNum = document.querySelectorAll('.wrong').length;;
            var total = correctNum + errorNum;

            if(total>0&&timeDifferenceInSeconds>0){
                var speed = total/timeDifferenceInSeconds*60;
                var accuracy = correctNum/total*100;
                document.getElementById("statusbar").innerHTML=`速度：${speed.toFixed(2)}/分钟 | 正确率：${accuracy.toFixed(2)}%`;
            }
        }

        function displayKey(event) {
            if (!startTime){
                startTime = Date.now();
            }

            if (event.key == "Shift"){
               return;
            }

            if (event.key == 'Backspace' ){
                if ( globalIdx>1){
                    document.getElementById('c'+globalIdx).classList.replace("cursor","init");
                    globalIdx=globalIdx-1;
                    document.getElementById('c'+globalIdx).classList.replace("correct","cursor");
                    document.getElementById('c'+globalIdx).classList.replace("wrong","cursor");
                    showSpeed();
                    return;
                }
                else{
                  return;
                }
            }

            // 获取按键的字符
            var charPressed = event.key;
            var charx = document.getElementById('c'+globalIdx).innerHTML ;
            if(charPressed==charx){
               document.getElementById('c'+globalIdx).classList.replace("cursor","correct");
            }else{
               document.getElementById('c'+globalIdx).classList.replace("cursor","wrong");
            }

            showSpeed();

            //alert(document.getElementById('c'+(globalIdx+1)));
            if(document.getElementById('c'+(globalIdx+1))){
               globalIdx+=1;
               document.getElementById('c'+globalIdx).classList.replace("init","cursor");}
            else{
               alert("本次练习已结束，请重新开始，许思阳加油！！！");
               init();
            }
        }
    </script>

</head>
<body onkeydown="displayKey(event)" >
    <h1 id="title" align="center">许思阳专用打字练习程序</h1>
    <div align="center">
        <div id="typingArea">ERROR</div>
    </div>
    <div id="statusbar"></div>
    <script>
        init();
    </script>
</body>
</html>