vue 简单上下跳动，可用于时间背景水印

<template>
<view class="content">
<image class="logo" src="/static/logo.png" :style="{top:(time1+time2)*5+'px'}"></image>
<view class="text-area">
<text class="title">{{(time1+time2)*5}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
top2: true,
time1 : 0,
time2 : 0,
}
},
onUnload() {
},
onLoad() {
setInterval(() => {
this.run()
}, 1000)
},
methods: {
run() {
let data = new Date()
let sec = data.getSeconds()
if(this.top2){
this.time2 = sec
}else{
this.time2 = -sec
}
if(sec>=59){
this.top2 = !this.top2
if(this.time2 == -59){
this.time1 = 0
this.time2 = 0
}else {
this.time1 = this.time2
if(this.time1==59&&this.time2==59){
this.time1 = 59
this.time2 = 0
}
}
}
console.log(this.time1,this.time2 )
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
position: relative;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

最后

以上就是酷炫抽屉为你收集整理的vue 简单上下跳动，可用于时间背景水印的全部内容，希望文章能够帮你解决vue 简单上下跳动，可用于时间背景水印所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。