有趣的HTML实例（一）倒计时

朴灿烈づ我的快乐病毒、 2024-04-28 07:51 6阅读 0赞

> **冰会化成水的……我相信我们的子孙还可以在贝加尔湖钓鲑鱼！**

![0f65c01753dd4493a95a554ff8ae936f.png][]

--------------------

**目录**

一、前言

二、作品介绍

三、代码介绍

四、效果显示

五、编码实现

index.html

script.js

style.css

六、获取源码

公众号获取源码

获取源码？私信？关注？点赞？收藏？

--------------------

## 一、前言 ##

> 在我们的 html 学习过程中，会用到并见识到各种各样的实例，以及各种插件，并且有些 web 网页中的小插件又非常的吸引眼球，提升 web 网页的层次，显得非常好看并且非常使用。**在本系列中，我将持续为大家更新有趣且使用的 html 实例**，放在 web 网页中，凸显效果。
> 
> 特点一：都是符合学校或者学生考试期末作业的水平，都是**最基础的简单的 html 样例**，提升web网页整理效果，都是 div+css 框架原创代码写的，内容包括 js / css，也包含 视频+音乐+flash 等元素的插入…
> 
> 特点二：内容包括多种丰富类型，例如：**倒计时，404页面，Blog顶置卡片设计 (css+js)，To-Do-List设计 (css+js)，火柴盒动画 (css)，日历便签设计 (css+js)，搜索框设计 (css+js)，卡片式图片展示 (css+js)，咖啡选择 (css+js)……**
> 
>  **可满足多种需求，欢迎大家下载！**

![5493b88af49745b18ffba5c1a291d069.png][]

--------------------

## 二、作品介绍 ##

> 1.作品简介 ：HTML响应式布局网站源码！兼容 pc 以及移动端，内涵 js 交互，ui 交互。直接点击即可查看效果！
> 
> 2.作品编辑：个人主页网页设计题材，代码为 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用）。
> 
> 3.作品技术：使用DIV+CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。

--------------------

## 三、代码介绍 ##

> 一款简单的 HTML+JS + CSS 原生 倒计时 实例
> 
> 1、HTML
> 
> 2、JS
> 
> 3、CSS
> 
> 4、舒适的画面感
> 
> **5、倒计时结束进行网页跳转**

> 可通用多种不同情景，进行网页跳转，可塑性很高

--------------------

## 四、效果显示 ##

![d467940c1c9b427385ceccc52fce598a.png][]

**倒计时结束后，自动进行页面跳转——>**

![1d161fa9b8a9440082842a6e22b4842f.png][]

**可以在此基础上，添加音乐，等多种不同风格特效，也可直接引用**

--------------------

## 五、编码实现 ##

--------------------

显示完整代码

注意路径(⊙o⊙)？

o(\*￣▽￣\*)ブ

> ### index.html ###

<html>
        <meta name="description" content="倒计时">
        <meta name="keywords" content="HTML,CSS,JavaScript">
        <meta name="author" content="senge-dev">
        <meta charset="UTF-8">
        <head>
            <title>跳转倒计时：5秒</title>
        </head>
        <body>
            <h2 class="distance_zh_cn_1">距离网页跳转</h1>
            <h2 class="distance_zh_cn_2">还有</h1>
            <h2 class="distance_zh_cn_3">秒</h1>
            <h3 class="distance_en_us_1">PAGE REDIRECTION</h4>
            <h3 class="distance_en_us_2">IN</h4>
            <h3 class="distance_en_us_3">SECONDS</h4>
            <div class="line"></div>
            
            <h1 class="time_h1">5</h1>
            <h3 class="time_h3">5</h3>
            
            <link rel="stylesheet" type="text/css" href="css/style.css">
            <script type="text/javascript" src="js/script.js"></script>
        </body>
    </html>

> ### script.js ###

