JavaScript时间日期操作实例小结【5个示例】-创新互联

本文实例讲述了JavaScript时间日期操作。分享给大家供大家参考,具体如下:

创新互联专业为企业提供宁陕网站建设、宁陕做网站、宁陕网站设计、宁陕网站制作等企业网站建设、网页设计与制作、宁陕企业网站模板建站服务,10年宁陕做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

本来想在网上找一些js实例来练练手,结果发现一本书《突破JavaScript编程实例五十讲》,看了下内容还不错,就下了下来;

后面又下了该书籍的源码,一看才发现这本书编的日期是2002年的,代码运行之后,有些代码可以运行,有些代码已经失效,原因是其所用的一些语言是已经淘汰的了。

其次就是由于是很早之前写的,那时候可能还没有css,js,html分离的想法,都是杂糅在一起的,看起来很不舒服。

还有就是,代码末尾都是不带分号的,还有各种不加关键字var的隐性全局变量等,都影响了程序的整洁性,简洁性。

于是就想,要不我把他的代码重新编写,来实现书中的要求。

在此,也对该书的作者马健兵等编著表示致敬,感谢他们的辛苦编著。

由于空间的限制,就不将js,css以单独文件存储了,全部都在html文件中,但已分离。

1、指定位置的时钟显示

时钟始终显示在网页的正中间,12小时制。

效果图:

JavaScript时间日期操作实例小结【5个示例】

源代码:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>指定位置的时钟</title>
 <style>
  body{
   font-size: 30px;
   font-family: Arial;
   background: #fef4d9;
  }
  #Current-time{
   color:#66ff00;
   font-size: 30px;
  }
  #liveclock{
   position:absolute;
   top:50%;
   left: 50%;
   width: 250px;
   height: 100px;
   margin: -50px 0 0 -125px;
  }
  p{
   text-align: center;
   color:#ff00ff;
   margin: 0px;
  }
 </style>
 </head>
 <body>
  <div id="liveclock" >
   <div id="show"></div>
  </div>
  <script >
   function display()
   {
    var Digital=new Date();
    var hours=Digital.getHours();
    var minutes=Digital.getMinutes();
    var seconds=Digital.getSeconds();
    var dn="AM";
    if(hours>12)  //改成12小时制的
    {
     dn="PM";
     hours=hours-12;
    }
    if(hours==0)
     hours=12;
    if(minutes<=9)
     minutes="0"+minutes; //改成两位数的显示
    if(seconds<=9)
     seconds="0"+seconds;
   var myclock="<b><p id='Current-time'>Current time is:</p><p>"+hours+":"+minutes+":"+seconds+" "+dn+"</p></b>";
   var liveclock=document.getElementById("liveclock");
     liveclock.innerHTML=myclock;
   setTimeout("display()",1000);
   }
   display();
  </script>
 </body>
</html>

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。

本文名称:JavaScript时间日期操作实例小结【5个示例】-创新互联
URL网址:https://www.cdcxhl.com/article4/dshoie.html

成都网站建设公司_创新互联,为您提供网站内链网站收录App开发GoogleApp设计服务器托管

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

搜索引擎优化