标签：defaultValue timer 倒计时 Date let 下班 arrivalTime parseInt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- import CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<style>
#app {
width: 400px;
height: 400px;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>当前时间：{{currentTime}}</p>
<el-time-picker
v-model="defaultValue"
:picker-options="{
selectableRange: '8:30:00 - 23:30:00'
}"
placeholder="下班时间"
value-format="timestamp"
@change="changeDate"
>
</el-time-picker>
<p>距离下班时间还有</p>
<p v-cloak>{{arrivalTime}}</p>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: "#app",
data: function () {
return {
visible: false,
currentTime: "",
arrivalTime: "",
defaultValue: "",
};
},
methods: {
changeDate(val) {
let now = Date.now();
if (val < now) {
this.$message.error("下班时间必须大于当前时间");
return;
}
this.arrivalTime = this.defaultValue;
this.timer();
},
timer() {
let timer = null;
if (timer) {
clearInterval(timer);
}
this.setTime();
timer = setInterval(() => {
this.currentTime = new Date().toLocaleString();
this.setTime();
}, 1000);
},
setTime() {
let now = Date.now();
this.arrivalTime = parseInt((this.defaultValue - now) / 1000);
if (this.arrivalTime > 3600) {
let h = parseInt(this.arrivalTime / 3600);
let m = parseInt((this.arrivalTime % 3600) / 60);
let s = parseInt((this.arrivalTime % 60) + 1);
this.arrivalTime = `${h}小时${m}分钟${s}秒`;
} else {
let m = parseInt(this.arrivalTime / 60);
let s = parseInt((this.arrivalTime % 60) + 1);
this.arrivalTime = `${m}分钟${s}秒`;
}
},
},
mounted() {
this.currentTime = new Date().toLocaleString();
this.defaultValue = new Date();
this.defaultValue = new Date(
this.defaultValue.getFullYear(),
this.defaultValue.getMonth(),
this.defaultValue.getDate(),
18,
0
);
this.timer();
},
watch: {},
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- import CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<style>
#app {
width: 400px;
height: 400px;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>当前时间：{{currentTime}}</p>
<el-time-picker
v-model="defaultValue"
:picker-options="{
selectableRange: '8:30:00 - 23:30:00'
}"
placeholder="下班时间"
value-format="timestamp"
@change="changeDate"
>
</el-time-picker>
<p>距离下班时间还有</p>
<p v-cloak>{{arrivalTime}}</p>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: "#app",
data: function () {
return {
visible: false,
currentTime: "",
arrivalTime: "",
defaultValue: "",
};
},
methods: {
changeDate(val) {
let now = Date.now();
if (val < now) {
this.$message.error("下班时间必须大于当前时间");
return;
}
this.arrivalTime = this.defaultValue;
this.timer();
},
timer() {
let timer = null;
if (timer) {
clearInterval(timer);
}
this.setTime();
timer = setInterval(() => {
this.currentTime = new Date().toLocaleString();
this.setTime();
}, 1000);
},
setTime() {
let now = Date.now();
this.arrivalTime = parseInt((this.defaultValue - now) / 1000);
if (this.arrivalTime > 3600) {
let h = parseInt(this.arrivalTime / 3600);
let m = parseInt((this.arrivalTime % 3600) / 60);
let s = parseInt((this.arrivalTime % 60) + 1);
this.arrivalTime = `${h}小时${m}分钟${s}秒`;
} else {
let m = parseInt(this.arrivalTime / 60);
let s = parseInt((this.arrivalTime % 60) + 1);
this.arrivalTime = `${m}分钟${s}秒`;
}
},
},
mounted() {
this.currentTime = new Date().toLocaleString();
this.defaultValue = new Date();
this.defaultValue = new Date(
this.defaultValue.getFullYear(),
this.defaultValue.getMonth(),
this.defaultValue.getDate(),
18,
0
);
this.timer();
},
watch: {},
});
</script>
</html>
标签：defaultValue,timer,倒计时,Date,let,下班,arrivalTime,parseInt 来源： https://www.cnblogs.com/tw6668/p/16627255.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。