23 数字时钟&长图滚动

数字时钟

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

 

posted @ 2019-07-05 18:40  毛斯钢  阅读(255)  评论(0)  编辑  收藏  举报