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 相关文章推荐
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
详解ES6中的let命令
Apr 05 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 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
15种PHP Encoder的比较
2007/04/17 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php使用curl访问https示例分享
2014/01/17 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP队列用法实例
2014/11/05 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python中的并发编程实例
2014/07/07 Python
Python使用chardet判断字符编码
2015/05/09 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
详解Python_shutil模块
2019/03/15 Python
Python----数据预处理代码实例
2019/03/20 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
求职信格式范本
2013/11/15 职场文书
社区八一活动方案
2014/02/03 职场文书
机关节能减排实施方案
2014/03/17 职场文书
商铺租房协议书范本
2014/12/04 职场文书
python之基数排序的实现
2021/07/26 Python