网页中通过JS显示当前时间

如下图所示，在114好帮手的网站顶部，有一个显示时间的效果。该怎么实现呢！

网页中通过JS显示当前时间

1、需要在网页中构造一个js方法，获取当前时间，并转换为需要的格式。

1. <script type="text/javascript">
   
2.         function getTime(){
   
3.             var myDate = new Date;//实例化当前时间戳
   
4.             var year = myDate.getFullYear(); //获取当前年份
   
5.             var mon = myDate.getMonth() + 1; //获取当前月份
   
6.             if(mon<10){
   
7.                 mon="0"+mon;
   
8.             }
   
9.             var date = myDate.getDate(); //获取当前日
   
10.             if(date<10){
    
11.                 date="0"+date;
    
12.             }
    
13.             var hours = myDate.getHours(); //获取当前小时
    
14.             if(hours<10){
    
15.                 hours="0"+hours;
    
16.             }
    
17.             var minutes = myDate.getMinutes(); //获取当前分钟
    
18.             if(minutes<10){
    
19.                 minutes="0"+minutes;
    
20.             }
    
21.             var seconds = myDate.getSeconds(); //获取当前秒
    
22.             if(seconds<10){
    
23.                 seconds="0"+seconds;
    
24.             }
    
25.             var now = year + "-" + mon + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
    
26.             return now;
    
27.         }
    
28. </script>

复制代码

2、在网页html结构中对应位置上，预览供显示的类标签。比如：<span class="top_date"></span>

3、在getTime()方法上方，再写一个Jquery方法，在网页结构构造完成后开始调用。

1. $().ready(function(){
   
2. $(".top_date").html(getTime());
   
3. });

复制代码

$().ready()  标识网页结构加载完成后，就调用的js方法
$(".top_date")  是通过Jquery的方法，获取需要操作的html标签
.html（getTime()） 是将getTime()函数获取的时间，输出到对应网页标签中。

点击阅读更多内容！