随笔- 293 文章- 0 评论- 34 阅读- 33万

safari 调试的小问题

　　写了个倒计时的玩具，在chrome 上没问题，safari 打开时就有了小问题

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>2020年结束倒计时</title>
<style type="text/css">
    body {
        margin: 0;
        min-height: 150px;
    }
    .box {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #message {
        width: 600px;
        line-height: 150px;
        font-size: 100px;
    }
    .split {
        animation: twinkle 0.5s infinite;
        animation-direction: alternate;
        animation-timing-function: linear;
        -webkit-animation:twinkle 1s infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;
    }
    @keyframes twinkle {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    @-webkit-keyframes twinkle {
        from {opacity: 0;}
        to {opacity: 1;}
    }
</style>
</head>
<body>
    <div class='box'>
    
        <div id="message">
            <span class='hour'></span>
            <span class='split'>:</span>
            <span class='minute'></span>
            <span class='split'>:</span>
            <span class='seconds'></span>
        </div>
    </div>
 
<script>
    function calTime() {
        let el = document.getElementById('message');
        let now = new Date().getTime();
        let target = new Date('2021-01-01 00:00:00').getTime();
        let hour = Math.floor((target - now) / 1000 / 60 /60);
        let minute = Math.floor((target - now) / 1000 / 60 - hour * 60);
        let seconds = Math.floor((target - now) / 1000 - minute * 60 - hour * 60 * 60);
        el.children[0].innerText = hour < 10 ?  '0' + hour : hour;
        el.children[2].innerText = minute < 10 ? '0' + minute : minute;
        el.children[4].innerText = seconds < 10 ? '0' + seconds : seconds;
    }
    function setBoxSize() {
        let el = document.getElementsByClassName('box')[0];
        el.style.height = window.innerHeight + 'px';
    }
    window.onload = () => {
        setBoxSize();
        calTime();
        setInterval(() => {
            calTime();
        }, 1000);
    }
    window.onresize = () => {
        setBoxSize();
    }
</script>
</body>
</html>