欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Js和VUE实现跑马灯效果

程序员文章站 2022-04-09 16:13:02
本文实例为大家分享了js和vue分别实现跑马灯效果的具体代码,供大家参考,具体内容如下一、js实现跑马灯1.效果图视频上传不了,只能看图片了2. 设计思路使用截取字符串的方法,首先获取文本的值,再分别...

本文实例为大家分享了js和vue分别实现跑马灯效果的具体代码,供大家参考,具体内容如下

一、js实现跑马灯

1.效果图

Js和VUE实现跑马灯效果

视频上传不了,只能看图片了

2. 设计思路

使用截取字符串的方法,首先获取文本的值,再分别截取文本的第一个字符串和剩余的字符串,然后重新拼接一个新的字符串,最后把这个新字符串赋值给文本,代码如下:

var value=cont.innerhtml;
var start=value.substring(0,1);//截取第一个字符串
var end=value.substring(1);//截取剩余的字符串
var result=end+start;//拼接一个新的字符串
cont.innerhtml=result;//把新字符串赋值给p标签

使用计时器setinterval( )方法来设置时间重复执行

t=setinterval(function(){
 var value=cont.innerhtml;
 var start=value.substring(0,1);//截取第一个字符串
 var end=value.substring(1);//截取剩余的字符串
 var result=end+start;//拼接一个新的字符串
 cont.innerhtml=result;//把新字符串赋值给p标签
 },500);

setinterval( )返回一个整数类型的数,然后把这个数赋值给clearinterval( )让计时器停止

clearinterval(t);

然后点击开始按钮,跑马灯走起;点击停止按钮,跑马灯停止

start.onclick=function(){
 clearinterval(t);//防止多次点击,而创建多个计时器
 t=setinterval(function(){
 var value=cont.innerhtml;
 var start=value.substring(0,1);//截取第一个字符串
 var end=value.substring(1);//截取剩余的字符串
 var result=end+start;//拼接一个新的字符串
 cont.innerhtml=result;//把新字符串赋值给p标签
 },500); 
 }
 stop.onclick=function(){
 clearinterval(t);
 }

3. 整体代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>document</title>
 <style>
 *{
 margin:0px;
 padding:0px;
 }
 .box{
 width:300px;
 margin:50px auto;
 }
 .content{
 margin-bottom:20px;
 }
 </style>
</head>
<body>
 <div class="box">
 <p class="content">生命永无止境~~~</p>
 <button class="start">跑马灯走起</button>
 <button class="stop">跑马灯停止</button>
 </div>
 
 <script>
 var cont=document.queryselector(".content");
 var start=document.queryselector(".start");
 var stop=document.queryselector(".stop");
 var t;
 start.onclick=function(){
 clearinterval(t);//防止多次点击,而创建多个计时器
 t=setinterval(function(){
 var value=cont.innerhtml;
 var start=value.substring(0,1);//截取第一个字符串
 var end=value.substring(1);//截取剩余的字符串
 var result=end+start;//拼接一个新的字符串
 cont.innerhtml=result;//把新字符串赋值给p标签
 },500); 
 }
 stop.onclick=function(){
 clearinterval(t);
 }
 </script>
</body>
</html>

二. vue实现跑马灯

话不多说,直接上代码了:

<template>
 <div>
 <p>{{message}}</p>
 <button @click="start" class="start">跑马灯走起</button>
 <button @click="stop" class="stop">跑马灯停止</button>
 </div>
</template>
<script>
export default {
 data(){
 return{
 message:"生命永无止境~~~~",
 t:null
 }
 },
 methods:{
 start(){
 clearinterval(this.t);//防止多次点击而创建多个计时器
 this.t=setinterval(()=>{
 var start=this.message.substring(0,1);//截取第一个字符串
 var end=this.message.substring(1);//截取剩余的字符串
 this.message=end+start;
 },500)
 },
 stop(){
 clearinterval(this.t);
 }
 }
}
</script>
<style scoped>

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。