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

代码语言：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) {
          .date-field div.day-of-week-mobile p {
            font-size: 50px;
            margin-top: 0px;
          }
        }
        @media (max-width:468px) {
          .date-field div.day-of-week-mobile p {
            font-size: 42px;
          }
        }
        @media (max-width:400px) {
          .date-field div.day-of-week-mobile p {
            font-size: 20px;
          }
        }
        
        /* CLOCK */
        .clock-field {
        	margin: 5px 0;
          display: flex;
          justify-content: center;
        }
        .clock-field div {
        	display: inline-block;
        	position: relative;
        }
        .clock-field div p {
        	font-size: 100px;
        	position: relative;
        	z-index: 100;
        }
        .clock-field .numbers .placeholder {
        	color: #2b2828;
        	position: absolute;
        	top: 0;
        	z-index: 50;
        }
        .clock-field .numbers .type {
          font-size: 10px;
          font-weight: bold;
          font-family: sans-serif;
          text-transform: uppercase;
          margin-top: -10px;
        }
        .clock-field .am-pm {
        	font-family: sans-serif;
        	text-transform: uppercase;
        	width: 20px;
        }
        .clock-field .am-pm div p {
        	font-size: 12px;
        	font-weight: bold;
        	width: 100%;
        }
        .clock-field .am,
        .clock-field .pm {
        	color: #2b2828;
        }
        
        @media (max-width:768px) {
          main.clock-display {
            padding: 15px 30px;
          }
          .desktop-view {
            display: none;
          }
        }
        
        @media (max-width:550px) {
          .date-field div p {
            font-size: 30px;
          }
          .clock-field div p {
          	font-size: 80px;
          }
        }
        
        @media (max-width:468px) {
          .date-field div p {
            font-size: 24px;
          }
          .clock-field div p {
          	font-size: 60px;
          }
        }
        
        @media (max-width:400px) {
          .date-field div p {
            font-size: 20px;
          }
          .days .day p,
          .clock-field .am-pm div p {
            font-size: 10px;
          }
          .clock-field div p {
          	font-size: 50px;
          }
        }
        
        @media (max-width:350px) {
          .date-field div p {
            font-size: 20px;
          }
          .clock-field div p {
          	font-size: 43px;
          }
        }
        
        @media (max-width:320px) {
          .date-field div p {}
          .clock-field div p {
          	font-size: 40px;
          }
        }
    </style>

</head>

<body>
    <main class="clock-display">
        <h1>Clock.js</h1>
        <div class="date-field">
            <div class="day-of-week">
                <p class="day-alpha"></p>
                <p class="placeholder">mmmmmmmmm</p>
                <p class="placeholder">ooooooooo</p>
                <p class="placeholder">nnnnnnnnn</p>
                <p class="placeholder">ttttttttt</p>
                <p class="placeholder">uuuuuuuuu</p>
                <p class="placeholder">eeeeeeeee</p>
                <p class="placeholder">sssssssss</p>
                <p class="placeholder">wwwwwwwww</p>
                <p class="placeholder">hhhhhhhhh</p>
                <p class="placeholder">rrrrrrrrr</p>
                <p class="placeholder">fffffffff</p>
                <p class="placeholder">iiiiiiiii</p>
                <p class="placeholder">ddddddddd</p>
                <p class="placeholder">aaaaaaaaa</p>
                <p class="placeholder">yyyyyyyyy</p>
            </div>
            <div class="day-of-week-mobile">
                <p class="day-alpha-mobile"></p>
                <p class="placeholder">mmm</p>
                <p class="placeholder">ooo</p>
                <p class="placeholder">nnn</p>
                <p class="placeholder">ttt</p>
                <p class="placeholder">uuu</p>
                <p class="placeholder">eee</p>
                <p class="placeholder">sss</p>
                <p class="placeholder">www</p>
                <p class="placeholder">hhh</p>
                <p class="placeholder">rrr</p>
                <p class="placeholder">fff</p>
                <p class="placeholder">iii</p>
            </div>
            <div class="month">
                <p class="month-alpha"></p>
                <p class="placeholder".........完整代码请登录后点击上方下载按钮下载查看