Java永远的神_ 2020-12-15 14:08 采纳率: 97.7%
浏览 2572
已采纳

前端项目，怎么实现文字逐个出现的效果？

接受了个新项目 有个需求是文字一个个逐个显示出来，网上找的都是些很老的方法，很多也不好直接复制。

我用vue的，有没有什么比较好用的方法？

  • 写回答

4条回答 默认 最新

  • weixin_74836531 2020-12-15 21:47
    关注

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="GBK">
            <title></title>
        </head>
     
        <body>
            <div id="app">
                <button @click="attack">骑兵连进攻</button>
                <button @click="retreat">骑兵连撤退</button>
                <h3>{{content}}</h3>
            </div>
        </body>
        <script src="vue.js"></script>
        <script>
           var vm = new Vue({
                el: '#app',
                data: {
                    timer:null,
                    content:'狼行千里吃肉，狗行千里吃屎，我独立团到哪都是嗷嗷叫的野狼！进攻进攻！！！'
                },
                methods:{
                    attack:function(){
                        var that=this;
                        //清除定时器，防止重复点击
                        clearInterval(that.timer);
                        that.timer=setInterval(function(){
                            //that.content.substr(1) ==> 取到content第1位到结尾的内容（不包含第1位）
                            //that.content.substr(0,1) ==> 取到content的第1位
                            //将以上2个内容想连接赋值给 Content
                            that.content =that.content.substr(1) + that.content.substr(0,1);
                        },400);
                        //也可以改成箭头函数，这样就无需把this赋值改成that
                        /*this.timer=setInterval(()=>{
                            this.content =this.content.substr(1) + this.content.substr(0,1);
                        },600);*/
                        
                        
                    },
                    retreat:function(){
                        clearInterval(this.timer);//停止定时器
                    }
                }
            });
            
        </script>
    </html>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 宇视监控服务器无法登录
  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥15 DruidDataSource一直closing
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据，但连接进去后显示表无数据