您正在使用IPV4(3.92.28.52)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】爆款1核2G云服务器首年48元,还有iPad Pro、Bose耳机、京东卡等你来抽!      
虚位以待
2021年 冬至节 20
2021年 圣诞节 24
2022年 元 旦 31
2022年 春 节 62
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    Vue实现跑马灯简单效果
    内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'title跑马灯/title!--引入vue.js文件--scriptsrc='../vue.js'/scriptstyletype='text/css'#app{padding:20px;[email protected].....
    <!DOCTYPEhtml>

    <htmllang="en">

    <head>

    <metacharset="UTF-8">

    <title>跑马灯</title>

    <!--引入vue.js文件-->

    <scriptsrc="../vue.js"></script>

    <styletype="text/css">

    #app{

    padding:20px;

    }

    </style>

    </head>

    <body>

    <divid="app">

    <[email protected]="run">应援</button>

    <[email protected]="stop">暂停</button>

    <h3>{{msg}}</h3>

    </div>

    <script>

    newVue({

    el:"#app",

    data:{

    msg:"朋友朋友我爱你,就像老鼠爱大米~~~!",

    timer:null//在data上定义定时器timer,默认为null

    },

    methods:{

    run(){

    //如果timer已经赋值就返回

    if(this.timer){return};

    this.timer=setInterval(()=>{

    //msg分割为数组

    vararr=this.msg.split('');

    //shift删除并返回删除的那个,push添加到最后

    //把数组第一个元素放入到最后面

    arr.push(arr.shift());

    //arr.join('')吧数组连接为字符串复制给msg

    this.msg=arr.join('');

    },100)

    },

    stop(){

    //清除定时器

    clearInterval(this.timer);

    //清除定时器之后,需要重新将定时器置为null

    this.timer=null;

    }

    }

    })

    </script>

    </body>

    </html>

    版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:纯CSS3打造精致时钟 下一篇:jquery判断密码强度的验证代码
    发布日期:2021/10/29
    手机扫二维码直达本页
    发布时间:13:25:55
    点击:242
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.0.9.10888 Build 21.11.30(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
    ©2000-2021