Date应用-显示日期

目的:在页面上显示当前计算机的时间。

思路:布局:在body上设置div用来显示当时的时间值,js里应该能获取当前时间并能赋值给div。

知识点:第一步:获取div的id用来写入 var box=document.getElementById("box"); 获取当前时间会用到 var d=new date; 获取年、月、日、时、分、秒会用到getFullYear() 、getMonth()、getDate()、getHours()、getMinutes()、getSeconds();。

第二步:写入文档用到innerHTML 把新的时间覆盖到原文档上,所有语句为box.innerHTML = "您好,北京时间" +"<br/>" + h + ":" + m + ":" + sec +"<br/>" + y + "年" + (mon + 1) + "月" + dat + "日";这里需要注意的是我们需要用+把年月日等连接,用""(引号)把一些特殊字符引起来例如"<br/>",这样到Html才可以实现效果,除此之外,我们习惯显示的月份比系统返回的月份加上1,因为计算机默认的计算方式为0-11,而我们习惯是1-12。

第三步:setInterval(计时器)的应用,具体语法为setInterval(function(){},1000);其中1000为计时器每次刷新的时间,1000毫秒就是1秒,也就是说我们的页面1秒刷新1次。innerHTMLJS是双向功能:获取对象的内容或向对象插入内容;document.write()方法;常用来网页向文档中输出内容。
					

注意: 分钟和秒会出现个位数的情况,为了格式规范,可以加一个if判断,当小于10 的时候在前面加字符0,否则就是本身。

具体代码如下:

setInterval(function () {

var d = new Date();

var box = document.getElementById("box");

var y = d.getFullYear();

var mon = d.getMonth();

var dat = d.getDate();

var h = d.getHours();

var m = d.getMinutes();

var sec = d.getSeconds();

if (m < 10) {

m = "0" + m;

} else {

m = m;

};

if (sec < 10) {

sec = "0" + sec;

} else {

sec = sec;

};

box.innerHTML = "您好,北京时间" + "</br>" + h + ":" + m + ":" + sec + "<br/>" + y + "年" + (mon + 1) + "月" + dat + "日";

 

运行结果如下:

posted @ 2017-04-23 19:50  bonly-ge  阅读(281)  评论(0编辑  收藏  举报