数字时钟
<!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>