网站想要显示运行天数，这样做行了
我们经常可以看到一个现象，别人网站可以显示出运行的天数以及时间。这样的效果，让我们感觉到很有趣。这样的效果是怎样达到的呢？其实网站想要显示运行天数，这样做行了。
原生JS实现：
<span id="runtime_span" style="color: #9b51e0;font-weight:bold"></span>
<script type="text/javascript">
function show_runtime(){
window.setTimeout("show_runtime()",1000);
X = new Date("01/06/2016 5:22:00");
Y = new Date();
T = (Y.getTime()-X.getTime());
M = 24*60*60*1000;
a = T/M;
A = Math.floor(a);
b = (a-A)*24;
B = Math.floor(b);
c = (b-B)*60;
C = Math.floor((b-B)*60);
D = Math.floor((c-C)*60);
runtime_span.innerHTML="本站已经稳定运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"
}
show_runtime();
</script>
原生JS实现核心的原理就是,获取当前的时间减去设置初始时的时间,将时间转化成年,天,小时,分,秒,然后通过js中的innerHTMLDOM属性将内容插入到页面中.
Vue版本实现：
<template>
<div class="add-website-long-time">
<span>{{runTimeText}}</span>
</div>
</template>
<script>
export default {
name: 'addLongTime',
data() {
return {
runTimeText: '',
}
},
mounted() {
this.timer = setInterval(this.runTime,1000);
},
methods: {
runTime() {
let X = new Date("01/06/2020 5:22:00"); // 设置的初始时间
let Y = new Date();// 当前时间
let T = (Y.getTime()-X.getTime());
let M =24*60*60*1000;
let a = T/M;
let A = Math.floor(a);
let b = (a-A)*24;
let B = Math.floor(b);
let c = (b-B)*60;
let C = Math.floor((b-B)*60);
let D = Math.floor((c-C)*60);
this.runTimeText = "本站已经稳定运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"
}
},
beforeDestroy() {
clearInterval(this.timer)
}
}
</script>
<style>
.add-website-long-time {
text-align: center;
}
</style>
</script>
只要会原生JS,那么写Vue版本或React都是语法上差异,核心的逻辑依旧是没有变的.
页:
[1]