数字时钟
<!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.开启定时器 获取当前时间
setInterval(function () {
// 2.1 获取当前的时间戳
var now = new Date();
// 2.2 获取小时 分钟 秒
var s = now.getSeconds();
var m = now.getMinutes() + s / 60;
var h = now.getHours() % 12 + m / 60;
// 2.3 旋转
second.style.transform = `rotate(${s * 6}deg)`;
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">
// 1.获取标签
var box = document.getElementById('box');
var pic = document.getElementsByTagName('img')[0];
var divTop = document.getElementById('top');
var divBottom = document.getElementById('bottom');
// 2.添加事件
var num = 0,timer = null;
divTop.onmouseover = function () {
clearInterval(timer);
// 让图片向上滚动
timer = setInterval(function () {
num -= 10;
if(num >= -3666){
pic.style.top = num + 'px';
}else{
clearInterval(timer);
}
},50);
};
divBottom.onmouseover = function () {
clearInterval(timer);
// 让图片向上滚动
timer = setInterval(function () {
num += 10;
if(num <= 0){
pic.style.top = num + 'px';
}else{
clearInterval(timer);
}
},100);
};
box.onmouseout = function () {
clearInterval(timer);
}
</script>
</body>
</html>