js可以通過Date對象擷取目前日期和時間,使用Date()擷取系統目前時間,在使用getFullYear()、getMonth()、getDate() 、getHours()等方法擷取特定格式的時間,在使用innerHTM方法顯示。
首先我們來了解一下js擷取目前時間所需的一些方法:
擷取目前時間:
擷取特定格式的時間:
1、擷取目前年份
getYear()方法:可以擷取年份(2位或4位),其傳回值是表示目前Date 對象的年份字段
說明:當年份介于 1900 與 1999 之間時,getYear() 方法傳回僅有兩位數字的值;當年份在1900 之前或 1999 之後時,則可能傳回 4 位數字的值。例:
var d = new Date();
console.log(d.getYear());
var born = new Date("1983");
console.log(born.getYear());
注:getYear()方法無法擷取完整的年份,且在ECMAScript v3 開始,就被getFullYear() 方法取而代之,不怎麼被使用了。
getFullYear() 方法:可以擷取目前一個完整的年份(4位數字,1970-???)。例:
var d = new Date();
console.log(d.getFullYear());
var born = new Date("1983");
console.log(born.getFullYear());
2、擷取目前月份
getMonth():可以擷取本地時間的月份。
注:getMonth()方法傳回的值是從0(表示1月)開始,到11(表示12月)結束的一個整數,即0~11之間的一個整數;如果想要擷取和目前時間相同的月份,可在getMonth()方法傳回的值後加1。例:
var d=new Date();
console.log(d.getMonth());
console.log(d.getMonth()+1);
3、擷取目前天數
getDate() :可以傳回一個月份的某一天,使用本地時間;傳回值是 在1 ~ 31 之間的一個整數。例
var d = new Date();
console.log(d.getDate())
var d = new Date(“July 21, 1983”);
console.log(d.getDate())
4、擷取目前時間
getHours():擷取小時數,傳回的小時數值是從0到23之間的整數
getMinutes():擷取分鐘數,傳回的分鐘數值是從0到59之間的整數
getSeconds():擷取秒數,傳回的秒數值是從0到59之間的整數
例:擷取目前時間
var d = new Date();
var hour= d.getHours();//得到小時數
var minute= d.getMinutes();//得到分鐘數
var second= d.getSeconds();//得到秒數
js擷取目前時間并顯示示例:
html+css代碼
<style type="text/css">
.time span{
display: inline-block;
width: 40px;
height: 20px;
}
</style>
<div class="time">當前時間:<br /><br />
<span id="y"></span_id>年
<span id="mo"></span_id>月
<span id="d"></span_id>日
<span id="h"></span_id>時
<span id="m"></span_id>分
<span id="s"></span_id>秒
<span id="time">1</span_id>//調用show()函數
</div>
js代碼:
function show(){
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth()+1;//得到月份
var date = now.getDate();//得到日期
// var day = now.getDay();//得到周幾
var hour= now.getHours();//得到小時數
var minute= now.getMinutes();//得到分鐘數
var second= now.getSeconds();//得到秒數
document.getElementById("y").innerHTML=year;
document.getElementById("mo").innerHTML=month;
document.getElementById("s").innerHTML=date;
document.getElementById("h").innerHTML=hour;
document.getElementById("m").innerHTML=minute;
document.getElementById("s").innerHTML=second;
setTimeout(show,1000);//定時器一直調用show()函數
return "";
}
第二種:用JS實作實時顯示系統時間
參考:https://blog.csdn.net/qq_36190858/article/details/86152204?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-4&spm=1001.2101.3001.4242
代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS時間</title>
<style>
</style>
</head>
<body>
<div id="time"></div>
<script type="text/javascript">
function time() {
var vWeek, vWeek_s, vDay;
vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var date = new Date();
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
hours = date.getHours();
minutes = date.getMinutes();
seconds = date.getSeconds();
vWeek_s = date.getDay();
document.getElementById("time").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s];
};
setInterval("time()", 1000);
</script>
</body>
</html>
效果圖如下: