实现文字跑马灯效果，首先用到 substring()截取 和 setInterval计时器 clearInterval()清除计时器

效果如下：

实现代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>跑马灯效果</title>
  9.     <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"
  10.         type="application/javascript"></script>
  11. </head>
  13. <body>
  14.     <div id="app">
  15.         <button @click="lang">开始</button>
  16.         <button @click="stop">结束</button>
  18.         <h1> {{pao}} </h1>
  19.     </div>
  21.     <script>
  22.         let vm = new Vue({
  23.             el: "#app",
  24.             data() {
  25.                 return {
  26.                     pao: '这是一个会跑的文字~~~~~~',
  27.                     setInterval: null
  28.                 }
  29.             },
  30.             methods: {
  31.                 lang() {
  32.                     //阻止lang再次执行
  33.                     if (this.setInterval != null) return
  34.                     // 使用substring截取字符串
  35.                     this.setInterval = setInterval(() => {
  36.                         console.log(this.pao);
  37.                         //获取头一个 字符
  38.                         let qian = this.pao.substring(0, 1)
  39.                         //获取后面的所以字符
  40.                         let hou = this.pao.substring(1)
  41.                         //将获取到的字符拼接起来
  42.                         this.pao = hou + qian
  43.                     }, 300)
  44.                 },
  45.                 stop() {
  46.                     clearInterval(this.setInterval)
  47.                     //每次清除计时器是 将setInterval 重新赋值为 null
  48.                     this.setInterval = null
  49.                 }
  51.             }
  52.         })
  53.     </script>
  54. </body>
  56. </html>

以上是实现文字跑马灯效果，如有不足的地方，欢迎在评论区留言。

使用Vue.js实现文字跑马灯效果的更多相关文章

  1. Android开发：文本控件详解——TextView（二）文字跑马灯效果实现

    一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...

  2. 用jQuery实现参数自定义的文字跑马灯效果

    一,明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置 ...

  3. JavaScript小实例-文字跑马灯效果

    我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...

  4. js实现横向跑马灯效果

    首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...

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

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

  6. vue文字跑马灯效果

    https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...

  7. VUE之文字跑马灯效果

    VUE之文字跑马灯效果 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> <me ...

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

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

  9. 实现一个微信小程序组件：文字跑马灯效果

    marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...

  10. [转]实现文字跑马灯效果，scrolling text from right to left

    <div> <marquee direction="left" behavior="scroll" scrollamount="10 ...

随机推荐

  1. kubectl命令详解

    一.kubectl 基本命令 1.陈述式资源管理方法: 1.kubernetes集群管理集群资源的唯一入口是通过相应的方法调用apiserver的接口 2.kubectl 是官方的CLI命令行工具,用 ...

  2. 基于百度智能云api下的车牌识别系统

    车牌识别在高速公路中有着广泛的应用,比如我们常见的电子收费(ETC)系统和交通违章车辆的检测,除此之外像小区或地下车库门禁也会用到,基本上凡是需要对车辆进行身份检测的地方都会用到. 简介 车牌识别系统 ...

  3. squad经验总结

    啊美丽卡:M1A2 - TANKM2A3 - BLDL/M2A3M1126 - SCKMATV - RWS(电摇),ZCC(手摇)MATV(TOW) - TOW车M989 - 补给卡/运兵卡 俄军 8 ...

  4. nRF52832出现“APP_UART_COMMUNICATION_ERROR”的错误的问题

    在调试nRF52832的uart的过程中,发现调试信息会时不时打印"APP_UART_COMMUNICATION_ERROR"这个错误,看上去似乎毫无规律.查看SDK的相关说明,可 ...

  5. Sql Server代理作业、定时任务

    需求: 本次需求为每15分钟获取一次思路为,创建结果表,代理作业定时更新数据并存入结果表,后端只需要调用结果表数据数据,如果超期不同的天数则给出不同的提示信息,因为没有触发点,所以用到了本文内容. 右 ...

  6. linux离线安装插件包

    1.下载插件包(联网的linux环境下) # 检查是否安装了vim(vim-minimal是vi) [root@localhost opt]# rpm -qa | grep vim vim-minim ...

  7. loadrunner添加/清除 cookies

    web_add_cookie("reloadCount=1;domain={Host}"); 清除 cookies web_cleanup_cookies():

  8. 7. 基础增删改 - 使用Portal Webapi进行会员信息的增删改

    我们可以通过使用Portal Web API在Portal页面中跨所有Microsoft Dataverse表执行创建.更新和删除操作,下面我们就一起来看一下如何通过使用AJAX函数来进行操作. AJ ...

  9. ssh基于主机名访问

    登录一台服务器我们可以用ssh user@IP这种方式 还有一种快捷的方式,就是基于主机名访问,这需要先配置 /etc/hosts文件 假如我们又两台主机 192.168.75.131/165 分别为 ...

  10. C++编码注意事项

    1. vector,string不能按位赋值(vector用push_back, string用重载"+"号)