【每日一练】249—JS实现打字效果

每日一练2年前发布 admin
24,592 2

第249练的最终效果如下：

【每日一练】249—JS实现打字效果

 

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 = 1
let speed = 300 / speedEl.value
writeText()
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)
© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

2 条评论

  • TMail
    TMail 游客

    I was just as enthralled by your work as you were. Your sketch is elegant, and your written content is sophisticated. However, you seem concerned about potentially delivering something questionable soon. I’m confident you’ll resolve this issue quickly and return to your usual high standards.

    回复
  • Glucovy Reviews
    Glucovy Reviews 游客

    Wow wonderful blog layout How long have you been blogging for you make blogging look easy The overall look of your site is great as well as the content

    回复