功能描述:

1. 利用split()方法对测试数据进行解析:学科,日期

2. 将测试数据封装成对象数组的格式

3. 使用数组的sort()方法和Date对象,将测试数据按照日期从早到晚进行排序

4. 表格数据的静态填充

5. 距离最近考试的倒计时天数的提醒

代码如下:(这里引入了jquery.js)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js小练习</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>考试科目</th>
                <th>开考日期</th>
            </tr>
        </thead>
        <tbody id="myBody">
            <!-- 具体数据 -->
        </tbody>
    </table>

    <!-- 最近日期的倒计时 -->
    <div style="margin-top: 10px;">
        <h3 id="countdown"></h3>
    </div>

    <!-- 引入jquery.js -->
    <script src="../js/jquery.min.js"></script>

    <script>
        var testData = '数学, 2023-12-23\n英语,2023-11-11\n语文,2023-10-29\n物理,2023-12-27\n化学,2023-09-30\n';
        //1. 将testData数据通过split()进行分割: 学科,日期 ---为一组
        var subject_date = testData.split('\n');
        //2. 注意实际的subject_date最后存放为空,因为末尾的\n
        var length = subject_date.length-1;
        console.log('subject_date中实际的数据数目为:' + length);
        //3. 将subject_date中的每一项数据,以对象数组的形式进行存放
        var objArr = [];
        for(var i=0; i<length; i++){  //此时subject_date每一个数的格式:subject,date
            var subject = subject_date[i].split(',')[0];   //分割, 取前面的学科
            var date = subject_date[i].split(',')[1];      //分割,取后面的日期
            objArr.push({
                subject:`${subject}`,
                date:`${date}`
            });
            //打印出来objArr数组中存放的每一项
            console.log(`-------------objArr[${i}].subject=${objArr[i].subject}`);
            console.log(`-------------objArr[${i}].date=${objArr[i].date}`);
        }
        //4. 比较date,调用数组的sort()方法,按照日期的大小排序
        var sorted = objArr.sort((a, b) => {
            //Date对象存储的是从1970年1月1日午夜(UTC)开始计算的毫秒数
            var dateA = new Date(a.date);  
            var dateB = new Date(b.date);
            //dateA-dateB为正,说明b比a小,交换a,b;dateA-dateB为负数或0,不交换
            return dateA - dateB;  
        });
        //5. 表格数据填充
        for(var i=0; i<sorted.length; i++)
        {
            $('#myBody').append(`<tr>
                <td>${i+1}</td>
                <td>${sorted[i].subject}</td>
                <td>${sorted[i].date}</td>
                </tr>`);
        }

        //6. 获取最近的日期,并转为毫秒数的形式
        var earlist = new Date(objArr[0].date);
        //7. 获取当前的日期(毫秒数)
        var current = new Date();
        //8. 计算日期差异(以毫秒为单位)
        var dateDiff = earlist - current;
        //9. 毫秒数转为天数
        var dayDiff = Math.floor(dateDiff/(1000 * 60 * 60 * 24));
        //10. 输出到页面
        document.getElementById('countdown').innerHTML = `当前最近的考试是${objArr[0].subject}, 还剩${dayDiff}天`;
    </script>
</body>
</html>

运行结果:

【javascript实操记录】-LMLPHP

【javascript实操记录】-LMLPHP

08-30 18:24