调整浏览器视口大小时日期时间格式发生变化

Question

场景是：

我在 javascript 中显示了完整的实时日期时间，包括当天的名称。 但是，当调整视口大小时，这种格式会占用太多空间，所以我的解决方案是 如果屏幕尺寸较小，请更改格式（使其更短）。

是这样的：

当用户的屏幕非常宽时，我想为她/他提供完整的日期时间和日期，如下所示：

“23:34:39 - 2019 年 10 月 3 日 - 星期四”

当用户使用平板格式时应该是：

“23:34:39 - 2019 年 10 月 3 日 - 星期四”

当用户使用屏幕非常小的手机或旧手机时，格式应为：

“23:34:39 - 2019-10-03 - Thu” 如果代码检测到更小的屏幕，我将删除秒数。

我在这里找到了几个关于 rezise(function()); 的帖子。 here 和 addEventListener here 也是另一个 here 所以我对我的代码做了一些修改，但我似乎无法让它工作，添加 addEventListener 后根本没有显示。

这是我的 jsclock.js

    window.addEventListener("resize", function() {
    if (window.matchMedia("(min-width: 1000px)").matches) {
        function date_time(id) {

        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        result = ''+h+':'+m+':'+s+' &nbsp; &#10070; &nbsp; '+months[month]+' '+d+', ' +year+' &nbsp; &#10070; &nbsp;  '+days[day]+'';
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}
    } else if (window.matchMedia("(min-width: 800px)").matches) {
        function date_time(id) {

        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        result = ''+h+':'+m+':'+s+' &nbsp; &#10070; &nbsp; '+months[month]+' '+d+', ' +year+' &nbsp; &#10070; &nbsp;  '+days[day]+'';
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}
    } else (window.matchMedia("(min-width: 200px)").matches) {
        function date_time(id) {

        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
        d = date.getDate();
        if(d<10)
        {
                d = "0"+d;
        }
        day = date.getDay();
        days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        result = ''+h+':'+m+':'+s+' &nbsp; &#10070; &nbsp; ' +year+'-'+months[month]+'-'+d+'  &nbsp; &#10070; &nbsp;  '+days[day]+'';
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}
    }

以及我如何显示它。

span id="date_time"></span>
<script type="text/javascript">window.onload = date_time('date_time');</script>

Answer 1

为所有时间戳生成 HTML：

<span class="size-l date-time">nice and long datetimestamp<span>
<span class="size-m date-time">shorter datetimestamp<span>
<span class="size-s date-time">shortstamp</span>

然后默认使用 CSS 隐藏它们，使用媒体查询取消隐藏需要取消隐藏的任何内容。这里完全没有理由使用 JS：

.date-time { display: none; }

@media screen and (min-width: 300px) {
 .size-s .date-time { display: inline-block; }
}

@media screen and (min-width: 576px) {
 .size-m .date-time { display: inline-block; }
}

@media screen and (min-width: 800px) {
 .size-l .date-time { display: inline-block; }
}