Vue 使用计时器实现跑马灯效果的实例代码

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="external nofollow" 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 使用计时器实现跑马灯效果的实例代码 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue 计时器组件的实现代码

    整理文档,搜刮出一个vue 计时器组件的代码,稍微整理精简一下做下分享. <template> <div> <span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal" >{{countString}}</span> </div> </template> <script> ex

  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果的实例代码

    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="

  • vue+animation动画实现跑马灯效果

    vue+animation动画实现跑马灯效果

    本文实例为大家分享了vue+animation动画实现跑马灯效果的具体代码,供大家参考,具体内容如下 1.单行显示,每行只显示一条 效果图 上代码 <template>   <div class="container">     <div class="box">       <!-- 假设lists列表有4个项,设置ul的宽度为800%(相对于box),设置li的宽度为12.5%(相对于ul是12.5%:相对于box是10

  • vue实现简单的跑马灯效果

    vue实现简单的跑马灯效果

    本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 效果图 代码 html <div id="app"> <button @click="start">开启</button> <button @click="stop">停止</button> <p>{{msg}}</p> </div> vue var app = new

  • Unity实现跑马灯效果的示例代码

    Unity实现跑马灯效果的示例代码

    目录 一.效果 二.需要动画插件DOTween 三.脚本 1.每个格子上的脚本文件 2.管理脚本文件 一.效果 二.需要动画插件DOTween 下载地址 三.脚本 1.每个格子上的脚本文件 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using DG.Tweening; public class MarqueeUIItem : MonoBe

  • C#实现跑马灯效果的示例代码

    C#实现跑马灯效果的示例代码

    目录 文章描述 开发环境 开发工具 实现代码 实现效果 文章描述 跑马灯效果,功能效果大家应该都知道,就是当我们的文字过长,整个页面放不下的时候(一般用于公告等),可以让它自动实现来回滚动,以让客户可以看到完整的信息(虽然要多等一会儿时间). 其实对于Winform这种技术,实现任何的动态效果相对来说都比较麻烦.而且一般都需要搭配定时器使用,当然,这次要写的跑马灯效果也是一样的,使用了System.Timers.Timer来实现,关于其他定时器以及用法,之前文章有写过,有兴趣的可以翻一下. 因为

  • vue实现表格增删改查效果的实例代码

    vue实现表格增删改查效果的实例代码

    整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享. 实现效果 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', p

  • Vue实现Header渐隐渐现效果的实例代码

    新建header.vue组件 引入到父组件Detail.vue中 header.vue 通过router-link标签设置to属性为地址,实现点击返回首页 tag标签设为div,就有了div的属性 <template> <div class="header"> <router-link tag="div" to="/" class="header-abs"> <div class=&q

  • Js和VUE实现跑马灯效果

    本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码,供大家参考,具体内容如下 一.js实现跑马灯 1.效果图 视频上传不了,只能看图片了 2. 设计思路 使用截取字符串的方法,首先获取文本的值,再分别截取文本的第一个字符串和剩余的字符串,然后重新拼接一个新的字符串,最后把这个新字符串赋值给文本,代码如下: var value=cont.innerHTML; var start=value.substring(0,1);//截取第一个字符串 var end=value.substring

  • Vue实现跑马灯效果

    本文实例为大家分享了Vue实现跑马灯效果的具体代码,供大家参考,具体内容如下 实现的业务逻辑 1.给[嗨起来]按钮,绑定一个点击事件 v-on(@). 2.在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个位置. 3.为了实现点击下按钮,自动截取功能,需要将步骤2中代码放到一个定时器中. 实现代码如下: <!DOCTYPE html> <html lang="en"> <he

  • vue实现简单跑马灯效果

    本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 如下图片,会自行向 上"滚动" 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯 </title> <script src="https://cdn.bootcss.com/

随机推荐