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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js 图片缩放(按比例)控制代码
May 27 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
vue-router的两种模式的区别
May 30 Javascript
用Node写一条配置环境的指令
Nov 14 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与XML的PDF文档生成技术
2006/10/09 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
JavaScript 无符号右移运算符
2009/04/17 Javascript
javascript 写类方式之九
2009/07/05 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
js实现随机抽奖
2020/03/19 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python处理csv数据的方法
2015/03/11 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python实现图片中文字分割效果
2019/07/22 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
软件测试面试题
2014/01/05 面试题
销售员自我评价怎么写
2013/09/19 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
大学生创业策划书
2014/02/02 职场文书
语文教育专业求职信
2014/06/28 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
学生犯错保证书
2015/05/09 职场文书
工作态度怎么写
2015/06/25 职场文书
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS