本文实例讲述了JavaScript时间日期操作。分享给大家供大家参考,具体如下:
创新互联专业为企业提供宁陕网站建设、宁陕做网站、宁陕网站设计、宁陕网站制作等企业网站建设、网页设计与制作、宁陕企业网站模板建站服务,10年宁陕做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。本来想在网上找一些js实例来练练手,结果发现一本书《突破JavaScript编程实例五十讲》,看了下内容还不错,就下了下来;
后面又下了该书籍的源码,一看才发现这本书编的日期是2002年的,代码运行之后,有些代码可以运行,有些代码已经失效,原因是其所用的一些语言是已经淘汰的了。
其次就是由于是很早之前写的,那时候可能还没有css,js,html分离的想法,都是杂糅在一起的,看起来很不舒服。
还有就是,代码末尾都是不带分号的,还有各种不加关键字var的隐性全局变量等,都影响了程序的整洁性,简洁性。
于是就想,要不我把他的代码重新编写,来实现书中的要求。
在此,也对该书的作者马健兵等编著表示致敬,感谢他们的辛苦编著。
由于空间的限制,就不将js,css以单独文件存储了,全部都在html文件中,但已分离。
1、指定位置的时钟显示
时钟始终显示在网页的正中间,12小时制。
效果图:
源代码:
<!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开发、Google、App设计、服务器托管
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联