<template>
<div style="">
<div>
<p class="p1" v-if="chkValue!='0-0'">投产倒计时</p>
</div>
<ul class="ul1" v-if="chkValue!='0-0'">
<li>
<span class="count">
<img class="c1" :src="getTimeUrl(thousandDay)" alt="">
</span>
<span class="count">
<img class="c1" :src="getTimeUrl(hundredDay)" alt="">
</span>
<span class="count">
<img class="c1" :src="getTimeUrl(tenDay)" alt="">
</span>
<span class="count">
<img class="c1" :src="getTimeUrl(individualDay)" alt="">
</span>
<span class="tian">天</span>
</li>
<li>
<span class="count">
<img class="c1" :src="getTimeUrl(tenHour)" alt="">
</span>
<span class="count">
<img class="c1" :src="getTimeUrl(individualHour)" alt="">
</span>
<span class="tian">时</span>
</li>
<li>
<span class="count">
<img class="c1" :src="getTimeUrl(tenMinute)" alt="">
</span>
<span class="count">
<img class="c1" :src="getTimeUrl(individualMinute)" alt="">
</span>
<span class="tian">分</span>
</li>
<li>
<span class="count">
<img class="c1" :src="getTimeUrl(tenSec)" alt="">
</span>
<span class="count">
<img class="c1" :src="getTimeUrl(individualSec)" alt="">
</span>
<span class="tian">秒</span>
</li>
</ul>
<ul class="ul1" v-if="chkValue=='0-0'">
<li>
<span class="count">
<img class="c1" :src="getTimeUrl(tenHour)" alt="">
</span>
<span class="count">
<img class="c1" :src="getTimeUrl(individualHour)" alt="">
</span>
<span class="tian">时</span>
</li>
<li>
<span class="count">
<img class="c1" :src="getTimeUrl(tenMinute)" alt="">
</span>
<span class="count">
<img class="c1" :src="getTimeUrl(individualMinute)" alt="">
</span>
<span class="tian">分</span>
</li>
<li>
<span class="count">
<img class="c1" :src="getTimeUrl(tenSec)" alt="">
</span>
<span class="count">
<img class="c1" :src="getTimeUrl(individualSec)" alt="">
</span>
<span class="tian">秒</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'pagel',
data() {
return {
thousandDay: 0,
hundredDay: 0,
tenDay: 0,
individualDay: 0,
tenHour: 0,
individualHour: 0,
tenMinute: 0,
individualMinute: 0,
tenSec: 0,
individualSec: 0,
millisecond1: null,
},
mounted() {
this.currentTime();
this.play()
this.drawLine()
this.initWave()
var timer = new Date('2020-10-15 00:00:00')
this.timer1 = new Date('2022-04-01 00:00:00')
this.timer2 = new Date('2023-05-01 00:00:00')
var t = new Date('2020-10-15 00:00:00')
var t1 = new Date('2020-10-22 00:00:00')
var t2 = new Date('2021-01-06 00:00:00')
// alert(this.timeFn2(t))//开工总时间
// alert(this.timeFn2(t1))//安平-泰安
// alert(this.timeFn2(t2))//泰安-连云港
this.allDays = this.timeFn2(t)
this.day1 = this.timeFn2(t1)
this.day2 = this.timeFn2(t2)
},
watch: {
chkValue(chkValue) {
console.log(chkValue);
this.initWave()
if (chkValue == '0-0') {
this.drawLine()
this.currentTime();
}
if (chkValue == '0-0-1') {
this.drawLineAP()
this.xunhan(this.timer1)
}
if (chkValue == '0-0-2') {
this.drawLineLYG()
this.xunhan(this.timer2)
}
},
},
methods: {
getTimeUrl(url) {
return require(`../assets/imgs/${url}.png`)
},
// 计算两个时间差 dateBegin 开始时间,开工总时间
timeFn2(dateBegin) {
//如果时间格式是正确的,那下面这一步转化时间格式就可以不用了
var dateEnd = new Date();//获取当前时间
var dateDiff = dateEnd.getTime() - dateBegin;//时间差的毫秒数
var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
//计算相差秒数
var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000)
var leave4 = leave3 % (60 * 1000) //计算分钟数后剩余的毫秒数
var minseconds = Math.round(leave4 / 1000)
// var timeFn = "耗时:" + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒" + minseconds + "毫秒";
return dayDiff;
},
//投产倒计时
timeFn1(dateBegin) {
//如果时间格式是正确的,那下面这一步转化时间格式就可以不用了
var dateEnd = new Date();//获取当前时间
var dateDiff = dateBegin - dateEnd.getTime();//时间差的毫秒数
var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
//计算相差秒数
var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000)
var leave4 = leave3 % (60 * 1000) //计算分钟数后剩余的毫秒数
var minseconds = Math.round(leave4 / 1000)
// var timeFn = "耗时:" + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒" + minseconds + "毫秒";
this.thousandDay = parseInt(dayDiff / 1000)
this.hundredDay = parseInt(dayDiff / 100 % 10)
this.tenDay = parseInt(dayDiff / 10 % 10)
this.individualDay = parseInt(dayDiff % 10)
this.tenHour = parseInt(dayDiff / 10 % 10)
this.individualDay = parseInt(dayDiff % 10)
this.tenMinute = parseInt(minutes / 10 % 10)
this.individualMinute = parseInt(minutes % 10)
this.tenSec = parseInt(seconds / 10 % 10)
this.individualSec = parseInt(seconds % 10)
},
}
}
</script>
<style scoped>
.ul1 {
height: 130px;
display: block;
margin-left: 60px;
}
ul li {
list-style: none;
float: left;
display: inline-block;
overflow: hidden;
}
.count {
width: 90px;
height: 130px;
background-image: url('../assets/imgs/bg1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
float: left;
margin-right: 20px;
margin-left: 20px;
}
.c1 {
width: 38px;
height: 81px;
display: block;
margin: 20px auto;
}
</style>
【阿里云】2核2G1M 86元/年;2核8G1M 390元/年;4核8G1M 664元/年
活动地址:https://www.aliyun.com/minisite/goods?userCode=q8eccx2x
效果图:
页面所需图片如下: