js+css实现ios数字时间效果代码-html代码-BFW代码库

js+css实现ios数字时间效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现ios数字时间效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Work+Sans:200,300'>
  
<style>
body {
    font-family: "Work Sans", sans-serif;
    display: grid;
    place-items: center;
    height: 100vh;
    margin: 0;
}
.time {
    background: #222;
    color: #fff;
    padding: 8px;
    text-align: center;
    width: 300px;
}
.hms {
    font-size: 48pt;
    font-weight: 200;
}
.ampm {
    font-size: 12pt;
}
.date {
    font-size: 10pt;
}
</style>



</head>

<body >
  <div class="time">
  <span class="hms"></span>
  <span class="ampm"></span>
  <br>
  <span class="date"></span>
</div>

      <script  >
function updateTime() {
  var dateInfo = new Date();

  /* time */
  var hr,
  _min = dateInfo.getMinutes() < 10 ? "0" + dateInfo.getMinutes() : dateInfo.getMinutes(),
  sec = dateInfo.getSeconds() < 10 ? "0" + dateInfo.getSeconds() : dateInfo.getSeconds(),
  ampm = dateInfo.getHours() >= 12 ? "PM" : "AM";

  // replace 0 with 12 at midnight, subtract 12 from hou.........完整代码请登录后点击上方下载按钮下载查看