Rumah > Artikel > hujung hadapan web > 如何使用JavaScript实现制作动态时钟

如何使用JavaScript实现制作动态时钟

一个新手asal: 2017-09-26 10:02:283105semak imbas

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>

Atas ialah kandungan terperinci 如何使用JavaScript实现制作动态时钟 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：VS2017打开基于MVC4的项目的解决方法Artikel seterusnya：CSS中两个类选择器之间有没有空格的差别

Artikel berkaitan

Lihat lagi