内置对象钟表
<!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>
<style>
#miao{width: 3px;height: 40px;background: red;
/*transform: rotate(6deg);*/
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="box">
<div id="shi"></div>
<div id="fen"></div>
<div id="miao"></div>
</div>
</body>
</html>
<script>
/*Date日期和时间对象*/
/* console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())
console.log(date.getMonth())
console.log(date.getFullYear())
console.log(date.getDate())
console.log(date.getDay())
console.log(date.getTime())*/
const div1=document.getElementById('div1')
function setTime(){
const date = new Date()
// div1.innerHTML=date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
div1.innerHTML=date.toLocaleTimeString()
}
setTime()
setInterval(setTime,1000)
/**************************************************/
const miao=document.getElementById('miao')
setInterval(function () {
const date = new Date()
miao.style. transform='rotate('+date.getSeconds()*6+'deg)'
},1000)
</script>
<!--1.布局-->
<!--2.用css使秒针旋转6度-->
<!--3.把第二步的css删掉，用js控制css，使秒针旋转6度-->
<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>
<style>
#miao{width: 3px;height: 40px;background: red;
/*transform: rotate(6deg);*/
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="box">
<div id="shi"></div>
<div id="fen"></div>
<div id="miao"></div>
</div>
</body>
</html>
<script>
/*Date日期和时间对象*/
/* console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())
console.log(date.getMonth())
console.log(date.getFullYear())
console.log(date.getDate())
console.log(date.getDay())
console.log(date.getTime())*/
const div1=document.getElementById('div1')
function setTime(){
const date = new Date()
// div1.innerHTML=date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
div1.innerHTML=date.toLocaleTimeString()
}
setTime()
setInterval(setTime,1000)
/**************************************************/
const miao=document.getElementById('miao')
setInterval(function () {
const date = new Date()
miao.style. transform='rotate('+date.getSeconds()*6+'deg)'
},1000)
</script>
<!--1.布局-->
<!--2.用css使秒针旋转6度-->
<!--3.把第二步的css删掉，用js控制css，使秒针旋转6度-->
浙公网安备 33010602011771号