声明：此项目来源于网络。

html代码部分

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Clock UI desgin</title>
<link rel="stylesheet" href="style.css">
</head>

<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="Second">00</span> <span>Second</span></div>
  </div>
</div>

<script type="text/javascript">
function clcok(){
var hours = document.getElementById('hour');
var Minutes = document.getElementById('Minutes');
var Second = document.getElementById('Second');

var h = new Date().getHours();
var m = new Date().getMinutes();
var s = new Date().getSeconds();

hours.innerHTML = h;
Minutes.innerHTML = m;
Second.innerHTML = s;
}

var interval = setInterval(clcok , 1000);

</script>
</body>

CSS部分

@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&diaplay=swap');
*{

    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: #ffffff;
    text-align: center;
    margin: 10px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 0.8em;
}

#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: #ffffff;
    font-weight: 300;
    display: flex;
    justify-content: 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;
}

显示效果：

显示效果

Digital Colock

html代码部分

CSS部分

显示效果：

猜你喜欢