JavaScript電子時鐘倒計時
更新時間：2022年06月19日 11:23:01 作者：Cakty、Riven
這篇文章主要介紹了JavaScript電子時鐘倒計時的實現代碼，具有一定的參考價值，感興趣的朋友可以參考一下
本文實例講解了JavaScript電子時鐘倒計時的詳細代碼，分享給大家供大家參考，具體內容如下
JavaScript時間類
1、獲取時分秒：
getHours()
getMinutes();
getSeconds();
2、獲取年月日：
getFullYear();
getMonth() + 1;//獲取的月份需要+1；
getDate(); //日期
getDay(); //獲取的是星期，0--》星期天
效果圖：
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電子時鐘</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 200px;
height: 100px;
background-color: black;
}
#time{
color: #fff;
display: block;
font-size: 24px;
margin: 0 auto;
padding-top: 20px;
/*border: 1px solid red;*/
text-align: center;
width: 100px;
}
#timer{
color: green;
display: block;
font-size: 18px;
margin: 0 auto;
padding-top: 10px;
/*border: 1px solid red;*/
text-align: center;
/*width: 100px;*/
}
</style>
</head>
<body>
<div id="wrap">
<span id="time"></span>
<span id="timer"></span>
</div>
<script type="text/javascript">
var time =document.getElementById("time");
var timer =document.getElementById("timer");
setInterval(function() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var years = date.getYear();
var dates = date.getDate();
var monts = date.getMonth()+1;
var day = date.getDay();
var parses = date.getMilliseconds()%60;
switch(day){
case 0:
day="日";
case 1:
day="一";
case 2:
day="二";
case 3:
day="三";
case 4:
day="四";
case 5:
day="五";
case 6:
day="六";
}
//如果秒數小于十，在秒數面前連接一個0
if(seconds < 10) {
seconds = "0" + seconds;
}
//如果分鐘數小于十，在分鐘數面前連接一個0
if(minutes < 10) {
minutes = "0" + minutes;
}
//如果小時數小于十，在小說數面前連接一個0
if(hours < 10) {
hours = "0" + hours;
}
if(years<1900) {
years = years+1900;
}
if(dates<10) {
dates = "0" + dates;
}
if(monts<10) {
monts = "0" + monts;
}
if(parses<10) {
// parses = "0" + parses;
}
timer.innerHTML = years +"年" +monts+ "月" +dates +"號"+"星期"+day;
time.innerHTML = hours + ":" + minutes + ":" + seconds + ":" + parses;
// date.getTime()//返回的是一個從1970年到當前的毫秒數（時間戳）（ms）
// date.getMonth()//返回的是月份，從0開始算
// date.getFullYear();
},10)
</script>
</body>
</html>
以上就是本文的詳細內容，希望對大家的學習javascript程序設計有所幫助。
相關文章
這篇文章主要介紹了微信小程序仿抖音短視頻切換效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
利用javascript中的call實現繼承...2007-01-01
這篇文章介紹了JS獲取地址欄參數的小例子，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了JavaScript enum枚舉類型定義及使用方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
JavaScript數組Array對象增加和刪除元素方法總結
這篇文章主要介紹了JavaScript數組Array對象增加和刪除元素方法,實例總結了pop方法、push方法、splice方法、concat方法等的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JS中的數組轉變成JSON格式字符串的方法,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了JavaScript閉包原理與用法,結合實例形式詳細分析了JavaScript閉包相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-05-05
關于JS彈出層的顯示與隱藏，在網上可以搜到很多的類似教程，本文實現了一下，喜歡的朋友不要錯過2013-12-12
獲取url上的某個參數的方法有很多，在本文為大家介紹下使用javascript是如何實現的，感興趣的朋友不要錯過2013-11-11
開發(fā)人員在javascript類中為實例中需要的任何書籍創(chuàng)建屬性，但是如果實例中可用之前需要計算某些數據該如何處理呢，今天小編通過本文給大家分享JavaScript 中的延遲加載屬性模式，一起看看吧2021-06-06