> 웹 프론트엔드 > JS 튜토리얼 > JavaScript를 사용하여 동적 시계를 만드는 방법

JavaScript를 사용하여 동적 시계를 만드는 방법

一个新手
풀어 주다: 2017-09-26 10:02:28
원래의
3155명이 탐색했습니다.

1:clock.js

/** *  动态显示当前时间 */function showDateTime(){    
var sWeek=new Array("日","一","二","三","四","五","六");  //声明数组存储一周七天    
var myDate=new Date(); //获取当天日期    
var sYear=myDate.getFullYear(); //获取年    
var sMonth=myDate.getMonth()+1; //获取月    
var sDate=myDate.getDate(); //获取日    
var sDay=sWeek[myDate.getDay()]; //根据得到的数字星期,利用数组转化为星期    
var h=myDate.getHours(); //获取小时    
var m=myDate.getMinutes(); //获取分钟    
var s=myDate.getSeconds(); //获取秒    //输入日期和星期    
document.getElementById("date").innerHTML=(sYear+"年"+sMonth+"月"+sDate+"日"+"星期"+sDay+"<br/>");    h = formatTwoDigits(h);  //格式化小时,如果不足两位在前面补0    m = formatTwoDigits(m); //格式化分钟,如果不足两位在前面补0    s = formatTwoDigits(s); //格式化秒钟后,如果不足两位在前面补0    //显示时间    document.getElementById("msg").innerHTML=(h+":"+m+":"+s+"<br/>");    setTimeout("showDateTime()",1000);//每秒执行一次showDateTime函数}window.onload=showDateTime;//在整个页面加载完成后执行此函数//如果输入数是一位数,则在十位上补0function formatTwoDigits(s) {    if (s<10)        return "0"+s;    else        return s;
}
로그인 후 복사

2:clock.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>制作动态时钟</title>
    <script type="text/javascript" src="clock.js"></script></head><body>
    <h1 id="date"></h1>
    <span id="msg" style="font-size: 30px;background-color: greenyellow;">
    </span>
  </body>
</html>
로그인 후 복사

위 내용은 JavaScript를 사용하여 동적 시계를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