JavaScript時(shí)間日期操作實(shí)例小結(jié)【5個(gè)示例】
更新時(shí)間：2018年12月22日 10:38:41 作者：huansky
這篇文章主要介紹了JavaScript時(shí)間日期操作,結(jié)合5個(gè)具體實(shí)例形式分析了javascript針對(duì)日期時(shí)間的各種常見操作技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript時(shí)間日期操作。分享給大家供大家參考，具體如下：
本來想在網(wǎng)上找一些js實(shí)例來練練手，結(jié)果發(fā)現(xiàn)一本書《突破JavaScript編程實(shí)例五十講》，看了下內(nèi)容還不錯(cuò)，就下了下來；
后面又下了該書籍的源碼，一看才發(fā)現(xiàn)這本書編的日期是2002年的，代碼運(yùn)行之后，有些代碼可以運(yùn)行，有些代碼已經(jīng)失效，原因是其所用的一些語(yǔ)言是已經(jīng)淘汰的了。
其次就是由于是很早之前寫的，那時(shí)候可能還沒有css，js,html分離的想法，都是雜糅在一起的，看起來很不舒服。
還有就是，代碼末尾都是不帶分號(hào)的，還有各種不加關(guān)鍵字var的隱性全局變量等，都影響了程序的整潔性，簡(jiǎn)潔性。
于是就想，要不我把他的代碼重新編寫，來實(shí)現(xiàn)書中的要求。
在此，也對(duì)該書的作者馬健兵等編著表示致敬，感謝他們的辛苦編著。
由于空間的限制，就不將js,css以單獨(dú)文件存儲(chǔ)了，全部都在html文件中，但已分離。
1、指定位置的時(shí)鐘顯示
時(shí)鐘始終顯示在網(wǎng)頁(yè)的正中間，12小時(shí)制。
效果圖：
源代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>指定位置的時(shí)鐘</title>
<style>
body{
font-size: 30px;
font-family: Arial;
background: #fef4d9;
}
#Current-time{
color:#66ff00;
font-size: 30px;
}
#liveclock{
position:absolute;
top:50%;
left: 50%;
width: 250px;
height: 100px;
margin: -50px 0 0 -125px;
}
p{
text-align: center;
color:#ff00ff;
margin: 0px;
}
</style>
</head>
<body>
<div id="liveclock" >
<div id="show"></div>
</div>
<script >
function display()
{
var Digital=new Date();
var hours=Digital.getHours();
var minutes=Digital.getMinutes();
var seconds=Digital.getSeconds();
var dn="AM";
if(hours>12) //改成12小時(shí)制的
{
dn="PM";
hours=hours-12;
}
if(hours==0)
hours=12;
if(minutes<=9)
minutes="0"+minutes; //改成兩位數(shù)的顯示
if(seconds<=9)
seconds="0"+seconds;
var myclock="<b><p id='Current-time'>Current time is:</p><p>"+hours+":"+minutes+":"+seconds+" "+dn+"</p></b>";
var liveclock=document.getElementById("liveclock");
liveclock.innerHTML=myclock;
setTimeout("display()",1000);
}
display();
</script>
</body>
</html>
2、表針式時(shí)鐘
由于書上的代碼太老了，看不懂，自己重新寫了一份。效果圖如下：
源代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表針式時(shí)鐘</title>
<style>
body{
background: #fef4d9;
}
#time{
position: absolute;
width: 212px;
height: 216px;
top:50%;
left: 50%;
margin: -108px 0 0 -106px;
border: 2px solid yellow;
}
.timeNum{
position: absolute;
}
#pt0{
position: absolute;
top:20px;
left: 105px;
border: 4px solid red;
height: 90px;
z-index: 1px;
}
#pt1{
position: absolute;
top:35px;
left: 105px;
border: 4px solid blue;
height: 75px;
z-index: 100px;
}
#pt2{
position: absolute;
top:50px;
left: 105px;
border: 4px solid yellow;
height: 60px;
z-index: 110px;
}
</style>
</head>
<body>
<div id="time">
<div id="c0" class="timeNum" > </div>
<div id="c1" class="timeNum"><b>1</b></div>
<div id="c2" class="timeNum"><b>2</b></div>
<div id="c3" class="timeNum"><b>3</b></div>
<div id="c4" class="timeNum"><b>4</b></div>
<div id="c5" class="timeNum"><b>5</b></div>
<div id="c6" class="timeNum"><b>6</b></div>
<div id="c7" class="timeNum"><b>7</b></div>
<div id="c8" class="timeNum"><b>8</b></div>
<div id="c9" class="timeNum"><b>9</b></div>
<div id="c10" class="timeNum"><b>10</b></div>
<div id="c11" class="timeNum"><b>11</b></div>
<div id="c12" class="timeNum"><b>12</b></div>
<div id="pt0" > </div>
<div id="pt1" ></div>
<div id="pt2" ></div>
</div>
</body>
<script language=javascript>
function getid(id){
return document.getElementById(id);
}
//將數(shù)字以圓形的形式顯示在屏幕上。根據(jù)三角函數(shù)的計(jì)算
function clockNum(){
for (var i=1; i<13;i++){
var c1=getid("c"+i);
angle=i*30/360*Math.PI*2;
c1.style.top=0+(100-Math.cos(angle)*100)+"px";
c1.style.left=100+Math.sin(angle)*100+"px";
}
}
function clockRotate(){
//獲取當(dāng)前的時(shí)間
var start= new Date();
var H=start.getHours();
var M=start.getMinutes();
var S=start.getSeconds();
//設(shè)置其旋轉(zhuǎn)的角度，分針每次6度，秒針每次6度，時(shí)針每次0.5度
var mDu=M*6;
var hDu=M*0.5+H*30;
var sDu=S*6;
var pt0=getid("pt0");
var pt1=getid("pt1");
var pt2=getid("pt2");
//設(shè)置其繞末端旋轉(zhuǎn)，寬度是在中間，高度是在整個(gè)高度的末尾，采用百分?jǐn)?shù)的形式
pt0.setAttribute('style',''+'transform:rotate('+ sDu +'deg); '+'transform-origin: center 93%;');
pt1.setAttribute('style',''+'transform:rotate('+ mDu +'deg); '+'transform-origin: center 94%;');
pt2.setAttribute('style',''+'transform:rotate('+ hDu +'deg); '+'transform-origin: center 95%;');
}
//每隔1毫秒檢測(cè)一次
setInterval(clockRotate,100);
function init(){
clockNum();
}
init();
</script>
</html>
3、帶按鈕開關(guān)的form時(shí)鐘
采用按鈕的形式進(jìn)行控制，按下開，顯示時(shí)間和日期，按下關(guān)，則清空。效果圖如下
源代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>帶按鈕開關(guān)的Form時(shí)鐘</title>
<style>
body{
background: #aebcdf;
}
form{
position:absolute;
left:50;
top:50;
z-index:5;
}
input{
color:red;
}
input[type="text"]{
color: black;
}
.center{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid yellow;
width: 220px;
height: 42px;
padding: 10px;
}
</style>
</head>
<body>
<div class="center">
<form name="clock" >
<input type="text" name="disp" value="" size=30 onFocus="this.blur()" ><br>
<input type="button" name="rad" value="off" id="offbtn" >關(guān)
<input type="button" name="rad" value=" on" id="onbtn">開
</form>
<div>
</body>
<script>
//公共事件
var common={
//獲取id
getid:function (id){
return document.getElementById(id);
},
//綁定事件
on:function (element,eventName,listener){
if (element.addEventListener){
element.addEventListener(eventName,listener,false);
}
else if (element.attachEvent){
element.attachEvent('on'+eventName,listener);
}
else
element['on'+eventName]=listener;
},
}
//時(shí)間的方法與屬性
var time={
//用來標(biāo)記是開還是關(guān)，0表示關(guān)
enabled:0,
//存儲(chǔ)星期
day:["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
//設(shè)定和顯示時(shí)間
//注意中間用了toLocaleString();
Time_Set:function ()
{
var today = new Date();
TM=window.setTimeout('time.Time_Set()', 1000);
var timeStr=today.toLocaleString()+" "+time.day[today.getDay()];
document.clock.disp.value = timeStr;
console.log(today.toLocaleString());
},
}
//全局定時(shí)函數(shù)名字
var TM;
//點(diǎn)擊開事件
var onbtn=common.getid("onbtn");
common.on(onbtn,'click',function(){
if(time.enabled == 0)
{
time.Time_Set();
time.enabled = 1;
}
});
//點(diǎn)擊關(guān)事件
var offbtn=common.getid("offbtn");
common.on(offbtn,'click',function(){
if( time.enabled==1 )
{
document.clock.disp.value='';
clearTimeout( TM );
time.enabled = 0;
}
});
</script>
</html>
4、年齡提示器
網(wǎng)頁(yè)打開時(shí)依次彈出3個(gè)輸入對(duì)話框，分別需要你輸入你的出生日期（年月日），然后顯示內(nèi)容，顯示你的出生年月，距離下一次你的生日還有多少時(shí)間，以及你活了多少時(shí)間。效果圖：
源代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>年齡提示器</title>
<style>
div{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
width: 375px;
height: 200px;
border: 2px solid red;
padding: 20px;
}
p{
margin: 0;
margin-bottom: 10px;
}
input{
margin-bottom: 10px;
}
</style>
</head>
<body bgcolor="f9fcb6" >
<div>
<form>
<p id="birday"></p>
<p id="age"></p>
<input type="text" name="nextYear" size="47" value="">
<p>I've been alive for...</p>
<input type="text" name="liveYear" size="47" value="">
<p>您已在本站停留了</p>
<input type=text name="input1" size=10 value="">
<br>
</form>
</div>
</body>
<script >
function getid(id){
return document.getElementById(id);
}
var timerID=window.setTimeout("showtime()",1);
//彈出輸入框，獲取用戶的出生日期,注意要把日期轉(zhuǎn)化為數(shù)字
var bMonth =parseInt(prompt('Which month were you born in?(月份)','1-12'));
var bDate =parseInt(prompt('Which day were you born on?(天)','1-31'));
var bYear =parseInt(prompt('Which year were you born in?(年份)','1900-'+new Date().getFullYear()));
var tMonth = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var corrMonth = tMonth[bMonth-1];
getid("birday").innerHTML=" I was born <b>"+corrMonth+", "+bDate+", "+bYear+"</b>. (<b>"+bMonth+"/"+bDate+"/"+bYear+"</b>)";
//傳入格式化后的時(shí)間，用來計(jì)算兩個(gè)時(shí)間差，nextAgeDay > today
function computeTime(nextAgeDay,today){
var day={};
var liveSec=nextAgeDay.getTime();
var lTime = today.getTime();
var daysec=24*60*60*1000;
var hoursec=60*60*1000;
var minsec=60*1000;
var tt=(-lTime+liveSec);
//計(jì)算時(shí)間差，天，小時(shí)，分，秒
day._1day=Math.floor(tt/daysec);
day._1hour=Math.floor((tt-day._1day*daysec)/hoursec);
day._1min=Math.floor((tt-day._1day*daysec-day._1hour*hoursec)/minsec);
day._1sec=Math.floor((tt-day._1day*daysec-day._1hour*hoursec-day._1min*minsec)/1000);
return day;
}
//計(jì)算距離下一歲還有多少天的時(shí)候，可以采用與現(xiàn)在的秒數(shù)相減getTime;
function showtime()
{
//獲取當(dāng)前日期
var today = new Date();
var month = today.getMonth() + 1;
var date = today.getDate();
var year = today.getFullYear();
//計(jì)算下一次生日是哪一年
var nextAgeYear;
var yourAge = year - bYear;
if (bMonth < month || ((bMonth == month) && (date > bdate))) {
yourAge--;
nextAgeYear=year+1;
}
else {
nextAgeYear=year;
}
//下一年幾歲
var nextAge = yourAge + 1;
//將下一次生日時(shí)間格式化，默認(rèn)時(shí)間在00:00;計(jì)算距離下一次生日還還有多長(zhǎng)時(shí)間
var nextAgeDay = new Date(""+nextAgeYear+","+bMonth+", "+bDate+" , 00:00");
var day=computeTime(nextAgeDay,today);
//將出生日期時(shí)間格式化，默認(rèn)時(shí)間在00:00;計(jì)算已經(jīng)活了多久了
var bornAgeDay = new Date(""+bYear+","+bMonth+", "+bDate+" , 00:00");
var lday=computeTime(today,bornAgeDay);
//將結(jié)果輸出
document.forms[0].nextYear.value =""+day._1day+"days, "+day._1hour+"hours, "+day._1min+"minutes, "+day._1sec+"seconds";
getid("age").innerHTML=" I am <b>"+yourAge+"</b> years old, and will turn <b>"+nextAge+"</b> in:";
document.forms[0].liveYear.value =""+lday._1day+"days, "+lday._1hour+"hours, "+lday._1min+"minutes, "+lday._1sec+"seconds";
timerID = window.setTimeout("showtime()",1000);
}
//第三個(gè)輸入框,計(jì)算停留時(shí)間
var sec=0;
var min=0;
var hou=0;
var idt=window.setTimeout("update();",1);
function update()
{
if(sec==60){sec=0;min+=1;}
if(min==60){min=0;hou+=1;}
document.forms[0].input1.value=hou+"時(shí)"+min+"分"+sec+"秒";
idt=window.setTimeout("update();",1000);
sec++;
}
</script>
</html>
5、得到文件的最后修改時(shí)間
本節(jié)主要講獲取HTML文件的最后修改時(shí)間。效果如下，其實(shí)跟前面的例子很像。
源代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>獲得文件的最后修改時(shí)間</title>
<style>
body{
background: yellow;
}
.center{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
width: 300px;
height: 110px;
border: 2px solid red;
padding: 10px;
}
p{
text-align: center;
margin: 0px;
padding: 10px;
}
</style>
</head>
<body>
<script>
//獲得文件的格式化最后修改時(shí)間
function DocDate()
{
var StrofLastMod = document.lastModified;
//獲得文件的最后修改時(shí)間，它是一個(gè)string類型的變量。
var months = ["January","February","March","April","May","June","July","August", "September","October","November","December"]; //月份名變量，供轉(zhuǎn)換。
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];//星期名變量，供轉(zhuǎn)換
var c = ":"; //用來分隔時(shí)，分，秒。
var mdate =new Date(StrofLastMod);
var month = months[mdate.getMonth()];
var date = mdate.getDate();
var year = mdate.getFullYear();
var day = days[mdate.getDay()];
var minutes=mdate.getMinutes();
var hours= mdate.getHours();
var seconds=mdate.getSeconds();
var miliSec=mdate.getMilliseconds();
var dateStr = year+" "+month+" "+date+" "+day+" "+hours+c+minutes+c+seconds+"."+miliSec; //獲得格式化的文件最后修改時(shí)間。
return dateStr;
}
var div=document.createElement("div");
div.className="center";
var divson=document.createElement("div");
divson.innerHTML="<p>This File is last updated at:</p><p>"+DocDate()+"</p><p>"+document.lastModified+"</p>";
div.appendChild(divson);
document.body.appendChild(div);
</script>
</body>
</html>
PS：這里再為大家推薦幾款比較實(shí)用的天數(shù)計(jì)算在線工具供大家使用：
在線日期/天數(shù)計(jì)算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期計(jì)算器/相差天數(shù)計(jì)算器：
http://tools.jb51.net/jisuanqi/datecalc
在線日期天數(shù)差計(jì)算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
在線天數(shù)計(jì)算器：
http://tools.jb51.net/jisuanqi/datejsq
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript時(shí)間與日期操作技巧總結(jié)》、《JavaScript+HTML5特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js 格式化時(shí)間日期函數(shù)小結(jié)
- JS獲取時(shí)間的相關(guān)函數(shù)及時(shí)間戳與時(shí)間日期之間的轉(zhuǎn)換
- WdatePicker.js時(shí)間日期插件的使用方法
- js時(shí)間日期和毫秒的相互轉(zhuǎn)換
- JavaScript時(shí)間戳與時(shí)間日期間相互轉(zhuǎn)換
- 原生javascript實(shí)現(xiàn)自動(dòng)更新的時(shí)間日期
- js時(shí)間日期格式化封裝函數(shù)
- js和C# 時(shí)間日期格式轉(zhuǎn)換的簡(jiǎn)單實(shí)例
- javascript 格式化時(shí)間日期函數(shù)代碼腳本之家修正版
- .Net與JS時(shí)間日期格式的轉(zhuǎn)換問題對(duì)比分析
相關(guān)文章
JavaScript+Canvas實(shí)現(xiàn)酷炫的粒子和流星效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript和Canvas實(shí)現(xiàn)酷炫的粒子和流星動(dòng)畫效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-01-01
js中的變量都是公用的沒有靜態(tài)變量，下面為大家介紹下變量的作用域閉包,需要的朋友可以參考下2014-05-05
javascript 讀取xml,寫入xml 實(shí)現(xiàn)代碼
javascript xml讀取,寫入xml 實(shí)現(xiàn)代碼2009-07-07
JS實(shí)現(xiàn)課程表小程序(仿超級(jí)課程表)加入自定義背景功能
這篇文章主要介紹了JS實(shí)現(xiàn)課程表小程序(仿超級(jí)課程表)加入自定義背景功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
微信小程序跨頁(yè)面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過程解析
這篇文章主要介紹了微信小程序跨頁(yè)面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
JS操作XML實(shí)例總結(jié)(加載與解析XML文件、字符串)
這篇文章主要介紹了JS操作XML的方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript加載與解析XML文件及字符串的相關(guān)技巧,需要的朋友可以參考下2015-12-12
使用JavaScript實(shí)現(xiàn)一個(gè)炫酷的羅盤時(shí)鐘
在探究前端動(dòng)畫時(shí),想到之前在鎖屏壁紙看到的羅盤時(shí)鐘,看著很是炫酷,于是說干就干,下面就跟隨小編一起來學(xué)習(xí)一下如何使用JS實(shí)現(xiàn)一個(gè)炫酷的羅盤時(shí)鐘效果吧2024-02-02
可以先使用 DOM 的 createElement 方法創(chuàng)建 tr 和 td，然后對(duì) td 的 innerHTML 進(jìn)行相應(yīng)操作，最后用 appendChild 方法把創(chuàng)建的元素添加到 DOM 樹中。這樣在 IE 下就可以正常運(yùn)行了。2009-08-08
js實(shí)現(xiàn)兼容IE和FF的上下層的移動(dòng)
本來是很簡(jiǎn)單的一個(gè)功能，可是一開始弄的時(shí)候，還有IE能實(shí)現(xiàn)，F(xiàn)F總是不能實(shí)現(xiàn)，在網(wǎng)上看了半天，也沒弄出個(gè)所以然，所以在同事的幫忙下，總算弄出來了，瀏覽器的兼容性考的還是細(xì)節(jié)上面的東西，所有關(guān)于細(xì)節(jié)的，我會(huì)用注釋標(biāo)出來的。2015-05-05
document.createElement()是在對(duì)象中創(chuàng)建一個(gè)對(duì)象，要與appendChild() 或 insertBefore()方法聯(lián)合使用。其中，appendChild() 方法在節(jié)點(diǎn)的子節(jié)點(diǎn)列表末添加新的子節(jié)點(diǎn)2013-03-03