JavaScript电子时钟倒计时
时间：2020-10-11 10:45:08|栏目：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程序设计有所帮助。
