动态时钟可全屏 – 有爱前端

仿抖音罗盘时钟

<!DOCTYPE html> <html> <head>   <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>动态时钟</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="http://www.jq22.com/demo/jqueryszlp202003271653/js/test.js"></script> <script src="http://www.jq22.com/demo/jqueryszlp202003271653/js/common.js"></script> <script src="http://www.jq22.com/demo/jqueryszlp202003271653/js/config.js"></script> </head> <style> * { margin: 0; padding: 0; } body { background-attachment: fixed; color: #F5F4F6; font-size: 12px; font-weight: bold; overflow: hidden; /* width: 1000px; */ height: 900px; font-family: "微软雅黑"; } audio { position: absolute; right: 0; opacity: 0.1; transition: all 1s; } audio:hover { opacity: 1; } .current { color: #D1A3F7; } video { z-index: -1; /* object-fit: fill; */ position: fixed; /* right: 0px; bottom: 0px; */ min-width: 100%; min-height: 100%; /* height: auto; width: auto; */ } .main-content { position: absolute; top: 50%; left: 50%; } .main-content .year { position: relative; top: -13px; left: -38px; text-align: center } .main-content .year span { position: absolute; width: 80px; } .main-content .month { position: relative; top: -13px; left: 40px; } .month span { position: absolute; width: 60px; } .main-content .day { position: relative; top: -13px; left: 85px; } .day span { position: absolute; width: 65px; } .main-content .week { position: relative; top: -13px; left: 145px; } .week span { position: absolute; width: 65px; } .main-content .shichen { position: relative; top: -13px; left: 200px; } .shichen span { position: absolute; width: 125px; } .main-content .hour { position: relative; top: -13px; left: 240px; } .hour span { position: absolute; width: 60px; } .main-content .minute { position: relative; top: -13px; left: 300px; } .minute span { position: absolute; width: 60px; } .main-content .second { position: relative; top: -13px; left: 370px; } .second span { position: absolute; width: 60px; } #btn{font-size: 50px;float: right;margin: 50px 80px 0 0;cursor: pointer;} #btn:hover{color: teal;} </style> <body> <div class="btns"> <span id="btn">✦</span> </div> <div class="main-content"> <div class="year"> </div> <div class="month"></div> <div class="day"></div> <div class="week"></div> <div class="shichen"></div> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </div> </body> <script type="text/javascript"> document.getElementById('btn').onclick = function() { console.log('111') toggleFullScreen() }; function toggleFullScreen() { // alternative standard method if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 动态时钟可全屏