[小实例]——js实现倒计时

最新推荐文章于 2025-05-29 14:47:07 发布

虽菜但瘾

最新推荐文章于 2025-05-29 14:47:07 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：小实例文章标签： js css

本文链接：https://blog.csdn.net/sungoodluck666/article/details/108578270

本文通过一个小实例，分享了如何使用JavaScript实现倒计时功能。从获取DOM到实现可复用性，作者详细解释了代码逻辑，并讨论了innerText与textContent在不同浏览器的兼容性问题。文章最后对优化点进行了总结，适合初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

突然想到倒计时的案例，就试着写了一个，但是当时的思路是直接获取dom并输出，没有实现可复用性，而且耦合度很大，在搜索了几篇文章后，发现有个大佬写的确实很好，就摘抄一下，以加强理解。

效果图

这里可以实现以你选择的时间作为倒计时结束的时间

countDown.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>countDown</title>
    <link href="countdown.css" rel="stylesheet" type="text/css" />
    </link>
</head>

<body>
    <div id="select">
        <input type="datetime-local" id="selectTime" />
    </div>
    <div id="clear"></div>
    <div id="box">
        <h1>倒计时</h1>
        <div id="time">
            <strong><span id="day">**天</span></strong>
            <strong><span id="hour"