Home > Web Front-end > JS Tutorial > How to implement analog clock in javascript_javascript skills

How to implement analog clock in javascript_javascript skills

WBOY
Release: 2016-05-16 15:59:26
Original
1508 people have browsed it

The example in this article describes how to implement an analog clock in JavaScript. Share it with everyone for your reference. The specific implementation method is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>javascript模拟时钟</title>
 <!--Javascript示例代码解释:
 这个示例用到了Javascript内置对象Date的getFullYear,
 getMonth和getDate方法。首先申明一个变量d,var d = new Date(),
 表示将当天的日期值赋给变量d。然后使用getFullYear得到年份的值,
 用getMonth得到月份值(注:getMonth返回值范围为0到11,
 所以要得到实际的月份,还要加1),
 用getDate得到当天日期所在月份的日期值。
 这个示例还用到了"test&#63;语句1:语句2",
 意思是如果符合test条件,那么执行语句1,
 否则使用语句2。计算月和日都用到了这个语法,
 如果月和日小于10,在月和日的值之前应该加0。=-->
 <script type="text/javascript">
  function Format2Len(i) {
//   if (i < 10) {
//    return "0" + i;
//   }
//   else {
//    return i;
   //   }
   return i < 10 &#63; "0" + i : i;
  }
  function RefreshClock() {
   var CurrentTime = new Date();
   var timeStr = CurrentTime.getFullYear() + "-" +
     Format2Len(CurrentTime.getMonth()+1) + "-" +
     Format2Len(CurrentTime.getDate()) + " " +
     Format2Len(CurrentTime.getHours()) + ":" +
     Format2Len(CurrentTime.getMinutes()) + ":" +
     Format2Len(CurrentTime.getSeconds());
   txtClock.value = timeStr;
  }
  setInterval("RefreshClock()", 1000);
 </script>
</head>
<body onload="RefreshClock()">
<!--页面加载的时候执行一次-->
 当前时间:<input type="text" id="txtClock" />
</body>
</html>
Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template