<!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
未完成