<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.time{
font-size: 30px;
color: #FF0000;
}
.test{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h2>敵軍還有 <span class="time">5</span>秒到達戰場</h2>
<h2>現在是北京時間: <span class="bj"></span></h2>
<script>
var obj = document.querySelector('.time');
// console.log(obj.innerText);
var time = obj.innerText; //5
function f() {
if(time===0){
clearInterval(ss); // 清除定時器
document.querySelector('h2').innerText = '全軍出擊，人在塔在';
document.querySelector('h2').style.color = 'red';
}
time -= 1; // 4 3 2 1
obj.innerText = time;
}
var ss = setInterval(f,1000);
// 時間
function f1() {
var today = new Date();
// console.log(today);
var year = today.getFullYear();
console.log(year);
var month = today.getMonth()+1;
var date = today.getDate();
var hour = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
month = change(month);
date = change(date);
hour = change(hour);
min = change(min);
sec = change(sec);
function change(n) {
a = '0' + n;
a = a.slice(-2); // 之獲取後兩位
return a
}
// aaa = year+'年'+month+'月'+date+'日'+hour+':'+min+':'+sec;
//console.log(aaa);
aaa = year+'<span class="test">年</span>'+month+'<span class="test">月</span>'+date+'<span class="test">日</span>'+hour+':'+min+':'+sec;
console.log(aaa);
document.querySelector('.bj').innerHTML = aaa;
}
f1(); // 消除延時
setInterval(f1,1000);
</script>
</body>
</html>
