SpeedReader 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpeedReader</title>
    <link rel="stylesheet" href="css/speedreader.css">
    <script src="js/speedreader.js"></script>
</head>
<body>
<h1>SpeedReader</h1>
<div id="display"></div>
<div id="inline">
    <fieldset>
        <legend>Play Controls:</legend>
        <button id="start">Start</button>
        <button disabled="disabled" id="stop">Stop</button>
    </fieldset>

    <fieldset>
        <legend>Speed:</legend>
        <select name="speed" id="speed">
            <option value="500">50 wpm</option>
            <option value="200">300 wpm</option>
            <option selected="selected" value="171">350 wpm</option>
            <option value="150">400 wpm</option>
            <option value="133">450 wpm</option>
            <option value="120">500 wpm</option>
        </select>
    </fieldset>

    <fieldset>
        <legend>Size:</legend>
        <input type="radio" name="cc" value="36pt" checked="checked" id="medium" /> Medium
        <input type="radio" name="cc" value="48pt" id="big" /> Big
        <input type="radio" name="cc" value="60pt" id="bigger" /> Bigger
    </fieldset>
</div>

<div>
    <fieldset id="input">
        <legend>Input Text</legend>
        <textarea rows="10" cols="80" id="inputText"></textarea>
    </fieldset>
</div>

</body>
</html>
(function() {
    "use strict";

    let list = [];       // an array to store words that will be displayed
    let speed = 171;    // the speed of animation
    let timer = null;      // set up the timer

    window.onload = function () {
        document.querySelector("#start").onclick = start;
        document.querySelector("#stop").onclick = stop;
        document.querySelector("#medium").onchange = changeSize;
        document.querySelector("#big").onchange = changeSize;
        document.querySelector("#bigger").onchange = changeSize;
        document.querySelector("#speed").onchange = changeSpeed;
        // 请修改上面的代码，将getElementById更换为querySelector
    };

    // start the animation 启动动画
    function start() {
        const inputText = document.getElementById("inputText");
        list = inputText.value.split(/[ \t\n]+/);
        timer = setInterval(play, speed);
        document.getElementById("start").disabled = true;
        document.getElementById("stop").disabled = false;
        document.getElementById("inputText").disabled = true;
    }

    // stop the animation and return everything to default
    // 停止动画并恢复到默认设置
    function stop() {
        //在此处编写自己的代码，提示：会用到clearInterval函数
        // clearInterval(timer);
        // document.getElementById("start").disabled = false;
        // document.getElementById("stop").disabled = true;
        // document.getElementById("inputText").disabled = false;
        // document.getElementById("inputText").innerHTML = "";
        // document.getElementById("display").innerHTML = "";

    }

    // display words in the array  显示数组中的单词
    function play() {
        if (list.length == 0) {
            stop();
        } else {
            let str = list[0];
            let char = str.charAt(str.length - 1);
            if (char == ',' || char == '.' || char == '!' ||
                char == '?' || char == ';' || char == ':') {
                // 在此处编写自己的代码
                // str.pop();
            }
            playOnce(str);
        }
    }

    // display the given word in the display box;
    // 在显示框中显示给定的单词
    function playOnce(str) {
        const box = document.getElementById("display");
        box.innerHTML = str;
        list.shift();
    }

    // change font size of text in the display box;
    function changeSize() {
        const box = document.getElementById("display");
        //____________________________________;
        box.style.fontSize = "30px";
    }

    // change speed of animation in the display box;
    // 改变显示框中的速度
    function changeSpeed() {
        speed = this.value;
        if (timer !== null) {
            // 在此处编写自己的代码
        }
    }
})();

 

 

2020年4月8日22:27:12

未完成

posted @ 2020-04-08 22:28  陈太浪  阅读(199)  评论(0)  编辑  收藏  举报