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 相关文章推荐
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
微信小程序保存图片到相册权限设置
Apr 09 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP 危险函数全解析
2009/09/09 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
Python备份Mysql脚本
2008/08/11 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
建筑自我鉴定
2013/10/19 职场文书
网页美工求职信
2014/02/15 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
护士长竞聘书
2014/03/31 职场文书
新店开张活动方案
2014/08/24 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
2014年生产部工作总结
2014/12/17 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书