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全局变量var与不var的区别深入解析
Dec 09 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
深入理解Node module模块
Mar 26 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP模板解析类实例
2015/07/09 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
js实现窗口全屏示例详解
2019/09/17 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
三维科技面试题
2013/07/27 面试题
师范生教师实习自我鉴定
2013/09/27 职场文书
离职保密承诺书
2014/05/28 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
舞出我人生观后感
2015/06/16 职场文书
关于运动会的广播稿
2015/08/19 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技