<!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>
