坦白使人心地轻松的妙药。——西塞罗
实现打字机效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .d1 { width: 100%; height: 600px; background: #000; position: relative; } .zhezhao { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .zhezhao { background: rgba(0, 0, 0, .1); } .font { position: absolute; top: 0; left: 140px; bottom: 0; margin: auto 0; font-size: 55px; height: 70px; width: max-content; color: #fff; z-index: 2; text-align: left; } .font::after { content: ''; display: inline-block; width: 2px; height: 100%; background: #fff; position: absolute; top: 0; right: -5px; animation: dh .8s ease-in-out infinite; } @keyframes dh { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <body> <div class="d1"> <div class="zhezhao"></div> <div class="font"> </div> </div> <script> var arr = ['测试1111', '测试22222', '测试333333', '测试444444', '测试5555555'] var index = 0 var i = 0 var str2 = '' var time1, time2 var font = document.getElementsByClassName('font')[0] function add(index) { str2 = this.str.slice(0, index) console.log(str2) font.innerHTML = str2 if (index <= this.str.length) { setTime('add', 170) } else { clearTimeout(time1) setTime('reduce', 1000) } } function reduce(index) { str2 = this.str.slice(0, index) font.innerHTML = str2 if (index > 0) { setTime('reduce', 50) } else { index = 0 clearTimeout(time1) if (i < arr.length - 1) { i++ } else i = 0 change(i) } } // 定时器 function setTime(type, time) { var that = this time1 = setTimeout(function () { if (type == 'add') { index++ add(index) } else { index = index > 0 ? index - 1 : 0 reduce(that.index) } }, time); } function change(i) { if (i < arr.length) { this.str = arr[i] add(index) } } change(0) </script> </body> </html>
