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

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

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

我用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 stc15f2k60s2单片机关于流水灯,时钟,定时器,矩阵键盘等方面的综合问题
  • ¥15 YOLOv8已有一个初步的检测模型,想利用这个模型对新的图片进行自动标注,生成labellmg可以识别的数据,再手动修改。如何操作?
  • ¥30 NIRfast软件使用指导
  • ¥20 matlab仿真问题,求功率谱密度
  • ¥15 求micropython modbus-RTU 从机的代码或库?
  • ¥15 django5安装失败
  • ¥15 Java与Hbase相关问题
  • ¥15 后缀 crn 游戏文件提取资源
  • ¥20 bash代码推送不上去 git fetch origin master #失败了
  • ¥15 LOL外服加入了反作弊系统,现在游戏录像rofl文件离线都无法打开