Lsw7777777
2020-12-15 14:08
采纳率: 94.7%
浏览 722

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

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

我用vue的,有没有什么比较好用的方法?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 编程界明世隐 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>

    打赏 评论
  • 把字符串分割成数组,然后写个定时器,往数组里push就行

    1 1 打赏 评论
  • TheWaSaiBoy 2020-12-15 16:20

    css里面有改变div长度的动画,可以用。css再设置这个div的内容溢出隐藏!!!

    打赏 评论
  • 1 打赏 评论

相关推荐 更多相似问题