给大家讲一下怎么用JS初级的内容来写一个页面实时渲染时间的方法
目录
- 先给大家看一下展示一下效果吧
- 一、在这个效果上用的Date对象的方法
- 二、这个效果的逻辑思路是什么呢？
- 1.我们应该先实例化一个Date对象：
- 2.我们要对年月日以及时分秒做一些不同的处理
- 3.我们在分别把实例出的Date对象的年月日时分秒获取出来
- 4.我们开始对年月日以及时分秒做一下处理
- 扩展：可以用来循环的方法
- 5.最后将内容渲染到页面上
- 6. 让数据自己渲染更新
- 最后看一下总体的效果
先给大家看一下展示一下效果吧
然后展示一下这个效果的代码
一、在这个效果上用的Date对象的方法
Date对象就是时间对象
然而这里我们都用到了什么时间对象的方法呢
new Date() 实例化当前时间方法 就是获取当前时间
对象.getFullYear() 获取对象的年份时间
对象.getMonth() 获取对象的月份时间
对象.getDate() 获取对象的月的几日时间
对象.getHours() 获取对象的时钟时间
对象.getMinutes() 获取对象的分钟时间
对象.getgetSeconds() 获取对象的秒钟时间
二、这个效果的逻辑思路是什么呢？
因为我们要显示的是当前的时间
1.我们应该先实例化一个Date对象：
var date=new Date();
//Tue Nov 08 2022 16:16:16 GMT+0800 (中国标准时间)
//为获取当前时间
2.我们要对年月日以及时分秒做一些不同的处理
所以我们先声明两个空数组来分别接收年月日和时分秒
var arr1=[];//数组一用来接收年月日
var arr2=[];//数组二接收时分秒
3.我们在分别把实例出的Date对象的年月日时分秒获取出来
如下代码块获取：
//将年月日的值追加到第一个数组中，方便后续处理
//前面的date为调用对象，让前面声明的date对象调用获取年月日方法
arr1.push(date.getFullYear());//年
//但是获取月份的时候我们要做进一步处理，让月份加1
//其原因是因为getMonth()在计算时，是从0开始算起，1月份表示为0月
arr1.push(date.getMonth()+1);//月
arr1.push(date.getDate());//日
//再将时分秒的值追加到第二个数组内，同样让其方便处理
arr2.push(date.getHours())//时
arr2.push(date.getMinutes())//分
arr2.push(date.getSeconds())//秒
console.log(arr1,arr2)
输出查看一下arr1和arr2两个数组的内容
4.我们开始对年月日以及时分秒做一下处理
现在arr1和arr2都是数组，但是我们想要的是一组字符串需要将这些数据进行循环并且拼接一下，但是拼接之前我们需要有一个空字符来讲两个数组里面的数据串联到一块，而且我们还需要一个方法进行循环。
扩展：可以用来循环的方法
for循环 ，for…in…，while，do…while，forEach等循环
reduce也可以使用，但是我在这里用了forEach方法进行遍历循环拼接
具体代码入下
先看一下年月日的处理
var a='';//用来将年月日和时分秒串联到一块
arr1.forEach((i,k)=>{//而这个i是第一个数组的每一个数据，k是数据对应的下标
//因为我在追加数据的时候按得是时分秒的顺序追加的
//所以这里可以通过下标判断年月日
if(k==0){//当为第一个数据年下标的时候，可以在后面拼接一个年字符串
a+=i+'年'
}else if(k==1){//当为第二个数据月的时候，也同上
a+=i+'月'
}else{//最后也只剩下数据日了，直接拼接一个日即可
a+=i+'日'
}
})
//然后再将时分秒拼接过去
//方法跟上面基本一致
//拼接字符串方法都跟上面一样
arr2.forEach((i,k)=>{
//但是这里需要额外处理一件事情
//当时分秒为个位书的时候，也就是只有一位的时候我们需要在前面给它额外拼接一个0
//但是需要提前把他转为字符串格式
i=String(i);
if(k==0){
//可以用判断字符串的长度来进行拼接
//当它的长度小于二的时候也就是长度为一的时候进入判断体内
if(i.length<2){
//长度为一在前面额外拼接一个0
//例 1 => '0'+1 => 01···
a+='0'+i+'时'
}else{
a+=i+'时'
}
}else if(k==1){
if(i.length<2){
a+='0'+i+'分'
}else{
a+=i+'分'
}
}else{
if(i.length<2){
a+='0'+i+'秒'
}else{
a+=i+'秒'
}
}
})
console.log(a);//2022年10月8日17时13分50秒 此时的时间
如下图所示：
5.最后将内容渲染到页面上
我们需要先在dody标签内写一个标签用来接收显示这个字符串
<body>
<!-->内容的载体<-->
<div class="div1"></div>
</body>
<script>
var dione=document.querySelector('.div1');//获取载体的节点元素
</script>
把拼接后实时时间的字符串载体当做文本信息
这时你会发现你不刷新浏览器数据就不会跟着一起更新
所以我们需要一个计时定时器setInterVal() 方法
6. 让数据自己渲染更新
将JS代码是用一个setInterVal() 进行函数封装 定时1000毫秒执行一次
但是因为计时定时器在1000毫秒后执行，所以再这1000毫秒前页面渲染是没有数据的
所以说我们需要用一个一次性定时器setTimeOut()方法来设置0毫秒来直接渲染时间数据
就是将上面的代码把复制一遍放在setTiemOut定时器内，让时间在第一时间就渲染在页面上
具体代码如下：
最后看一下总体的效果
就算刷新了数据也会因为一次性定时器的作用而立即显示了
这个显示实时时间的渲染就这么多
