<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>電子時(shí)鐘</title>
? ? <style>
? ? ? ? .box {
? ? ? ? ? ? width: 550px;
? ? ? ? ? ? height: 70px;
? ? ? ? ? ? background-color: seagreen;
? ? ? ? ? ? border: 5px solid #ccc;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? border-radius: 10px;
? ? ? ? ? ? font-size: 30px;
? ? ? ? ? ? margin: 200px auto;
? ? ? ? ? ? color: #fff;
? ? ? ? }
? ? ? ??
? ? ? ? .box span {
? ? ? ? ? ? line-height: 70px;
? ? ? ? }
? ? </style>
</head>
?
<body>
? ? <div class="box">
? ? ? ? <span class="one"></span>
? ? ? ? <span class="two"></span>
? ? </div>
? ? <script>
? ? ? ? //刷新頁面不出錯(cuò)
? ? ? ? var timer = setTimeout(function() {
? ? ? ? ? ? var one = document.querySelector('.one');
? ? ? ? ? ? var two = document.querySelector('.two');
? ? ? ? ? ? var date = new Date();
? ? ? ? ? ? var year = date.getFullYear();
? ? ? ? ? ? var month = date.getMonth() + 1;
? ? ? ? ? ? var dates = date.getDate();
? ? ? ? ? ? var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ];
? ? ? ? ? ? var day = arr[date.getDay()];
? ? ? ? ? ? one.innerHTML = (year + '年' + month + '月' + dates + '日 ' + day);
? ? ? ? ? ? two.innerHTML = (getTime());
? ? ? ? ? ? clearInterval(timer);
?
? ? ? ? });
? ? ? ? //設(shè)置定時(shí)器
? ? ? ? setInterval(function() {
? ? ? ? ? ? //格式化日期 年月日
? ? ? ? ? ? var one = document.querySelector('.one');
? ? ? ? ? ? var two = document.querySelector('.two');
? ? ? ? ? ? var date = new Date();
? ? ? ? ? ? var year = date.getFullYear();
? ? ? ? ? ? var month = date.getMonth() + 1;
? ? ? ? ? ? var dates = date.getDate();
? ? ? ? ? ? var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ];
? ? ? ? ? ? var day = arr[date.getDay()];
? ? ? ? ? ? one.innerHTML = (year + '年' + month + '月' + dates + '日 ' + day);
? ? ? ? ? ? two.innerHTML = (getTime());
? ? ? ? }, 1000);
?
? ? ? ? //要求封裝一個(gè)函數(shù)返回當(dāng)前的時(shí)分秒 格式：08：08：08
? ? ? ? function getTime() {
? ? ? ? ? ? var time = new Date();
? ? ? ? ? ? var h = time.getHours();
? ? ? ? ? ? h = h < 10 ? '0' + h : h;
? ? ? ? ? ? var m = time.getMinutes();
? ? ? ? ? ? m = m < 10 ? '0' + m : m;
? ? ? ? ? ? var s = time.getSeconds();
? ? ? ? ? ? s = s < 10 ? '0' + s : s;
? ? ? ? ? ? return h + ':' + m + ':' + s;
? ? ? ? }
? ? </script>
</body>
?
</html>