JS 原生时钟效果

最新推荐文章于 2023-03-28 10:05:55 发布

weixin_49857754

最新推荐文章于 2023-03-28 10:05:55 发布

阅读量101

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_49857754/article/details/108393261

版权

学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>
<style>
  #imgBox{
    border:1px black solid ;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    position: relative;
  }
  #box1{
    height: 200px ;
    width: 2px;
    margin: 0 auto;
  }
#top{
  background-color: gray;
  height: 100px;
  width: 2px;
    }
  #button{
  height: 100px
}
  #box2{
    position: absolute;
    margin: auto 0;
    height: 60%;
    top: 20%;
    left: 98px;
  }
  #left{
    height: 50%;
    background-color: black;
    width: 4px;
  }
  #right{
    height: 50%;
  }
</style>
<body>
<div id="imgBox">
  <div id="box1">
    <div id="top"></div>
    <div id="button"></div>
  </div>
  <div id="box2">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</div>
<div><input type="text" id="hour" placeholder="请输入小时数"></div>
<div><input type="text" id="minutes" placeholder="请输入分钟数"></div>
<div><button οnclick="changeTime()">显示</button></div>
</body>
</html>
<script>
  console.log('begin')
  setTimeout(() => {
    console.log('setTimeout 1')
    Promise.resolve().then(() => {
      console.log('promise 1')
      setTimeout(() => {
        console.log('setTimeout2 between promise1&2')
      })
    }).then(() => {
      console.log('promise 2')
    })
  }, 0)
  console.log('end');
var minute = document.getElementById('box1');
var hour = document.getElementById('box2');
var hourValue = document.getElementById('hour');
var minutersValue = document.getElementById('minutes');
function changeTime() {
  if ((hourValue.value<=12)&&(hourValue.value>0)&&(minutersValue.value>=0)&&(minutersValue.value<60)){
  var minutesDeg =6*minutersValue.value;
    console.log(minutesDeg)
  var hourDeg = hourValue.value*30 + 0.5*minutersValue.value;
    console.log(hourDeg)
  hour.style.transform =' rotate('+ hourDeg + 'deg)';
  minute.style.transform = ' rotate(' + minutesDeg + 'deg)';
  }else {
    alert('请检查输入内容是否正确');
  }
}
</script>