极简风Js时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实时显示</title>
<style>
html *{
margin: 0;
padding: 0;
}
body{
background-color: #fdf6e3;
height: 100vh;
display: flex;
align-items: center;
}
section{
text-align: center;
font-size: 55px;
font-style: bold;
color: #509839;
flex: 1 0 auto
}
</style>
<script>
window.onload = function(){
function getCurrentTime(){
var dt = new Date();
// 获取年份
var CurrentYear = dt.getFullYear();
// 获取月份
var CurrentMonth = dt.getMonth() + 1;
// 获取日
var CurrentDay = dt.getDate();
// 获取小时
var CurrentHour = dt.getHours();
// 获取分钟
var CurrentMinter = dt.getMinutes();
// 获取秒
var CurrentSeconds = dt.getSeconds();
var dataArray = [CurrentYear, CurrentMonth, CurrentDay, CurrentHour, CurrentMinter, CurrentSeconds]
// 保持稳定的两位数
for (let i = 0; i<dataArray.length; i++){
if (dataArray[i] <= 9){
console.log("==>", dataArray[i]);
dataArray[i] = "0" + dataArray[i];
console.log(dataArray[i], "<==");
}
}
return dataArray
}
var eleYMD = document.getElementById('YMD');
var eleHMS = document.getElementById('HMS');
function showTime(){
let dataArray = getCurrentTime()
var Ymd = dataArray[0]+"年"+dataArray[1]+"月"+dataArray[2]+"日";
var Hms = dataArray[3]+"时"+dataArray[4]+"分"+dataArray[5]+"秒";
eleYMD.innerHTML = Ymd;
eleHMS.innerHTML = Hms;
}
// 避免页面启动短暂空白;
showTime();
setInterval(showTime, 1000);
}
</script>
</head>
<body>
<section id="YMD"></section>
<section id="HMS"></section>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018.03.21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
