JavaScript实现的打字机效果

最新推荐文章于 2024-05-12 09:42:23 发布

wizardAEI

最新推荐文章于 2024-05-12 09:42:23 发布

阅读量2.4k

点赞数 9

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

本文链接：https://blog.csdn.net/qq_37360324/article/details/115736252

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

html：

<!DOCTYPE html>
<html lang="ch-ZN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入js-->
    <script src="./typewriter.js"></script>
    <!--采用flex布局-->
    <style>
        html{font: 15px;}
        html,body{height: 100%;}
        .boxtype{
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 490px;
            height: 672px;
            background-repeat: no-repeat;
            background-size: cover;
            position: fixed;
            /*背景*/
            background-image: url(./img/flower.jpg);
        }
        /*毛玻璃样式*/
        #box1{
            color: rgb(27, 26, 23);
            padding: 2%;
            width: 330px;
            height: 400px;
            background: rgba( 255, 255, 255, 0.25 );
            box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
            backdrop-filter: blur( 4px );
            -webkit-backdrop-filter: blur( 4px );
            border-radius: 10px;
            border: 1px solid rgba( 255, 255, 255, 0.18 );
        }
    </style>
</head>
<body>
    <div class="boxtype">
        <div id="box1"></div>
    </div>
</body>
</html>

JS：

 //str填充内容，利用<作为换行符
 let str="......她喜欢吃辣，喜欢卤味，最喜欢螺蛳粉,她的麻辣烫和烤鱼里总要放一块面，她喜欢在风景好的地方相遇。<她喜欢奶茶，有时候是奶绿，有时候是奶盖，有时候是霓裳茶舞，她要的只是三分糖，可以加的是珍珠。<她喜欢水果捞,爱加酸奶和芋圆，不喜欢水果捞里的爆珠，可以放烧仙草但不会加椰果。<......我的记性很差，所以每次发消息都会下意识地先点到你的聊天框，然后再想起来要做什么。<......后来才发现，不知从什么时候开始，我的生活已经全部都倾倒在细雨和花丛中。";
 let strp="";
 let i=0;
 /**
  * 打字效果
  */
 function print1()
 {
     if(str[i]!='<')
     {
         strp+=str[i];
         document.getElementById("box1").innerHTML=strp+'|';
     }
     else
     {
         document.getElementById("box1").innerHTML=strp+"<br><br>"+'|';
         strp+="<br><br>";
     }
     i++;
 }

 /**
  * print2作为最后的光标闪动的效果
  */
 function print2()
 {
     setTimeout(()=>{document.getElementById("box1").innerHTML=strp+' ';},100);
     setTimeout(()=>{document.getElementById("box1").innerHTML=strp+'|';},630);
 }

 /**
  *setInterval函数控制打字速度
  */
 let printid=setInterval(() => {
     print1();
     if(i==str.length)
     clearInterval(printid);
 },90);  
 
 /**
  * 光标闪动速度，默认模拟电脑正常光标闪动，0.53秒闪一次
  */
 setTimeout(() => {
     id=setInterval(print2,1060);//注意setInterval内部直接写函数的时候是直接写函数名不加括号的。
 },(str.length-1)*90);
 //

相关注释已经写在代码里。
有不懂的代码块和实现效果可以私聊我和评论。
CSS部分在style里。

图片是在unsplash找的。

希望你会喜欢。

wizardAEI

关注

9
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
2
评论
JavaScript实现的打字机效果

html：<!DOCTYPE html><html lang="ch-ZN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti.
复制链接

扫一扫