// 设置5秒倒计时
    var time = 5;
    // 设置一个定时器，每秒执行一次
    var timer = setInterval(function(){
        // 每次减一
        time--;
        // 如果时间小于等于0，就停止计时，并跳转到https://blog.csdn.net/m0_63244368?spm=1000.2115.3001.5343
        if(time <= 0){
            clearInterval(timer);
            document.title = "正在跳转..."
            // 跳转到https://senge.dev
            window.location.href = "https://blog.csdn.net/m0_63244368?spm=1000.2115.3001.5343";
        }
        // 将时间显示在页面上
        document.querySelector(".time_h1").innerHTML = time;
        document.querySelector(".time_h3").innerHTML = time;
        // 设置标题
        if(time > 0){
            document.title = "跳转倒计时：" + time + "秒";
        }
        if(time < 2){
            document.querySelector(".distance_en_us_3").innerHTML = "SECOND";
        }
    },1000);

> ### style.css ###

/* 使用prefer color scheme判断系统是否处于深色模式 */
    @media (prefers-color-scheme: dark){
        /* 设置背景 */
        body{
            background-color: #222222;
        }
        h2{
            color: #FFFFFF;
            font-size: 50px;
        }
        h3{
            color:#FFFFFF;
            font-size: 25px;
        }
    }
     @media (prefers-color-scheme: light){
        body{
            background-color: #DDDDDD;
        }
        /* 为h1设置样式 */
        h2{
            color: #000000;
            font-size: 50px;
        }
        h3{
            color:#000000;
            font-size: 25px;
        }
    }
    /* 为h1设置样式 */
    h1{
        color: #D64249;
        font-size: 140px;
    }
    .distance_zh_cn_1{
        margin: 100px 0 0 100px;
    }
    .distance_zh_cn_2{
        margin: 0 0 0 300px;
    }
    .distance_zh_cn_3{
        margin: -65px 0 0 500px;
    }
    .distance_en_us_1{
        margin: 0 0 0 300px;
    }
    .distance_en_us_2{
        margin: 0px 0 0 300px;
    }
    .distance_en_us_3{
        margin: -33px 0 0 360px;
    }
    /* 新建一条竖线，并设置颜色和样式 */
    .line{
        width: 4px;
        height: 130px;
        background-color: #D64249;
        margin: -130 0 0 293px;
    }
    /* 设置时间文本的样式 */
    .time_h1{
        margin: -230px 0 0 405px;
    }
    .time_h3{
        margin: 12px 0 0 339px;
    }

--------------------

> ## 六、获取源码 ##

老规矩，先给朋友们看一下完整文件夹，

正确的文件如下图 ，**复制源码的朋友们请注意了！！！**

![257a8e9c6f97456faadde88c3602baf3.png][]

### 公众号获取源码  ###

> 第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式（复制源码请注意路径及文件名）
> 
> 第二步，点击 html 文件 打开即可查看

--------------------

**2023年第九期，**希望得到大家的喜欢🙇

也是新的系列，将会持续更新，🙇

希望大家有好的意见或者建议，欢迎私信

--------------------

以上就是本篇文章的全部内容了

**~ 关注我，点赞博文~ 每天带你涨知识!**

1.看到这里了就 \[点赞+好评+收藏\] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、C++、数据结构、Python程序设计、Java程序设计、爬虫等！ 「在这里有好多 开发者，一起探讨 前端 开发 知识，互相学习」！

3.以上内容技术相关问题可以相互学习，可 **关 注 ↓公 Z 号** 获取更多源码 !

## 获取源码？私信？关注？点赞？收藏？ ##

> 👍+✏️+⭐️+🙇

有需要源码的小伙伴可以 关注下方微信公众号 " Enovo开发工厂 "，回复 关键词 " a-daojishi "

[0f65c01753dd4493a95a554ff8ae936f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/97e6ea5783eb4bcc9f86fef7ee2ff54c.png
[5493b88af49745b18ffba5c1a291d069.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/5f97e6b65aa149039ccc35da21ba041f.png
[d467940c1c9b427385ceccc52fce598a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/e6b14c4bfd9d4ed391014b23afeb0efa.png
[1d161fa9b8a9440082842a6e22b4842f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/d1091484b5c149beaf63ed09f4d06c1e.png
[257a8e9c6f97456faadde88c3602baf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/c20fad02daf34aaf8bc6adc77e7107ca.png