Vue + js 实现 数字时钟
文章目录
①为时间的显示给一个属性
我这里使用的是 p标签
<p id="time" @click="showNowTime()">点击显示现在的时间</p>
-
showNowTime是我要实现的 动态 获取时间的主要函数
②编写主函数 — showNowTime
首先需要了解，JavaScript中的 Date（日期）对象
我们直接获取这个Date对象，将会打印出
Sun Jul 11 2021 11:40:41 GMT+0800 (中国标准时间)
获取 小时，分钟，秒钟
- 使用到
getHours,getMinutes,getSeconds的js内置函数
这样我们就可以获取 Date日期对象中的 对应的小时，分钟，秒钟
对应代码：
let today = new Date();
let hour = today.getHours();
let minute = today.getMinutes();
let second = today.getSeconds();
console.log( hour+":"+minute + ":" + second);
打印结果
这样并不好看，所以我们需要加前导零，而且利用率 十分高，所以需要抽象成一个函数
编写处理时间函数 —showCheckTime
/// 处理时间
showCheckTime(time){
if(time < 10){
time = '0' + time ;
}
return time ;
这里一定要注意时间return 写在判断条件语句的后面
否则对于 >= 10 的时间就将无法返回，显示 undefined
}
现在我们来对时间进行处理，调用处理时间的函数
hour = this.showCheckTime(hour);
minute = this.showCheckTime(minute);
second = this.showCheckTime(second);
console.log(hour+":"+minute + ":" + second);
这样就将输出前导零了，更加美观
接下来，我们获得了数据之后，就需要在网页呈现出来
document.getElementById("time").innerHTML = hour+":"+minute + ":" + second;
- 首先通过对 p 设置的id 找到该标签
getElementById("time") - 修改
innerHTML即可完成字符的替换
不断刷新当前时间
所使用的函数setInterval
使用 setTimeout将会执行一次
setInterval(this.showNowTime , 500);
一定要注意 加上 this，否则将会报错
到这里，我们就基本完成了主函数的编写
主函数完整代码
/// 显示当前时间
showNowTime(){
let today = new Date();
let hour = today.getHours();
let minute = today.getMinutes();
let second = today.getSeconds();
hour = this.showCheckTime(hour);
minute = this.showCheckTime(minute);
second = this.showCheckTime(second);
document.getElementById("time").innerHTML = hour+":"+minute + ":" + second;
setInterval(this.showNowTime , 500);
},
③进入页面，自动获取时间
- vue 的 mounted钩子函数
- window.onload
mounted(){
window.onload = this.showNowTime();
}
为什么需要使用window.onload？
因为我们在前面需要修改HTML的东西（innerHTML），如果没有这句话，就将可能出现undefined的错误，因为此时DOM树是不完整的
不能使用created函数
因为在创建一个网页的时候，created的时候是VUE实例创建完成，而此时HTML并没有完全渲染完成，只有在mounted的时候HTML渲染完成，附上生命周期图
至此，我们完成了一个网页时钟的编写
④完整代码
<template>
<div>
<p id="time" @click="showNowTime()">点击显示现在的时间</p>
</div>
</template>
<script>
export default {
data(){
return{
},
methods:{
/// 显示当前时间
showNowTime(){
let today = new Date();
let hour = today.getHours();
let minute = today.getMinutes();
let second = today.getSeconds();
hour = this.showCheckTime(hour);
minute = this.showCheckTime(minute);
second = this.showCheckTime(second);
document.getElementById("time").innerHTML = hour+":"+minute + ":" + second;
setInterval(this.showNowTime , 500);
// setTimeout(this.showNowTime , 500);
},
/// 处理时间
showCheckTime(time){
if(time < 10){
time = '0' + time ;
}
return time ;
}
},
mounted(){
window.onload =this.showNowTime();
}
};
</script>
<style>
#time{
text-align: center;
display: block;
font-size: 28px;
}
</style>
一个很严重的问题
资源消耗太大了！！！如果一直运行的话，将会直接跑满内存和磁盘！！！
代码需要优化