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

最新推荐文章于 2024-04-09 14:07:34 发布

Enovo_你当像鸟飞往你的山

最新推荐文章于 2024-04-09 14:07:34 发布

阅读量7.5k

点赞数 3

分类专栏：前端开发 HTML实例文章标签： html javascript css 前端

本文链接：https://blog.csdn.net/m0_63244368/article/details/128891957

版权

前端开发同时被 2 个专栏收录

30 篇文章 10 订阅

订阅专栏

HTML实例

17 篇文章 5 订阅

订阅专栏

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

一、前言

在我们的 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)……

可满足多种需求，欢迎大家下载！

二、作品介绍

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、倒计时结束进行网页跳转

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

四、效果显示

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

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

五、编码实现

显示完整代码

注意路径(⊙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>
        <!-- 加载JavaScript和CSS -->
        <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;
}