Js和VUE实现跑马灯效果


Posted in Javascript onMay 25, 2020

本文实例为大家分享了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>

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

Javascript 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
Vue实现简单的跑马灯
May 25 #Javascript
Vue实现跑马灯效果
May 25 #Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 #Javascript
ES2020 已定稿,真实场景案例分析
May 25 #Javascript
Javascript原型链及instanceof原理详解
May 25 #Javascript
Node登录权限验证token验证实现的方法示例
May 25 #Javascript
详解Node.js使用token进行认证的简单示例
May 25 #Javascript
You might like
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
PHP查询网站的PR值
2013/10/30 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
AJAX在JQuery中的应用详解
2019/01/30 jQuery
Vue组件基础用法详解
2020/02/05 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python 运算符 供重载参考
2009/06/11 Python
Python 开发Activex组件方法
2009/11/08 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
深入分析python 排序
2020/08/24 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
我的动漫时代的创业计划书范文
2014/01/27 职场文书
保护环境演讲稿
2014/05/10 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
学校捐款活动总结
2015/05/09 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python