js+css实现电子数字时钟效果代码-html代码-BFW代码库

js+css实现电子数字时钟效果代码

代码语言：html

代码描述：js+css实现电子数字时钟效果代码

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

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        @font-face{
         font-family:'digital-7';
         src: url('//repo.bfw.wiki/bfwrepo/fonts/digital-7.ttf');
        }
        
        * {
        	margin: 0;
        	padding: 0;
        }
        body {
          background-color: #47694a;
        	font-family: 'digital-7', sans-serif;
          padding: 50px 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        body h1 {
          font-size: 14px;
          font-weight: bold;
          text-align: center;
          text-transform: uppercase;
          font-family: sans-serif;
          padding-bottom: 15px;
        }
        body main.clock-display {
          display: inline-block;
        	text-align: center;
          padding: 15px 30px;
          border: solid 5px #ffffff;
          border-radius: 10px;
          margin: 60px auto 0 auto;
          background-color: #000000;
          color: #ffffff;
          box-shadow: 4px 4px 7px 4px rgba(0,0,0,.3);
        }
        .light-on {
        	color: #ffffff !important;
        }
        
        /* DATE */
        .date-field {
        	margin: 5px 0;
          display: flex;
          justify-content: space-between;
        }
        .date-field div {
        	display: inline-block;
        	position: relative;
        }
        .date-field div p {
        	font-size: 34px;
        	position: relative;
        	z-index: 100;
        }
        .date-field div p.placeholder {
        	color: #2b2828;
        	position: absolute;
        	top: 0;
        	z-index: 50;
        }
        .date-field div.day-of-week-mobile {
          display: none;
        }
        .date-field div.day-of-week p {
          font-size: 50px;
        }
        .date-field div p.type {
          font-size: 10px;
          font-weight: bold;
          font-family: sans-serif;
          text-transform: uppercase;
        }
        @media (max-width: 768px) {
          .date-field {
            justify-content: space-evenly;
          }
          .date-field div.day-of-week {
            display: none;
          }
          .date-field div.day-of-week-mobile {
            display: inline-block;
          }
          .date-field div.day-of-week-mobile p {
            font-size: 56px;
            margin-top: -2px;
          }
        }
        @media (max-width:550px) {
          .dat.........完整代码请登录后点击上方下载按钮下载查看