自动打字效果

最新推荐文章于 2023-02-17 07:45:01 发布

Uxiao7

最新推荐文章于 2023-02-17 07:45:01 发布

阅读量160

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Uxiao7/article/details/125448372

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html ：
<div class="desc"><span id="text"></span><span id="bar">|</span></div></div>

css：
.desc{  font-family: 'PingFang SC';  font-style: normal;  font-weight: 600;  font-size: 42px;  line-height: 120%;  color: #4079FB;}#text{  font-size: 42px;}#bar{  font-size: 42px;  color: #4079FB;}

js：
var i = 0;
var str = "知识管理系统"; 
 //自动打字效果   
function typing() {      var mydiv = document.getElementById("text");      document.getElementById("bar").style.cssText = "display:none";      mydiv.innerText = str.substring(0, i++) + (i > str.length ? "" : "|");      var typingTimer = setTimeout(typing, 500);      if (i > str.length) {        clearTimeout(typingTimer);  
 // 竖杠闪烁效果      
var twinkleTimer = setInterval(twinkle, 500);        setTimeout(function () {                 clearInterval(twinkleTimer);          document.getElementById("bar").style.cssText = "display:none";          //自动删除文字效果      
 deleteText();        }, 3000);      }    }    typing()
//自动删除文字效果 
function deleteText() {      var mydiv = document.getElementById("text");      mydiv.innerText = str.substring(0, i--) + "|";      var deleteTextTimer = setTimeout(deleteText, 50);      if (i < 0) {        clearTimeout(deleteTextTimer);        //删除完后，自动打字，达到循环        typing();      }    }
// 竖杠闪烁效果  
var flag = 0;    function twinkle() {      if (flag) {        document.getElementById("bar").style.cssText = "color:#4079FB;";        flag = 0;      } else {        document.getElementById("bar").style.cssText = "color:#4079FB;";        flag = 1;      }    }