<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字时钟</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#clock{
width: 600px;
height: 600px;
background: url('images/clock.jpg') no-repeat;
position: relative;
}
#hour,#minute,#second{
position: absolute;
width: 30px;
height: 600px;
left: 50%;
top: 0;
margin-left: -15px;
}
#hour{
background: url('images/hour.png') no-repeat center center;
}
#minute{
background: url('images/minute.png') no-repeat center center;
}
#second{
background: url('images/second.png') no-repeat center center;
}
</style>
</head>
<body>
<div id="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<script type="text/javascript">
// 1.获取标签
var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');
// 2. Open the timer acquires the current time
the setInterval ( function () {
// 2.1 Get current timestamp
var now = new new a Date ();
// 2.2 seconds, minutes, hours obtaining
var S = now.getSeconds ();
var m = now.getMinutes () + S / 60 ;
var H = now.getHours () % 12 is + m / 60 ;
// 2.3 rotational
second.style.transform =`rotate ($ {s * 6 } you)`;
minute.style.transform = `rotate(${m * 6}deg)`;
hour.style.transform = `rotate(${h * 30}deg)`;
}, 10);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长图滚动</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #000;
}
#box{
width: 658px;
height: 400px;
border: 1px solid #ff6700;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#box img{
position: absolute;
top: 0;
left: 0;
}
#box span{
position: absolute;
width: 100%;
height: 50%;
left: 0;
cursor: pointer;
}
#box #top{
top: 0;
}
#box #bottom{
bottom: 0;
}
</style>
</head>
<body>
<div id="box">
<!-- 658 4066 -->
<img src="images/timer.jpeg" alt="">
<span id="top"></span>
<span id="bottom"></span>
</div>
<script type="text/javascript">
=Boxvar1. Get tag//
document.getElementById('box');
var pic = document.getElementsByTagName('img')[0];
var divTop = document.getElementById('top');
var divBottom = document.getElementById('bottom');
// 2. Add event
var NUM = 0 , the Timer = null ;
divTop.onmouseover = function () {
clearInterval(timer);
// let the picture scroll up
the Timer = setInterval ( function () {
Surely - = 10 ;
if (num > = - 3666 ) {
pic.style.top = a + ' px ' ;
}else{
clearInterval(timer);
}
},50);
};
divBottom.onmouseover = function () {
clearInterval(timer);
// let the picture scroll up
the Timer = setInterval ( function () {
num += 10;
if(num <= 0){
pic.style.top = a + ' px ' ;
}else{
clearInterval(timer);
}
},100);
};
box.onmouseout = function () {
clearInterval(timer);
}
</script>
</body>
</html>