黑马程序员技术交流社区

标题: 学习随笔 [打印本页]

作者: jonelee 时间: 2019-4-25 17:21
标题: 学习随笔
<!DOCTYPE html>
<html lang="zh_CN">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">


<title>Document</title>
<style>

</style>
</head>

<body>
<div class="witch">
      <div>
         <div class="dot"></div>
         <div class="sz"></div>
         <div class="fz"></div>
         <div class="mz"></div>
         
         <span class="kedu"></span>
         <span class="kedu"></span>
         <span class="kedu"></span>
         <span class="kedu"></span>
         <span class="kedu"></span>
         <span class="kedu"></span>
         <span class="kedu"></span>
         <span class="kedu"></span>
         <span class="kedu"></span>
         <span class="kedu"></span>
         <span class="kedu"></span>
         <span class="kedu"></span>
      </div>
</div>
<div class="box">
      <div class="num_witch">
         <input type="text" value="00" id="hour">:
         <input type="text" value="00" id="min">:
         <input type="text" value="00" id="sec">
      </div>

</div>

<script>
      var sz = document.querySelector(".sz");
      var fz = document.querySelector(".fz");
      var mz = document.querySelector(".mz");
      var hour = document.querySelector("#hour");
      var min = document.querySelector("#min");
      var sec = document.querySelector("#sec");

      // 获取刻度
      var kedu = document.querySelectorAll(".kedu");

      // 旋转刻度
      for (let i = 0; i < kedu.length; i++) {
         kedu[i].style.transform = "rotate(" + i * 30 + "deg)";
      }

      function gettTime() {
         var date = new Date();
         var hours = date.getHours();
         var mins = date.getMinutes();
         var seconds = date.getSeconds();

         if (seconds % 60 == 0) {
            mz.style.transform = "rotate(-90deg)";

         }
         if (mins % 60 == 0) {
            fz.style.transform = "rotate(-90deg)";

         }
         if (hours % 12 == 0) {
            sz.style.transform = "rotate(-90deg)";

         }
         sz.style.transform = "rotate(" + (30 * (hours % 12) - 90 + (1 / 12) * mins) + "deg)";
         fz.style.transform = "rotate(" + (6 * mins - 90 + 0.1 * seconds) + "deg)";
         mz.style.transform = "rotate(" + (6 * seconds - 90) + "deg)";

         if (hours < 10) {
            hours = "0" + hours;
         }
         if (mins < 10) {
            mins = "0" + mins;
         }
         if (seconds < 10) {
            seconds = "0" + seconds;
         }
         hour.setAttribute("value", hours);
         min.setAttribute("value", mins);
         sec.setAttribute("value", seconds);

      }
      setInterval(gettTime, 1000);
</script>
</body>
<style>
body {
background-color: (255, 255, 255);
}

.witch {
position: relative;
width: 200px;
height: 200px;
border: 10px solid #000;
border-radius: 50%;
background-color: transparent;
margin: 0 auto;

}
.witch div:nth-child(1) {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 190px;
height: 190px;
border-radius: 50%;
margin: auto auto;
background-color: #fff;
/* background-color: transparent; */
box-shadow: 0 0 20px rgba(115, 115, 115, 0.387);

}

.dot {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
/* height: 20px; */
height: 20px;
border-radius: 50%;
background-color: #000;

}

.sz {
position: absolute;
left: 100px;
top: 96px;
width: 40px;
height: 6px;
background-color: #000;
transform-origin: 0 3px;
transform: rotate(-90deg);
/* transition: transform 1s linear; */

/* transform: ra */

}

.fz {
position: absolute;
left: 100px;
top: 97px;
width: 55px;
height: 4px;
background-color: #000;
transform-origin: 0 2px;
transform: rotate(-90deg);
/* transition: transform 1s linear; */

}

.mz {
position: absolute;
left: 100px;
top: 98px;
width: 70px;
height:2px;
background-color: #000;
transform-origin: 0 1px;
transform: rotate(-90deg);
/* transition: transform 1s linear; */

}
.kedu {
position: absolute;
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: 0 100px;
transform: rotate(0);

width: 2px;
height: 16px;
background-color: #000;
}

/* 数字时间 */
.box {
margin-top: 10px;

}
.num_witch {
display: flex;
justify-content: space-around;
width: 100px;
height: 30px;
margin: 0 auto;
color: #000;
}
.num_witch input {
width: 20px;
text-align: center;
}

</style>

</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2