vue实例:标语大作战

京东与苏宁大战时,涌现了很多有意思的标语,本篇用vue实现两家的标语作战例子。效果如下:

效果图

具体代码

代码解析:

<div id="app">
    <div class="one">
        <h3 class="text-danger">{{ msg1 }}</h3>
        <div>
            <!-- 绑定点击事件, 对应于vue实例 methods 中的 start 方法 -->
            <button class="btn btn-danger" @click="start(1)">启动</button>
            <button class="btn btn-danger col-lg-offset-2" @click="stop(1)">停止</button>
        </div>
    </div>
    <br>
    <br>
    <div class="two">
        <h3 class="text-success">{{ msg2 }}</h3>
        <div>
            <button class="btn btn-success" @click="start(2)">start</button>
            <button class="btn btn-success col-lg-offset-2" @click="stop(2)">stop</button>
        </div>
    </div>
</div>
let vm = new Vue({
    el: "#app",
    data: {
        msg1: '又是一年双十一,干倒苏宁小猫咪!',
        msg2: '某东若是真的强,头条何须老板娘~~~',
        intervalId1: null, // 定时器
        intervalId2: null,
    },
    methods: {
        start(num) {
            let intervalId = 'intervarId' + num;
            let msg = 'msg' + num;

            // 判断是否正是运行,防止开启多个定时器
            if (this[intervalId] != null) {
                return;
            }
            
            // 设置定时器
            this[intervalId] = setInterval(() => {
                // 跑马灯效果:截取第一个字符拼接到最后一个字符
                let start = this[msg].substring(0, 1);
                let end = this[msg].substring(1);
                this[msg] = end + start;
            }, 300)
        },
        stop(num) {
            // 清除定时器
            let intervalId = 'intervarId' + num;
            clearInterval(this[intervalId]);
            this[intervalId] = null;
        }
    }
})

标语大作战

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据结构与算法

P1969 积木大赛

题目描述 春春幼儿园举办了一年一度的“积木大赛”。今年比赛的内容是搭建一座宽度为n的大厦,大厦可以看成由n块宽度为1的积木组成,第i块积木的最终高度需要是hi。...

35013
来自专栏后端技术探索

常见算法面试题

这几天在网上看到一篇关于算法面试题的博客,归纳的很好,有不少经典的题目,大部分来自《编程珠玑》、《编程之美》、《代码之美》三本书。这里给出书上的解答以及一些思考...

732
来自专栏趣谈编程

可以管理时间的二叉堆

面试官:写一个堆排吧 我心想:堆排是什么鬼 理解堆排,首先要理解二叉堆。理解了二叉堆的“下沉”操作,基本上就可以理解堆排了。今天我们来看一看什么是堆,以及堆...

1846
来自专栏海天一树

NOIP 2017普及组复赛C/C++详细题解报告

https://wenku.baidu.com/view/f3fe5a326ad97f192279168884868762cbaebb71.html?from=...

863
来自专栏Objective-C

iOS-逻辑思维面试题01

2778
来自专栏Android相关

处理器结构--PipeLine&SuperScalar

最初开始,指令一条一条顺序执行,后来当工艺进步了,CPU中的元件越来越多,而在原来的顺序执行的过程中,只有一条指令的某一个阶段在执行,如取指,取数据等等,其他元...

1054
来自专栏软件开发

C语言 经典编程100题

一、题目 【程序1】 题目:有1、2、3、4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? ===========================...

2587
来自专栏PHP技术

坐在马桶上看算法(2):邻居好说话,冒泡排序

原文出处: 纪磊 简化版的桶排序不仅仅有上一节所遗留的问题, 更要命的是:它非常浪费空间!例如需要排序数的范围是0~2100000000之间,那你则需要申请2...

2836
来自专栏Python爱好者

Python高效编程(二)

1284
来自专栏菜鸟前端工程师

JavaScript学习笔记005-运算符

642

扫码关注云+社区