显早制作----数字时钟
数字时钟HTML
html>
<head>
<meta charset="utf-8">
<title>数字时钟</title>
</head>
<link rel="stylesheet" href="style.css" />
<body>
<div id="clock">
<!-- //标题 -->
<h2>the time is now</h2>
<div id="time">
<!-- //小时 -->
<div><span id="hour">00</span><span>Hours</span></div>
<!-- //分钟 -->
<div><span id="minutes">00</span><span>Minutes</span></div>
<!-- //秒 -->
<div><span id="seconds">00</span><span>Seconds</span></div>
</div>
</div>
</body>
</html>
数字时钟CSS
@charset "utf-8";
/* CSS Document */
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans',sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #060a1f;
}
#clock h2
{
position: relative;
display: block;
color: #fff;
text-align: center;
margin: 10px 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4em;
font-size: 0.7em;
}
#clock #time
{
display: flex;
}
#clock #time div
{
position: relative;
margin: 0 5px;
-webkit-box-reflect: below 1px linear-gradient(
transparent,#0004);
}
#clock #time div span
{
position: relative;
display: block;
width: 100px;
height: 80px;
background: #2196f3;
color: #fff;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
z-index: 10;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
#clock #time div span:nth-child(2)
{
height: 30px;
font-size: 0.7em;
letter-spacing: 0.2em;
font-weight: 500;
z-index: 9;
box-shadow: none;
background: #127fd6;
text-transform: uppercase;
}
#clock #time div:last-child span
{
background: #ff006a;
}
#clock #time div:last-child span:nth-child(2)
{
background: #ec0062;
}
数字时钟JS
// 获取系统时间 在进行赋值
function clock()
{
var hours = document.getElementById('hour');
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
var h = new Date().getHours();//小时
var m = new Date().getMinutes();//分钟
var s = new Date().getSeconds();//秒
hours.innerHTML = h;
minutes.innerHTML = m;
seconds.innerHTML = s;
}
var interval = setInterval(clock,1000);