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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

android的适配方法

首先要介绍一下drawable-mdpi、drawable-hdpi-1280x800、drawable-hdpi。这个相信好好看一下也明白。就是代表着分辨率 ...

2067
来自专栏做全栈攻城狮

小白学编程实战项目-利用Winform开发美女音乐播放器

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉C#技术。其中基础部分已经讲解完毕,可以查看:电脑编程入门(10)-C#面向对象编程浅聊,...

1643
来自专栏技术小黑屋

Android UI之自定义Window Title样式

Android提供了很多控件便于开发者进行UI相关的程序设计。但是很多时候,默认的一些UI设置不足以满足我们的需求,要么不好看,要么高度不够,亦或者是与应用界面...

1431
来自专栏小特工作室

WinForm中播放视频示例(含源码)

1背景 这几天一老友要求我做个小软件,在WinForm播放视频.印象中微软有个WM控件直接可以使用,晚上研究下 2实现方式 2.1微软草根 最简单的方式,是...

2066
来自专栏程序员的诗和远方

写个小编辑器娱乐自己

上周有两天感冒低烧了,躺在床上昏昏沉沉听罗胖的发布会,说到《黑天鹅》书中的一句话:现代社会给我们的双重惩罚是,既让我们衰老的更快,又让我们活得更长。深有同感,...

3177
来自专栏互联网杂技

20个为前端开发者准备的文档和指南7

1. DevTools Challenger 它是一个交互式的站点,演示了如何在Firefox开发者版本里使用其拥有的新的相关动画功能。 ? 2. The HT...

3545
来自专栏杨俊标的专栏

【HTML插件】帮你100%还原设计

Contrast.js插件主要用于检验移动端Web重构还原度,由于大部分设计稿是基于iPhone6以上(1334 x 750)设计的,所以该插件比较适合用iPh...

2132
来自专栏iOSDevLog

资源

1.4K15
来自专栏姬小光

姬小光前端兴趣班【第008期】- 真正的切图大法

上一期我们使用了 word 转存大法来生成网页,主要是为了帮助大家理解表格布局的原理。那么今天我们就来学习一下真正的切图大法。

1112
来自专栏IT派

5月份GitHub上最热门的JavaScript项目

本篇文章为大家盘点了5月份最热门的 JavaScript 项目,一起来看看你都知道哪些,或者有哪些你已经在使用的了。

1192

扫码关注云+社区