简单的跑马灯效果-JavaScript-vue

最新推荐文章于 2024-08-18 10:54:05 发布

你怎么看我

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量153

点赞数

分类专栏： js效果文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_43520419/article/details/108052276

版权

js效果专栏收录该内容

2 篇文章 0 订阅

订阅专栏

跑马灯

用一矩形条显示用户特别关心的信息，这条信息串首尾相连，向一个方向循环滚动。

原理

将字符串第一个字符分割连接到剩下字符串的末尾，用setinterval方法实现流动效果

简单的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="run" @click="lang">
        <h1>{{msg}}</h1>
    </div>
    <script>
        var run=new Vue({
            el:'#app',
            data:{
                msg:"不要怂，一起上！"
            },
            methods:{
                lang(){
                    setInterval(() => {
                    console.log(this.msg);
                    var start=this.msg.substring(0,1);
                    var end=this.msg.substring(1);
                    this.msg=end+start;
                }, 400);
                }
                
            }
        })
    </script>
    <style>
        #app{
            text-align:center;
        }
    </style>
</body>
</html>

效果

点击run使文字流动，实现跑马灯效果！
在这里插入图片描述

你怎么看我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的跑马灯效果-JavaScript-vue

这里写自定义目录标题跑马灯相关知识点原理简单的代码效果跑马灯用一矩形条显示用户特别关心的信息，这条信息串首尾相连，向一个方向循环滚动。相关知识点1、字符串分割方法：str.substring();2、setinterval方法原理将字符串第一个字符分割连接到剩下字符串的末尾，用setinterval方法实现流动效果简单的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-
复制链接

扫一扫