html5 秒杀倒计时案例 数组返回多个值如何接收

今天分享秒杀倒计时案例

今天在写秒杀倒计时案例时，函数返回 ‘时分秒’ 三个值 当时我一下子没想到该怎么将这三个值分别赋值给li，后来想了一会想到可以将值先存入数组，再返回数组，再用索引的方式赋值给想赋值的地方。

给大家看看我自己想的做法：

	<script>
    //算出时分秒
    function getTime(time) {
        var timenow = +new Date();
        var time = +new Date(time);
        var subtime = time - timenow;
        var times = parseFloat(subtime) / 1000;
        //时分秒
        var h = parseInt(times / 60 / 60);
        h = h < 10 ? '0' + h : h;
        var m = parseInt((times / 60) % 60);
        m = m < 10 ? '0' + m : m;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        var arr = [h, m, s];
        return arr;
    }

    var timetar = new Date('2021/6/1 00:00:00');
    var li = document.querySelectorAll('li');
    window.setInterval(function() {
        var arr = getTime(timetar);
        for (var i = 0; i < arr.length; i++) {
            li[i].innerHTML = arr[i];
        }
    }, 1000);
</script>

可以基本完成倒计时功能，但是有一个弊端就是刷新之后不是直接显示剩余时间，而是需要setInerval设置的一秒延迟，并且不好优化。

于是产生了新的想法：

<script>
    //将三个装时分秒的li 都给个class  并全部获取
    var li = document.querySelectorAll('li');
    var timetar = +new Date('2021/6/1 01:00:00');
    //先执行一次函数,使第一次时间变化的延迟取消
    getTime();
    //计时器一直循环
    window.setInterval(getTime, 1000);

    function getTime() {
        var timenow = +new Date();
        var times = parseInt(timetar - timenow) / 1000;
        //时分秒
        var h = parseInt(times / 60 / 60);
        h = h < 10 ? '0' + h : h;
        li[0].innerHTML = h;
        var m = parseInt((times / 60) % 60);
        m = m < 10 ? '0' + m : m;
        li[1].innerHTML = m;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        li[2].innerHTML = s;
    }
</script>

将三个li的赋值直接在函数内实现，就不用返回函数值再赋值，并且可以将一开始的时间变化间隔取消，实现没有卡顿。

html代码如下：

<div class="box">
    <h3>秒杀</h3>
    <h4>FLASH DEALS</h4>
    <span></span>
    <p>本场距离结束还剩</p>
    <ul>
        <li class="hours">

        </li>
        <li class="minutes">

        </li>
        <li class="seconds">

        </li>
    </ul>
</div>

css代码如下：

<style>
    @font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.eot?csvip3');
        src: url('fonts/icomoon.eot?csvip3#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?csvip3') format('truetype'), url('fonts/icomoon.woff?csvip3') format('woff'), url('fonts/icomoon.svg?csvip3#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    li {
        list-style: none;
    }
    
    .box {
        position: relative;
        width: 150px;
        height: 220px;
        background-color: orange;
        text-align: center;
        color: #fff;
        margin: 100px auto;
        cursor: default;
    }
    
    .box h3 {
        font-size: 28px;
        padding-top: 26px;
    }
    
    .box h4 {
        font-size: 16px;
        font-weight: 400;
        color: grey;
        margin: 5px;
    }
    
    .box span {
        font-family: 'icomoon';
        font-size: 34px;
    }
    
    .box p {
        font-style: none;
        margin-top: 10px;
        font-size: 14px;
    }
    
    .box ul {
        width: 125px;
        margin-left: 15px;
        margin-top: 10px;
        height: 30px;
    }
    
    .box ul li {
        float: left;
        width: 35px;
        height: 35px;
        margin: 2px;
        background-color: #000;
        font-size: 20px;
        line-height: 35px;
        cursor: pointer;
    }
</style>

ps:其中加了一个字体图标在span里面，有不懂字体图标的同学，我会记录一期字体图标的使用，去百度搜索应该也是可以~~