这篇文章主要介绍了 JavaScript 电子时钟倒计时的实现代码,具有一定的参考价值,感兴趣的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
实例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>电子时钟</title>
- <style type="text/CSS">
- *{
- margin: 0;
- padding: 0;
- }
- #wrap{
- width: 200px;
- height: 100px;
- background-color: black;
- }
- #time{
- color: #fff;
- display: block;
- font-size: 24px;
- margin: 0 auto;
- padding-top: 20px;
- /*border: 1px solid red;*/
- text-align: center;
- width: 100px;
- }
- #timer{
- color: green;
- display: block;
- font-size: 18px;
- margin: 0 auto;
- padding-top: 10px;
- /*border: 1px solid red;*/
- text-align: center;
- /*width: 100px;*/
- }
- </style>
- </head>
- <body>
- <div id="wrap">
- <span id="time"></span>
- <span id="timer"></span>
- </div>
- <script type="text/javascript">
- var time =document.getElementById("time");
- var timer =document.getElementById("timer");
- setInterval(function() {
- var date = new Date();
- var hours = date.getHours();
- var minutes = date.getMinutes();
- var seconds = date.getSeconds();
- var years = date.getYear();
- var dates = date.getDate();
- var monts = date.getMonth()+1;
- var day = date.getDay();
- var parses = date.getMilliseconds()`;
- switch(day){
- case 0:
- day="日";
- case 1:
- day="一";
- case 2:
- day="二";
- case 3:
- day="三";
- case 4:
- day="四";
- case 5:
- day="五";
- case 6:
- day="六";
- }
- //如果秒数小于十,在秒数面前连接一个0
- if(seconds < 10) {
- seconds = "0" + seconds;
- }
- //如果分钟数小于十,在分钟数面前连接一个0
- if(minutes < 10) {
- minutes = "0" + minutes;
- }
- //如果小时数小于十,在小说数面前连接一个0
- if(hours < 10) {
- hours = "0" + hours;
- }
- if(years<1900) {
- years = years+1900;
- }
- if(dates<10) {
- dates = "0" + dates;
- }
- if(monts<10) {
- monts = "0" + monts;
- }
- if(parses<10) {
- // parses = "0" + parses;
- }
- timer.innerHTML = years +"年" +monts+ "月" +dates +"号"+"星期"+day;
- time.innerHTML = hours + ":" + minutes + ":" + seconds + ":" + parses;
- // date.getTime()//返回的是一个从1970年到当前的毫秒数(时间戳)(ms)
- // date.getMonth()//返回的是月份,从0开始算
- // date.getFullYear();
- },10)
- </script>
- </body>
- </html>
以上就是本文的详细内容,希望对大家的学习 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0417/267652.html