1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <script src="../Vue/vue.js"></script>
  9. <link href="lib/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
  10. <title>跑马灯</title>
  11. <style type="text/css">
  12. #app button {
  13. outline: none;
  14. }
  15. </style>
  16. </head>
  17.  
  18. <body>
  19. <div id="app" style="margin: 20px">
  20. <button class="btn btn-info" @click='lang'>飞的速度</button>
  21. <button class="btn btn-info" @click='stop'>猥琐发育</button>
  22. <div>
  23. <h4 style="color: red">{{msg}}</h4>
  24. <img src="buxiang.jpeg" alt="">
  25. </div>
  26.  
  27. </div>
  28. <script>
  29. var ve = new Vue({
  30. el: '#app',
  31. data: {
  32. msg: '只有飞速的旋转,才可以止住为的泪水,忘记你的模样。。。',
  33. intervalId: null,
  34. },
  35. methods: {
  36. // 动起来
  37. lang() {
  38. if (this.intervalId != null) return;
  39. this.intervalId = setInterval(() => {
  40. // 获取第一个字符
  41. var start = this.msg.substring(0, 1)
  42. // 获取第一个字符后面的所有字符
  43. var end = this.msg.substring(1)
  44.  
  45. this.msg = end + start
  46.  
  47. }, 300)
  48. },
  49. // 停止运动
  50. stop() {
  51. clearInterval(this.intervalId)
  52. // 重新赋值null
  53. this.intervalId = null
  54. }
  55. }
  56. })
  57. </script>
  58. <script src="lib/jquery/jquery-3.4.1.js"></script>
  59. <script src="lib/bootstrap-3.3.7/js/bootstrap.js"></script>
  60. </body>
  61.  
  62. </html>

效果

Vue-使用计时器实现跑马灯效果的更多相关文章

  1. vue制作滚动条幅-跑马灯效果实例代码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 第二章 Vue快速入门--10-11 跑马灯效果制作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. Vue学习笔记四:跑马灯效果

    目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...

  4. vue实现跑马灯效果

    vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...

  5. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  6. VUE小案例--跑马灯效果

    自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...

  7. vue学习第二天:Vue跑马灯效果制作

    分析: 1. 给开始按钮绑定一个点击事件 2.在按钮的事件处理函数中,写相关的业务代码 3.拿到msg字符串 4.调用字符串的substring来进行字符串的截取操作 5.重新赋值利用vm实例的特性来 ...

  8. Dom操作--跑马灯效果

    这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...

  9. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

随机推荐

  1. SpringBoot中使用Maven插件,上传docker镜像

    开启docker远程端口 我上一篇里面写了,这里暴露的路径: 18.16.202.95:2375 简单构建 配置pom.xml文件 在properties中增加一行指定远程主机的位置 <prop ...

  2. ManiFest.MF

    Manifest-Version: 1.0 //指定manifest文件的版本信息 Bundle-ManifestVersion: 2 //指定该包遵从 OSGi 规范 V3 或者 OSGi 规范 V ...

  3. Mongo DB 下载安装

    目录 1.下载MongoDB 2.启动MongoDB 3.添加环境变量,添加启动服务 4.MongoDB操作 1.创建用户以及权限控制: 1.下载MongoDB MongoDB的官网 简单下载方法 w ...

  4. ASP.NET Core 简介

    .NET Core 是 .NET Framework 的新一代版本,是微软开发的第一个具有跨平台 ( Windows.Mac OSX .Linux ) 能力的应用程序开发框 ASP.NET Core ...

  5. Python 和 Flask 设计 RESTful API

    #!flask/bin/python from flask import Flask, jsonify from flask import make_response app = Flask(__na ...

  6. .net项目发布到iis

    参考: https://www.cnblogs.com/teyigou/p/8125379.html https://www.cnblogs.com/kissfu/p/6399472.html htt ...

  7. Docker ubuntn 使用apt-get update报错

    在docker 容器中执行apt-get update有时候会报错,当然造成错误的原因有很多情况,具体情况具体分析, APT Hash sum mismatch错误的常见解决方法总结这篇博客写的不错, ...

  8. Golang微服务实践

    背景 在之前的文章<漫谈微服务>我已经简单的介绍过微服务,微服务特性是轻量级跨平台和跨语言的服务,也列举了比较了集中微服务通信的手段的利弊,本文将通过RPC通信的方式实现一个增删查Redi ...

  9. MySQL5.7调优参数

    1. 更改MySQL Data File位置 datadir=/data/mysqlsocket=/data/mysql/mysql.sock 2. 调整OS参数 * soft nproc 10240 ...

  10. 使用vue搭建应用三引入scss

    Css.Sass.Scss的含义及区别 Css(Cascading Style Sheets) 层叠样式表 Sass(Syntactically Awesome StyleSheets) 是一款强化 ...