HTML專案（打卡）——時間判斷
阿新 • • 發佈：2019-01-07
出於企業管理的便捷性，上下班打卡應運而生，且由來已久。立足於本公司實際情況，特准備開發一套內部使用的打卡機制，若後期發展穩定，將推廣。
由於暫時為制定詳細的專案規劃，本篇文章僅記錄自己做的小功能——時間判斷。
先來看下頁面效果
HTML和CSS的程式碼很簡單
.box{ width: 200px; height: 200px; } .kada{ width: 150px; height: 150px; border: 3px solid #f00; border-radius: 50%; background-color: #fff; }
<body onload="startTime()"> <!--一開始載入頁面就觸發這個獲取當前時間的函式-->
<div class="box">
<button class="kada" id="kada">
<div id="txt"></div>
咔噠
</button>
</div>
</body>主要程式碼在JS這裡：
var kada = document.getElementById("kada"); kada.onclick = function(){ //當點選kada時觸發時間比較 var thetime = '09:00:00'; //規定打卡時間 var time1 = txt.innerHTML; //當前時間 if(time1 <= thetime){ alert("打卡成功"); }else{ alert("已超過規定打卡時間"); } } function startTime(){ //獲取當前時間的函式 var today=new Date() var h=today.getHours() //時 var m=today.getMinutes() //分 var s=today.getSeconds() //秒 m=checkTime(m) s=checkTime(s) var txt = document.getElementById('txt').innerHTML=h+":"+m+":"+s t=setTimeout('startTime()',500) //每隔500就觸發一次函式 } function checkTime(i){ //檢查分和秒，如果小於10，則在數字前加上0 if (i<10) {i="0" + i} return i }