js+css实现盒子垂直居中里面有一个定时器可以对他提前或延迟一小时

js+css实现盒子垂直居中里面有一个定时器可以对他提前或延迟一小时

完整代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .a div {
                border: 1px solid red;
                width: 200px;
                height: 200px;
                margin: auto;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="a">
            <div>
            </div>
            <button class="b">提前 </button>
            <button class="c">延迟 </button>
        </div>
    </body>
    <script type="text/javascript">
        var count = 0;
        var b = document.querySelector('.a  div');
        setInterval('getTime()', 1000);

        function getTime() {
            var mydate = new Date;
            var mytime = mydate.getTime() + count * 1000 * 60 * 60;
            b.innerText = new Date(mytime);
        }
        document.querySelector('.b').addEventListener('click', function() {
            count++;
            console.log(count,'提前');
        });
        document.querySelector('.c').addEventListener('click', function() {
            count--;
            console.log(count,'延迟');
        });
    </script>

</html>

猜你喜欢

转载自blog.csdn.net/carrie_zzz/article/details/81139631