• 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(/[ 	
    ]+/);
            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

    未完成

  • 相关阅读:
    面试题目
    MyEclipse 启动 tomcat时错误处理
    js 剪贴板操作
    PHP面试题
    MySQL 数据库 source 导入乱码
    php 不用通过表单也能创建HTTPpost请求
    一个css中zindex的用法
    最新黑链代码expression:隐藏链接代码
    测试网站访问速度的几个小方法
    优秀开源外贸网店程序一览
  • 原文地址:https://www.cnblogs.com/TomHe789/p/12663404.html
Copyright © 2020-2023  润新知