JS 를 사용 하여 동적 시계 구현

2350 단어 js클 록
본 논문 의 사례 는 JS 가 동적 시 계 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
setTime()을 이용 하여 동적 시계 효 과 를 실현 합 니 다.
코드 는 다음 과 같다.

<html>
  <head>
    <meta charset="utf-8">
    <title>       </title>
    <style type="text/css">
      /*    :       */
      input,
      #clock {
        width: 390;
        font-size: 30px;
        font-weight: 900;
        color: #FFFFFF;
        background-color: #930;
        border: 8px double #900;
 
      }
    </style>
 
  </head>
  <body onLoad="disptime( ) ">
    <form name="myform">
      <input name="myclock" type="text" value="" size="20">
    </form>
    <span id="clock"></span>
 
    <script language="JavaScript">
      function disptime() {
        var time = new Date(); //      
        var year = time.getFullYear(); //     
        var month = time.getMonth(); //     
        var date = time.getDate(); //     
        var hour = time.getHours(); //    、  、 
        var minute = time.getMinutes();
        var second = time.getSeconds();
        if (minute < 10) //      1 , 0  
          minute = "0" + minute;
        if (second < 10) //      1 , 0  
          second = "0" + second;
        /*             */
        document.getElementById('clock').innerHTML = year + " " + month + " " + date + " " + hour + ":" + minute + ":" +
          second
        document.myform.myclock.value = year + " " + month + " " + date + " " + hour + ":" + minute + ":" + second
        /*       1 (1000  ),    disptime()  ,      */
        var myTime = setTimeout("disptime()", 1000);
 
      }
    </script>
  </body>
</html>
효과

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기