第249练的最终效果如下：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><link rel=”stylesheet” href=”index.css” /><title>第249练</title></head><body><h1 id=”text”>Starting…</h1><div><label for=”speed”>速度:</label><input type=”number” name=”speed” id=”speed” value=”1″ min=”1″ max=”10″ step=”1″></div><script src=”index.js”></script></body></html>
CSS:
@import url(‘https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap’);* {box-sizing: border-box;}body {background-color: #00A6BC;font-family: ‘Roboto’, sans-serif;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;}div {position: absolute;bottom: 20px;background: rgba(0, 0, 0, 0.1);padding: 10px 20px;font-size: 18px;}input {width: 50px;padding: 5px;font-size: 18px;background-color: #fff;border: none;text-align: center;}input:focus {outline: none;}
JS:
const textEl = document.getElementById(‘text’)const speedEl = document.getElementById(‘speed’)const text = ‘欢迎来到【web前端开发】公号平台，网站：www.webqdkf.com’let idx = 1let speed = 300 / speedEl.valuewriteText()function writeText() {textEl.innerText = text.slice(0, idx)idx++if(idx > text.length) {idx = 1}setTimeout(writeText, speed)}speedEl.addEventListener(‘input’, (e) => speed = 300 / e.target.value)
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
