suchen

Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie mit JavaScript eine dynamische Uhr

So erstellen Sie mit JavaScript eine dynamische Uhr

一个新手
一个新手Original
2017-09-26 10:02:283140Durchsuche

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>

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit JavaScript eine dynamische Uhr. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Lösung zum Öffnen von MVC4-basierten Projekten in VS2017Nächster Artikel：Lösung zum Öffnen von MVC4-basierten Projekten in VS2017

In Verbindung stehende Artikel

Mehr sehen