时间时间时间时间，Js时间操作

最新推荐文章于 2023-11-23 14:43:44 发布

月薪2500的狗头

最新推荐文章于 2023-11-23 14:43:44 发布

阅读量150

点赞数

分类专栏： dogExp 文章标签： js 前端 Date时间

本文链接：https://blog.csdn.net/qq_43297527/article/details/101161711

版权

dogExp 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

关于进度条

Js中的Date操作
- - 复现demo
  - 注意点

Js中的Date操作

最近写的好多关于的时间操作的代码，但是感觉都不是很完美，都需要在提交之前进行时间判断操作，感觉很不爽，为了提高我的代码能力，给自己提了一个常见但没有写过的逻辑需求；

需求：
- y = 年； M = 月； d = 日； h = 小时； m = 分
- 如果 m 小于当前秒，则 h + 1; h 小于当前小时，则 d + 1； d 小于当前日，则M + 1； M 小于当前月，则 y + 1 ;
- y 的话，直接 + 1 就行了，并没有上限，但是 M，d，h 直接 + 1 的话会有上限

真的是看似简单，写的时候，绕死了…

复现demo

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .time {
            display: flex;
            align-items: center;
        }

        input {
            text-align: center;
            width: 100px
        }

        span {
            margin: 0 20px
        }
    </style>
</head>

<body>
    <div class="time">
        <input class="y" type="text" value="">
        <span>年</span>
        <input oninput="MInput()" class="M" type="text" value="">
        <span>月</span>
        <input oninput="DInput()" class="d" type="text" value="">
        <span>日</span>
        <input oninput="HInput()" class="h" type="text" value="">
        <span>时</span>
        <input oninput="mInput()" class="m" type="text" value="">
        <span>分</span>
    </div>

    <script>
        let oldT = new Date() // 设置 set后的时间
        let t = new Date() // 获取当前时间
        let newT;  // 获取 date.set 时间后 的时间
        let y = document.getElementsByClassName('y')[0]
        let M = document.getElementsByClassName('M')[0]
        let d = document.getElementsByClassName('d')[0]
        let h = document.getElementsByClassName('h')[0]
        let m = document.getElementsByClassName('m')[0]

        onload = function () {
            // 获取当前时间 年，月，日，时，分
            y.value = t.getFullYear()
            M.value = t.getMonth() + 1
            d.value = t.getDate()
            h.value = t.getHours()
            m.value = t.getMinutes()
        }
        MInput = function () {
            if (M.value < t.getMonth() + 1) { // 如果月份小于当前月份，则年份 + 1
                y.value = t.getFullYear() + 1
            }
        }
        DInput = function () {
            if (M.value <= t.getMonth() + 1) { // 如果月份小于等于当前月份 
                if (d.value < t.getDate()) { // 如果 日 小于当前日
                    newT = new Date(oldT.setMonth(t.getMonth() + 2)) // 一月（0）~十二月（11） 月份 + 2；newT就为设置后新时间
                    y.value = newT.getFullYear() // 获取新时间的年份
                    M.value = newT.getMonth() // 获取新时间的月份
                }
            }
        }
        //  下面的以此类推...
        HInput = function () {
            if (d.value <= t.getDate()) {
                if (h.value < t.getHours()) {
                    newT = new Date(oldT.setDate(t.getDate() + 1))
                    y.value = newT.getFullYear()
                    M.value = newT.getMonth() + 1
                    d.value = newT.getDate()
                }
            }
        }
        mInput = function () {
            if (h.value <= t.getHours()) {
                if (m.value < t.getMinutes()) {
                    newT = new Date(oldT.setHours(t.getHours() + 1))
                    y.value = newT.getFullYear()
                    M.value = newT.getMonth() + 1
                    d.value = newT.getDate()
                    h.value = newT.getHours()
                }
            }
        }
    </script>
</body>

</html>

请忽略水印

注意点

只有小于当前的时间，才能触发，大于当前的时间是要可以随意输入的
使用set方法后会改变当前date的时间

Ps：最后最后，目前感觉重复代码过多，有待优化…

// 一个月薪2500的狗头，只能记录+分享它的狗生了…

月薪2500的狗头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时间时间时间时间，Js时间操作

关于进度条Js中的Date操作复现demo注意点Js中的Date操作最近写的好多关于的时间操作的代码，但是感觉都不是很完美，都需要在提交之前进行时间判断操作，感觉很不爽，为了提高我的代码能力，给自己提了一个常见但没有写过的逻辑需求；需求：y = 年； M = 月； d = 日； h = 小时； m = 分如果 m 小于当前秒，则 h + 1; h 小于当前小时，则...
复制链接

扫一扫