示例图

image.png

HTML代码

  1. <body>
  2.         <div id="d0">
  3.         </div>
  4.         <div id="d1">
  5.         </div>
  6.     </body>

JS代码

<script>
        //距离指定时间 
        var _data=[
            {
                year:"2022",
                day:{
                    '元旦':'2022/01/01',
                    '除夕':'2022/01/31',
                    '清明节':'2022/04/03',
                    '劳动节':'2022/05/01',
                    '端午节':'2022/06/03',
                    '中秋节':'2022/09/10',
                    '国庆节':'2022/10/01',
                }
            }
        ]
        /**
         * 获取距离指定时间还有多少天
         * @param {String | Number | Date} dateTime 日期时间
         * @example
         * ```javascript
         *     getDistanceSpecifiedTime('2019/02/02 02:02:00');
         *     getDistanceSpecifiedTime(1549036800000);
         *     getDistanceSpecifiedTime(new Date("2019/2/2 00:00:00"));
         *

     */
    function getDistanceSpecifiedTime(dateTime) {
        // 指定日期和时间
        var EndTime = new Date(dateTime);
        // 当前系统时间
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        var h = Math.floor(t / 1000 / 60 / 60 % 24);
        var m = Math.floor(t / 1000 / 60 % 60);
        var s = Math.floor(t / 1000 % 60);
        var html = d + " 天" + h + " 时" + m + " 分" + s + " 秒";
        return html;
    }
    // 当前时间距离周六周日还有多长时间
    function distance(){
        var _nowTime = new Date();
        var _week = _nowTime.getDay();
        console.log(_week)
        //一天时长
        var _dayLongTime = 24*60*60*1000;
        // 距离周六时长
        var _furtureSaturdayTimes = _nowTime.getTime() + (6 - _week) * _dayLongTime;
        // 距离周日时长
        var _furtureSundayTimes = _nowTime.getTime() + (7 - _week) * _dayLongTime;
        var _obj = {
            name1:"周六",
            time1:getDistanceSpecifiedTime(_furtureSaturdayTimes),
            name2:"周日",
            time2:getDistanceSpecifiedTime(_furtureSundayTimes),
        }
        var st = '距离'+_obj.name1+'还有:'+_obj.time1+'<br/>';
            st +='距离'+_obj.name2+'还有:'+_obj.time2;
        return st

    }


    function drDeom(){
        var str = '';
        for(var i=0;i<_data.length;i++){
            str += '<div>距离'+_data[i].year+'年的:</div>';
            for(var j in _data[i].day){
                str += '<div><span style="padding:0 10px;"></span>'+j+'还有:'+getDistanceSpecifiedTime(_data[i].day[j])+';</div>';
            }
        }
        return str;
    }
    function showTime(){
        var ss = drDeom();
        var tt = distance();
        document.getElementById("d0").innerHTML = tt;
        document.getElementById("d1").innerHTML = ss;
    }
    showTime();
    setInterval(function(){
        showTime();
    }, 1000);
</script>

```