1、现在时间
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>北京时间</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
font-size: 70px;
text-align: center;
font-family: 宋体;
}
p span {
display: block;
color: black;
float:left;
}
p#math {
color: red;
height: 80px;
width:990px;
margin:0 auto;
}
p#math div {
text-align: center;
width: 40px;
height: 80px;
line-height: 80px;
float: left;
font-family: UniDreamLED;
}
img{
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<p id="char">北京时间,现在是:</p>
<p id="math"></p>
<script>
var math = document.getElementById('math');
function tow(n) {
var str1="";
n = n >= 0 && n < 10 ? '0' + n : '' + n;
for (var i = 0; i < n.length; i++) {
var str2=n[i];
str2="<div>"+str2+"</div>";
str1+=str2;
}
return str1;
}
function getDate() {
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth() + 1;
var date = nowDate.getDate();
var hour = nowDate.getHours();
var minute = nowDate.getMinutes();
var second = nowDate.getSeconds();
var str = tow(year) + "<span>年</span>"
+ tow(month) + "<span>月</span>"
+ tow(date) + "<span>日</span>"
+ tow(hour) + "<span>时</span>"
+ tow(minute) + "<span>分</span>"
+ tow(second) + "<span>秒</span>";
math.innerHTML = str;
}
getDate();
setInterval(getDate, 1000);
</script>
</body>
</html>
```
2、倒计时:
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
}
p {
font-size: 95px;
text-align: center;
}
p span {
color: red;
}
p span.time {
color: black
}
</style>
</head>
<body>
<p>距离2020年还有</p>
<p><span></span></p>
<script>
var oSpan = document.getElementsByTagName('span')[0];
function tow(n) {
return n >= 0 && n < 10 ? '0' + n : '' + n;
}
function getDate() {
var oDate = new Date();//获取现在日期对象
var oldTime = oDate.getTime();//现在距离1970年的毫秒数
var newDate = new Date('2020/1/1 00:00:00');//获取指定日期对象
var newTime = newDate.getTime();//2020年距离1970年的毫秒数
var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
var day = Math.floor(second / 86400);//整数部分代表的是天;一天有24*60*60=86400秒 ;
second = second % 86400;//余数代表剩下的秒数;
var hour = Math.floor(second / 3600);//整数部分代表小时;
second %= 3600; //余数代表 剩下的秒数;
var minute = Math.floor(second / 60);
second %= 60;
var str = tow(day) + '<span class="time">天</span>'
+ tow(hour) + '<span class="time">小时</span>'
+ tow(minute) + '<span class="time">分钟</span>'
+ tow(second) + '<span class="time">秒</span>';
oSpan.innerHTML = str;
}
getDate();
setInterval(getDate, 1000);
</script>
</body>
</html>
```