Vue-使用计时器实现跑马灯效果
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <script src="../Vue/vue.js"></script>
- <link href="lib/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
- <title>跑马灯</title>
- <style type="text/css">
- #app button {
- outline: none;
- }
- </style>
- </head>
- <body>
- <div id="app" style="margin: 20px">
- <button class="btn btn-info" @click='lang'>飞的速度</button>
- <button class="btn btn-info" @click='stop'>猥琐发育</button>
- <div>
- <h4 style="color: red">{{msg}}</h4>
- <img src="buxiang.jpeg" alt="">
- </div>
- </div>
- <script>
- var ve = new Vue({
- el: '#app',
- data: {
- msg: '只有飞速的旋转,才可以止住为的泪水,忘记你的模样。。。',
- intervalId: null,
- },
- methods: {
- // 动起来
- lang() {
- if (this.intervalId != null) return;
- this.intervalId = setInterval(() => {
- // 获取第一个字符
- var start = this.msg.substring(0, 1)
- // 获取第一个字符后面的所有字符
- var end = this.msg.substring(1)
- this.msg = end + start
- }, 300)
- },
- // 停止运动
- stop() {
- clearInterval(this.intervalId)
- // 重新赋值null
- this.intervalId = null
- }
- }
- })
- </script>
- <script src="lib/jquery/jquery-3.4.1.js"></script>
- <script src="lib/bootstrap-3.3.7/js/bootstrap.js"></script>
- </body>
- </html>
效果
Vue-使用计时器实现跑马灯效果的更多相关文章
- vue制作滚动条幅-跑马灯效果实例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue学习笔记四:跑马灯效果
目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...
- vue实现跑马灯效果
vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- vue学习第二天:Vue跑马灯效果制作
分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...
- Dom操作--跑马灯效果
这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...
- TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
随机推荐
- SpringBoot中使用Maven插件,上传docker镜像
开启docker远程端口 我上一篇里面写了,这里暴露的路径: 18.16.202.95:2375 简单构建 配置pom.xml文件 在properties中增加一行指定远程主机的位置 <prop ...
- ManiFest.MF
Manifest-Version: 1.0 //指定manifest文件的版本信息 Bundle-ManifestVersion: 2 //指定该包遵从 OSGi 规范 V3 或者 OSGi 规范 V ...
- Mongo DB 下载安装
目录 1.下载MongoDB 2.启动MongoDB 3.添加环境变量,添加启动服务 4.MongoDB操作 1.创建用户以及权限控制: 1.下载MongoDB MongoDB的官网 简单下载方法 w ...
- ASP.NET Core 简介
.NET Core 是 .NET Framework 的新一代版本,是微软开发的第一个具有跨平台 ( Windows.Mac OSX .Linux ) 能力的应用程序开发框 ASP.NET Core ...
- Python 和 Flask 设计 RESTful API
#!flask/bin/python from flask import Flask, jsonify from flask import make_response app = Flask(__na ...
- .net项目发布到iis
参考: https://www.cnblogs.com/teyigou/p/8125379.html https://www.cnblogs.com/kissfu/p/6399472.html htt ...
- Docker ubuntn 使用apt-get update报错
在docker 容器中执行apt-get update有时候会报错,当然造成错误的原因有很多情况,具体情况具体分析, APT Hash sum mismatch错误的常见解决方法总结这篇博客写的不错, ...
- Golang微服务实践
背景 在之前的文章<漫谈微服务>我已经简单的介绍过微服务,微服务特性是轻量级跨平台和跨语言的服务,也列举了比较了集中微服务通信的手段的利弊,本文将通过RPC通信的方式实现一个增删查Redi ...
- MySQL5.7调优参数
1. 更改MySQL Data File位置 datadir=/data/mysqlsocket=/data/mysql/mysql.sock 2. 调整OS参数 * soft nproc 10240 ...
- 使用vue搭建应用三引入scss
Css.Sass.Scss的含义及区别 Css(Cascading Style Sheets) 层叠样式表 Sass(Syntactically Awesome StyleSheets) 是一款强化 ...