1.短信60s倒计时
代码实现 :
a)html结构
<template>
<div class="buttonItem">
<input v-model="vercode" type="text" placeholder="输入验证码">
<div class="red sendCode" @click="sendMessage">{{btnText}}</div>
</div>
</template>b)样式
<style scoped lang="scss" >
.buttonItem{
margin:15px 10px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
border:1px solid #ddd;
input{
height: 45px;
font-size: 1rem;
padding-left:10px;
border:0;
outline: none;
}
.sendCode{
border: 0;
outline: none;
background-color: #fff;
cursor: pointer;
}
}
</style>c)逻辑
<script>
export default{
name:'buttonItem',
data(){
return{
vercode:'',
btnDisabled:false,
btnText:'获取验证码'
}
},
methods:{
sendMessage(){
if(this.btnDisabled){
return;
}
this.getSecond(60);
},
//发送验证码
getSecond(wait){
let _this=this;
let _wait = wait;
if(wait == 0) {
this.btnDisabled=false;
this.btnText="获取验证码"
wait = _wait;
} else {
this.btnDisabled=true;
this.btnText="验证码(" + wait + "s)"
wait--;
setTimeout(function() {
_this.getSecond(wait);
},
1000);
}
}
}
}
</script>效果如下：
2.秒杀倒计时
代码如下：
a)html结构
<template>
<div class="addcountdown"
:style="{'background-image':curdata.config.bgType==2?'url('+curdata.config.url+')':'','background-color':curdata.config.bgType==1?curdata.config.bgcolor:''}">
<p v-if="!isStart" :style="{color:curdata.config.titleColor}">距开始还剩
<span>{{day}}</span> 天 <span>{{hours}}</span> 时 <span>{{minut}}</span> 分 <span>{{second}}</span> 秒 </p>
<p v-if="isStart&&!isEnd" :style="{color:curdata.config.titleColor}">距结束还剩
<span>{{day}}</span> 天 <span>{{hours}}</span> 时 <span>{{minut}}</span> 分 <span>{{second}}</span> 秒</p>
<p v-if="isEnd" style="color:red">活动已结束</p>
</div>
</template>b)css样式
<style scoped lang="scss" >
.addcountdown {
background-position: center;
background-size: cover;
p {
margin: 0;
padding: 10px;
span {
color: red;
font-weight: bold;
font-size: 1.1rem;
}
}
}
</style>c)逻辑
import {SecondToDate} from '@/utils/auth';
export default{
name: 'addCountDown',
props: {
curdata: {
type: Object,
default: null
},
time: {
type: Array,
default: null
}
},
data(){
return {
isStart: false,
isEnd: false,
curTimer: null,
day: '',
hours: '',
minut: '',
second: ''
}
},
watch: {
time(){
if (this.time) {
clearInterval(this.curTimer)
this.initTime();
}
},
curdata(){
if (this.time) {
clearInterval(this.curTimer)
this.initTime();
}
}
},
created(){
if (this.time) {
clearInterval(this.curTimer)
this.initTime();
}
},
methods: {
initTime(){
if (this.time) {
if (this.time[0] - new Date().getTime() > 0) {
this.isStart = false;
this.isEnd = false;
} else {
this.isStart = true;
if (this.time[1] - new Date().getTime() > 0) {
this.isEnd = false;
} else {
this.isEnd = true;
}
}
let _this = this;
if (this.isStart && !this.isEnd) {
//开始还未结束
if (_this.time[1] - new Date().getTime() > 0) {
_this.curTimer = setInterval(() => {
_this.curTime = SecondToDate(_this.time[1]);
_this.initFormate(_this.curTime);
}, 1000)
}
} else if (!this.isStart) {
if (_this.time[0] - new Date().getTime() > 0) {
_this.curTimer = setInterval(() => {
_this.curTime = SecondToDate(_this.time[0]);
_this.initFormate(_this.curTime);
}, 1000)
}
}
}
},
initFormate(curTime){
if (curTime.indexOf('天') != -1) {
this.day = curTime.split('天')[0];
this.hours = curTime.split('天')[1].split(':')[0];
this.minut = curTime.split('天')[1].split(':')[1];
this.second = curTime.split('天')[1].split(':')[2];
} else {
this.day = '00';
this.hours = curTime.split(':')[0];
this.minut = curTime.split(':')[1];
this.second = curTime.split(':')[2];
}
}
}
}SecondToDate方法===》将时间戳格式转换为 __天__:__:__格式
代码如下：
export function SecondToDate(msd) {
let curTime = msd - new Date().getTime();
var time = curTime / 1000;
if (null != time && "" != time) {
if (time > 60 && time < 60 * 60) {
time = parseInt(time / 60.0) + ":" + parseInt((parseFloat(time / 60.0) -
parseInt(time / 60.0)) * 60);
}
else if (time >= 60 * 60 && time < 60 * 60 * 24) {
time = parseInt(time / 3600.0) + ":" + parseInt((parseFloat(time / 3600.0) -
parseInt(time / 3600.0)) * 60) + ":" +
parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60);
} else if (time >= 60 * 60 * 24) {
time = parseInt(time / 3600.0 / 24) + "天" + parseInt((parseFloat(time / 3600.0 / 24) -
parseInt(time / 3600.0 / 24)) * 24) + ":" + parseInt((parseFloat(time / 3600.0) -
parseInt(time / 3600.0)) * 60) + ":" +
parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60);
}
else {
time = parseInt(time);
}
}
let curtime = '';
if (time.indexOf('天') == -1) {
curtime = time.split(':');
} else {
curtime = time.split('天')[1].split(':');
}
let curArr = '';
for (let a = 0; a < curtime.length; a++) {
let item = curtime[a];
if (item < 10) {
item = '0' + item;
}
if (a < curtime.length - 1) {
curArr += item + ':';
} else {
curArr += item;
}
}
if (time.indexOf('天') != -1) {
curArr = time.split('天')[0] + '天' + curArr;
if (time.split('天')[0] < 10) {
curArr = '0' + curArr;
}
}
return curArr;
}效果如下：
3.日期星期时间显示
代码如下：
a)html结构
<div class="timeBox">
<div class="timeDate">
<div>{{curTime.getDay() | filterDate}}</div>
<div><span class="bigFont">{{curTime.getFullYear()}}</span>年{{curTime.getMonth()+1<10?'0'+(curTime.getMonth()+1):(curTime.getMonth()+1)}}月{{curTime.getDate()<10?'0'+curTime.getDate():curTime.getDate()}}日</div>
</div>
<div class="timeBox">{{curTime.getHours()<10?'0'+curTime.getHours():curTime.getHours()}}:{{curTime.getMinutes()<10?'0'+curTime.getMinutes():curTime.getMinutes()}}</div>
</div>b)css样式
.timeBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
.timeDate {
width: 150px;
padding: 10px 5px;
background-color:$text-green-color;
color: #fff;
.bigFont {
font-size: 20px;
}
}
.timeBox {
color:$text-green-color;
border: 1px solid #ccc;
font-size: 35px;
font-weight: bold;
padding: 9.5px 5px;
}
}c)逻辑
data(){
return {
curTime:new Date()
}
},
filters:{
filterDate(val){
const arr={
'0':'星期天',
'1':'星期一',
'2':'星期二',
'3':'星期三',
'4':'星期四',
'5':'星期五',
'6':'星期六',
}
return arr[val];
}
},
mounted: function () {
let _this=this;
this.$nextTick(function () {
setInterval(()=>{
_this.curTime=new Date();
}, 1000*60);
})
},效果如下：
