js 文字逐个弹出

最新推荐文章于 2024-07-01 15:03:17 发布

想喝橙汁儿

最新推荐文章于 2024-07-01 15:03:17 发布

阅读量1.4k

点赞数

分类专栏： vue js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46328144/article/details/128022640

版权

vue 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

js 文字逐个弹出

data: 中定义contex：‘’
created中调用showText,
参数：‘需要逐个弹出的文字’

methods:

// 文字逐个出现
    showText(text){
      this.context = '';
      var speed = 200 ;//定时的速度
      var count = 1;
      clearTimeout(this.timer)
      this.context = this.changeContent(text,speed,count)
    },
    // 文字逐个出现  text:文字   speed 定时的速度 
    changeContent(text,speed,count){
      var num = count;
      const _this = this;
      this.context = text.substring(0,num)
      num++;
      if(num < text.length+1){
        this.timer = setTimeout(() => {
          _this.changeContent(text,speed,num)
        }, speed);
      }
    },