盈和动力 | 二十年品牌 - 提供:互联网信息化建设、大数据内容安全新媒体云监测等解决方案

利用JavaScript实现页面无刷新让时间走动

 二维码 9
发表时间:2015-08-14 15:47


在制作网站中经常会碰到要显示时间的需求,js可以轻松获取到当前时间但是时间是固定的,一般情况下只能将整个页面刷新后才能重


新获取这样做效率非常低。其实有一种方法可以不用刷新就能让时间不停的走动


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Show Time</title>

</head>

<body onload="showTime()">

  <script type="text/javascript">

   //javascript实现页面无刷新让时间走动

   function showTime()

   {  

       var date = new Date();  //获取时间对象

       var year = date.getFullYear(); //获取年

       var month = date.getMonth()+1;//获取月份,获取的月份比真实的月份少一个月,所以这里得+1  

       var day = date.getDate();  //获取日

       var week = date.getDay();//返回0--6,其中0表示星期天,1--6代表星期一到星期六

       var weekStr="未知";  

       var hours = date.getHours(); //获取时(24小时制)

       var minutes = date.getMinutes();  //获取分

       var seconds = date.getSeconds();  //获取秒

       var milliseconds = date.getMilliseconds();//获得毫秒  

                           

       //处理星期的显示            

       switch(week){

               case 1:

                   weekStr=" "

               break;

               case 2:

                   weekStr=" "

               break;

               case 3:

                   weekStr=" "

               break;

               case 4:

                   weekStr=" "

               break;

               case 5:

                   weekStr=" "

               break;

               case 6:

                   weekStr=" "

               break;

               default:

                 weekStr=" ";

           }            

                       

                       

       document.getElementById("timeMsg").innerHTML =  

       year + "" + month + "" + day + " "+"  星期"+weekStr+hours + ":" + minutes + ":" + seconds + ":" +


milliseconds;  

   }

     //setInterval动作的作用是每隔一定时间就调用函数,方法或对象

    setInterval("showTime()", 1);//设置每隔1豪秒调用一下上面的方法

   

   </script>

   

   <div id="timeMsg" style="font-size: 36px;color:#00C"></div>

   

</html>


扫一扫,观看视频
会员登录
登录
其他账号登录:
留言
回到顶部