css 自动打字效果的实现

拼搏现实的明天。 2023-10-07 20:16 62阅读 0赞

#### 阅读目录 ####

*  最终效果
 *   *  index.html
     *  index.js
     *  index.css

## 最终效果 ##

![在这里插入图片描述][e16a5180625c4abf98fd783e3288f95b.gif_pic_center]

### index.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>自动打字效果的实现</title>
    </head>
    <body>
    	<h1 id="text">开始打字</h1>
    
    	<div>
    		<label for="speed">设置速度:</label>
    		<input type="number" name="speed" id="speed" value="1" min="1" max="20" step="1">
    	</div>
    	
    	<script src="index.js"></script>
    </body>
    </html>

### index.js ###

const textEl = document.getElementById('text')
    const speedEl = document.getElementById('speed')
    const text =
    	'毛泽东的名作《沁园春·雪》,北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。'
    let idx = 1
    let speed = 100 / 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 = 100 / e.target.value)

### index.css ###

* {
        
      box-sizing: border-box;
    }
    
    body {
        
      background-color:#00a6bc;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
      margin: 0;
    }
    h1{
        margin-left:50px;margin-right:50px;
    
    }
    #text{
        
      color:#fff;
    }
    
    div {
        
      position: absolute;
      bottom: 20px;
      font-size: 18px;
      background-color: #fff;
      opacity:0.8;  
    }
    
    input {
        
      width: 50px;
      padding: 5px;
      font-size: 18px;
      background-color: #fafafa;
      border: none;
      text-align: center;
    }
    
    input:focus {
        
      outline: none;
    }

[e16a5180625c4abf98fd783e3288f95b.gif_pic_center]: https://img-blog.csdnimg.cn/e16a5180625c4abf98fd783e3288f95b.gif#pic_center