#### 必备知识 const 关键字 模板字符串
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>demo</title>
- <style>
- html{
- background: lightblue;
- font-family: "Comic Sans MS";
- font-size:10px;
- text-align:center;
- }
- body{
- margin:0;font-size:2rem;display:flex;flex:1;min-height:100vh;align-items:center;
- }
- .clock{
- width:30rem;height:30rem;border: 20px solid white;
- border-radius:50%;margin:50px auto;position:relative;padding:2rem;
- box-shadow:0 0 0 4px rgba(0,0,0,.1),
- /*inset 0 0 0 3px #EFEFEF,!* 里面的阴影 *!*/
- inset 0 0 10px black,/* 里面的里面的阴影 */
- 0 0 5px rgba(0,0,0,.9);
- }
- .clock-face{
- width:100%;height:100%;position:relative;
- transform:translateY(-3px);
- }
- .clock-face:before{
- content:"";width: 20px;height: 20px;border-radius: 50%;background-color: white;
- position: absolute;top:174px;left:170px;z-index: 998;
- box-shadow: 0 0 7px rgba(0,0,0,.5);
- }
- .hand{
- width:50%;height:6px; background:white;
- box-shadow: 0 0 7px rgba(0,0,0,.5);
- border-radius:10px;
- position:absolute;top:50%;
- /* 调整指针的初始位置以及旋转的轴点: transform-oragin*/
- transform-origin:100%;
- transform: rotate(90deg);
- transition:all 0.05s;
- transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
- }
- </style>
- </head>
- <body>
- <div class="clock">
- <div class="clock-face">
- <div class="hand hour-hand"></div>
- <div class="hand min-hand"></div>
- <div class="hand second-hand"></div>
- </div>
- </div>
- <script>
- const secondHand = document.querySelector('.second-hand');
- const minsHand = document.querySelector('.min-hand');
- const hourHand = document.querySelector('.hour-hand');
- function setDate() {
- const now = new Date();
- const seconds = now.getSeconds();
- const secondsDegrees = ((seconds / 60) * 360) + 90;
- secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
- const mins = now.getMinutes();
- const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
- minsHand.style.transform = `rotate(${minsDegrees}deg)`;
- const hour = now.getHours();
- const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
- hourHand.style.transform = `rotate(${hourDegrees}deg)`;
- }
- setInterval(setDate, 1000);
- setDate();
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/40694/0f0a6cc691a79f96b7dd2c9742187eb9.html