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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
深入理解js中this的用法
May 28 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
vue实现二级导航栏效果
Oct 19 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的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
LayUI表格批量删除方法
2018/08/15 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
Python通过poll实现异步IO的方法
2015/06/04 Python
Python中str.join()简单用法示例
2018/03/20 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python实现高斯投影正反算方式
2020/01/17 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
美国最大点评网站:Yelp
2018/02/14 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
如何写好自荐信
2014/04/07 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
收款委托书范本
2014/09/11 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL