百度前端Day25-27训练

最新推荐文章于 2023-01-06 22:52:41 发布

Evelyn-zhou

最新推荐文章于 2023-01-06 22:52:41 发布

阅读量186

点赞数

分类专栏：小功能集合

本文链接：https://blog.csdn.net/ZQY1436556395/article/details/106692996

版权

小功能集合专栏收录该内容

2 篇文章 0 订阅

订阅专栏

题目：
使用上方的HTML结构（可以根据需要自行微调）为基础编写JavaScript代码
当变更任何一个select选择时，更新 result-wrapper 的内容
当所选时间早于现在时间时，文案为现在距离 “所选时间” 已经过去 xxxx
当所选时间晚于现在时间时，文案为现在距离 “所选时间” 还有 xxxx
注意当前时间经过所选时间时候的文案变化
注意选择不同月份的时候，日期的可选范围不一样，比如1月可以选31天，11月只有30天，注意闰年
同样，需要注意，通过优雅的函数封装，使得代码更加可读且可维护
心得收获：

学会多封装函数，提高代码复用率。
new Date()中可以加年月日时分秒来直接新建一个指定的事件。
section标签可以通过onchange事件来监听option的改变，也可以通过value来获得当时所展示的option中的value值
注意定时器的使用，再使用下一个定时器时，要关闭上一个定时器
简单的选择可以利用数组存储不同的值，然后通过不用的数组下标，来选择不同的值，列如星期的选择：

function week(i) {
            let week = ["日", "一", "二", "三", "四", "五", "六", ];
            return '星期' + week[i];
        }

计算毫秒和日时分的转换时，将日时分全部转换为毫秒有利于计算

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="year-select">
    </select>

    <select id="month-select">
    </select>

    <select id="day-select">
    </select>

    <select id="hour-select">
    </select>

    <select id="minite-select">
    </select>

    <select id="second-select">
    </select>

    <p id="result-wrapper">现在距离 2001年1月1日星期X HH:MM:SS 还有 X 天 X 小时 X 分 X 秒</p>

    <script>
        //setInterval(allString, 1000)
        const year = document.getElementById('year-select');
        const month = document.getElementById('month-select');
        const date = document.getElementById('day-select');
        const hour = document.getElementById('hour-select');
        const minite = document.getElementById('minite-select');
        const second = document.getElementById('second-select');
        let sections = document.getElementsByTagName('select');
        let yearValue = 2000;
        let dateValue = 1;
        let hourValue = 0;
        let monthValue = 1;
        let minuteValue = 0;
        let secondValue = 0;
        let id=0;
        creatOptions();
        allString();
        //更改option时调整时间的显示

        for (let key in sections) {
            sections[key].onchange = function () {
                if (key === '0' || key === '1') {
                    yearValue = Number(document.getElementById('year-select').value);
                    monthValue = Number(document.getElementById('month-select').value);
                    changetime(yearValue, monthValue);
                    allString();


                } else {

                    dateValue = Number(document.getElementById('day-select').value);
                    hourValue = Number(document.getElementById('hour-select').value);
                    secondValue = Number(document.getElementById('second-select').value);
                    minuteValue = Number(document.getElementById('minite-select').value);
                    allString()

                }

            }
        }

        //生成option标签，且初始化数据
        function creatOptions() {
            repeatOption(year, 33, 2000);
            repeatOption(month, 12, 1);
            repeatOption(date, 31, 1);
            repeatOption(hour, 24, 0);
            repeatOption(minite, 60, 0);
            repeatOption(second, 60, 0);
        }
        //生成一个option标签
        function repeatOption(parent, n, i) {
            while (n > 0) {
                let opt = document.createElement('option');
                opt.value = i;
                opt.innerHTML = i;
                parent.appendChild(opt);
                i++
                n--;
            }

        }
        //根据年份更改天数
        function changetime(year, month) {
            let day = 0;
            if (month == 2) {
                // 闰年
                if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
                    day = 29;
                }
                //平年
                else {
                    day = 28;
                }
            } else if (month == 4 || month == 6 || month == 9 || month == 4) {
                day = 30;
            } else {
                day = 31;
            }
            //删去原有子节点
            date.innerHTML = " ";
            repeatOption(date, day, 1);
            //更换月份之后更改日的值

        }


        //显示总的字符串在屏幕上

        function allString() {
            clearInterval(id);//关闭上一个定时器
            const p = document.getElementById('result-wrapper');
            let dateSet = new Date(yearValue, monthValue - 1, dateValue, hourValue, minuteValue, secondValue);
           id = setInterval(function () {
                let dataNow = new Date();
                let timesSet = dateSet.getTime();
                let timesNow = dataNow.getTime();
                let differ = timesSet - timesNow;
                const setTimeStr = setTimeString(dateSet);
                const xTime = xTimeString(differ);
                if (differ > 0) {
                    p.innerHTML = '现在距离' + setTimeStr + '还有' + xTime
                } else {
                    p.innerHTML = '现在距离' + setTimeStr + '已经过去' + xTime
                }
            }, 1000)

        }
        //将两个日期之间的差值转换为X 天 X 小时 X 分 X 秒的函数
        function xTimeString(differ) {
            if (differ < 0) {
                differ = -differ;
            }
            let minutes = 1000 * 60;
            let hours = minutes * 60;
            let days = hours * 24;
            let showDays = Math.floor(differ / days);
            let extDays = differ % days;

            if (extDays !== 0) {
                var showHours = Math.floor(extDays / hours);
                if (extDays % hours !== 0) {
                    var showMinutes = Math.floor((extDays % hours) / minutes);
                }
                if ((extDays % hours) % minutes !== 0) {
                    var showSeconds = Math.floor(((extDays % hours) % minutes) / 1000)
                }
            }
            let result = showDays + '天' + showHours + '小时' + showMinutes + '分' + showSeconds + '秒'
            return result
        }


        //将设置时间显示成 2001年1月1日星期X HH:MM:SS格式的函数
        function setTimeString(date) {
            let dateStr = dateString(date);
            let weekday = week(date.getDay());
            let timeStr = timeString(date);
            let result = dateStr + weekday + timeStr;
            return result

        }

        function week(i) {
            let week = ["日", "一", "二", "三", "四", "五", "六", ];
            return '星期' + week[i];
        }

        function timeString(date) {
            let res1 = date.toTimeString();
            let res2 = res1.split(' ');
            let res3 = res2[0].split(':');
            res3[0] = zore(res3[0]);
            return res2[0];

        }

        function dateString(date) {
            let res1 = date.toLocaleDateString();
            let res2 = res1.split('/');
            res2[1] = zore(res2[1]);
            res2[2] = zore(res2[2]);
            let result = res2[0] + '年' + res2[1] + '月' + res2[2] + '日';

            return result;

        }

        function zore(str) {
            if (str.length < 2) {
                str = '0' + str;
            }
            return str;
        }
    </script>
</body>

</html>

Evelyn-zhou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端Day25-27训练

题目：使用上方的HTML结构（可以根据需要自行微调）为基础编写JavaScript代码当变更任何一个select选择时，更新 result-wrapper 的内容当所选时间早于现在时间时，文案为现在距离 “所选时间” 已经过去 xxxx当所选时间晚于现在时间时，文案为现在距离 “所选时间” 还有 xxxx注意当前时间经过所选时间时候的文案变化注意选择不同月份的时候，日期的可选范围不一样，比如1月可以选31天，11月只有30天，注意闰年同样，需要注意，通过优雅的函数封装，使得代码更加可读且可
复制链接

扫一扫