首先,在Vue组件的标签中添加一个用于显示运行时间的元素,例如:
<div>网站运行了: {{ days }}天{{ hours }}小时{{ minutes }}分{{ seconds }}秒</div>
然后,在Vue组件的标签中定义计算属性和生命周期钩子函数,如下所示:
<script>
export default {
data() {
return {
runtime: null,
days: 0,
hours: 0,
minutes: 0,
seconds: 0
};
},
mounted() {
this.showRuntime();
},
methods: {
showRuntime() {
setInterval(() => {
const startTime = new Date("3/27/2024 7:00:00"); //改为创立站点时间
const currentTime = new Date();
const timeDifference = currentTime.getTime() - startTime.getTime();
const millisecondsPerDay = 24 * 60 * 60 * 1000;
this.days = Math.floor(timeDifference / millisecondsPerDay);
this.hours = Math.floor((timeDifference % millisecondsPerDay) / (60 * 60 * 1000));
this.minutes = Math.floor((timeDifference % (60 * 60 * 1000)) / (60 * 1000));
this.seconds = Math.floor((timeDifference % (60 * 1000)) / 1000);
}, 1000);
}
}
};
</script>
1、文章版权归作者所有,未经允许请勿转载。
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505
你可能也喜欢
- ♥ 企业网站建设需要遵循的设计原则有哪些?08/23
- ♥ 网站日志HTTP状态码分析07/19
- ♥ 如何建设一个企业网站方案策划呢?08/07
- ♥ 网站首页设计对布局的要求是什么?08/26
- ♥ 网站开发建设有哪些步骤和流程07/19
- ♥ 扁平化设计具体表现在什么地方?08/23