倒计时模块复习

最新推荐文章于 2024-11-08 14:35:14 发布

screamn

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量114

点赞数 1

分类专栏： CSS 前端 JavaScript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/screamn/article/details/134852162

版权

前端同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

经典回顾倒计时

在这里插入图片描述
倒计时的基本布局介绍。
一个内容区域和一个输入区域，内容区域进行划分

直接使用flex布局会更快一点。
js代码
我们利用一下模块化思想，直接把获得时间这个功能写成一个函数。方便后续的调用

function getTime() {
            const date = new Date()
            return `今年是${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`
        }
        document.querySelector('.contain-top').innerHTML = getTime()

然后将输入框中的事件给加载进去，注意格式的划分。使用基本的时间算法

const input = document.querySelector('input')
        function dateChat() {
            const nowdate = +new Date()
            let enddate = +new Date()
            let time = 0
            const date1 = new Date()
            enddate = +new Date(`${date1.getFullYear()}-${date1.getMonth()+1}-${date1.getDate()} ${input.value}`)
            time = (enddate - nowdate) / 1000
            let h = parseInt(time / 60 / 60 % 24)
            h = h < 10 ? '0 ' + h : h + " "
            let m = parseInt(time / 60 % 60)
            m = m < 10 ? '0 ' + m : m + " "
            let s = parseInt(time % 60)
            s = s < 10 ? '0' + s : s
            document.querySelector('.hour').innerHTML = h
            document.querySelector('.min').innerHTML = m
            document.querySelector('.second').innerHTML = s
        }

设置回车监听和按钮监听

input.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                if (input.value.length > 8) {
                    alert('输入有误')
                } else {
                    document.querySelector('.timeout').innerHTML = input.value
                    dateChat()
                    setInterval(dateChat, 1000)
                }
            }
        })
        const button = document.querySelector('button')
        button.addEventListener('click', function () {
            if (input.value.length > 8) {
                alert('输入有误')
            } else {
                document.querySelector('.timeout').innerHTML = input.value
                dateChat()
                setInterval(dateChat, 1000)
            }
        })

完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .contain {
            width: 300px;
            height: 300px;
            background-color: rgb(174, 10, 42);
            margin: 0 auto;
        }

        .contain-top {
            text-align: center;
            color: white;
            padding-top: 20px;
            margin-bottom: 20px;
        }

        .font {
            text-align: center;
            color: white;
            font-size: 25px;
        }

        .contain-middle-time {
            display: flex;
            justify-content: center;
        }

        .contain-middle-time div {
            text-align: center;
            margin-top: 40px;
            width: 40px;
            line-height: 40px;
            height: 40px;
            color: white;
            background-color: rgb(50, 44, 44);
            border-radius: 5px;
        }

        .contain-middle-time .word {
            width: 20px;
            height: 20px;
            color: white;
            background-color: rgb(174, 10, 42);
        }

        .timeout {
            margin-top: 60px;
            font-size: 20px;
            color: white;
            text-align: center;
        }

        .timeout::after {
            content: "下课";
        }

        .timechoice {
            margin-top: 10px;
            text-align: center;
        }

        input {
            outline: none;
            text-align: center;
            width: 100px;
            height: 20px;
            border: 1px solid black;
            border-radius: 3px;
        }

        button {
            background-color: white;
            height: 20px;
            border: none;
            color: black;
            border-radius: 2px;
        }

        button:active {
            color: red;
        }
    </style>
</head>

<body>
    <div class="contain">
        <div class="contain-top">
            今年是2222年2月22日
        </div>
        <div class="font">
            下班倒计时
        </div>
        <div class="contain-middle-time">
            <div class="hour">
                12
            </div>
            <div class="word">:</div>
            <div class="min">
                12
            </div>
            <div class="word">:</div>
            <div class="second">
                12
            </div>
        </div>
        <div class="timeout">
            18 : 30 : 00
        </div>
    </div>
    <div class="timechoice">
        <input type="text" placeholder="18:00:00">
        <button>提交</button>
    </div>
    <script>
        //加载上边的时间
        function getTime() {
            const date = new Date()
            return `今年是${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`
        }
        document.querySelector('.contain-top').innerHTML = getTime()

        // 加载定义的下课时间
        const input = document.querySelector('input')
        function dateChat() {
            const nowdate = +new Date()
            let enddate = +new Date()
            let time = 0
            const date1 = new Date()
            enddate = +new Date(`${date1.getFullYear()}-${date1.getMonth()+1}-${date1.getDate()} ${input.value}`)
            time = (enddate - nowdate) / 1000
            let h = parseInt(time / 60 / 60 % 24)
            h = h < 10 ? '0 ' + h : h + " "
            let m = parseInt(time / 60 % 60)
            m = m < 10 ? '0 ' + m : m + " "
            let s = parseInt(time % 60)
            s = s < 10 ? '0' + s : s
            document.querySelector('.hour').innerHTML = h
            document.querySelector('.min').innerHTML = m
            document.querySelector('.second').innerHTML = s
        }
        input.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                if (input.value.length > 8) {
                    alert('输入有误')
                } else {
                    document.querySelector('.timeout').innerHTML = input.value
                    dateChat()
                    setInterval(dateChat, 1000)
                }
            }
        })
        const button = document.querySelector('button')
        button.addEventListener('click', function () {
            if (input.value.length > 8) {
                alert('输入有误')
            } else {
                document.querySelector('.timeout').innerHTML = input.value
                dateChat()
                setInterval(dateChat, 1000)
            }
        })
        // 倒计时模块

    </script>
</body>

</html>