下班倒计时
<!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>
代码搬运工
