有趣的h5互动（有趣的HTML实例（一） 倒计时）
冰会化成水的……我相信我们的子孙还可以在贝加尔湖钓鲑鱼！
目录
一 、前言
二 、作品介绍
三 、代码介绍
四 、效果显示
五 、编码实现
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)……
可满足多种需求 ，欢迎大家下载！
二 、作品介绍
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; }六 、获取源码
老规矩 ，先给朋友们看一下完整文件夹 ，
正确的文件如下图 ，复制源码的朋友们请注意了！！！
公众号获取源码
第一步 ，通过微信公众号下载源码压缩包 ，解压并打开文件夹 ，即为上图样式（复制源码请注意路径及文件名）
第二步 ，点击 html 文件 打开即可查看
2023年第九期 ，希望得到大家的喜欢🙇
也是新的系列 ，将会持续更新 ，🙇
希望大家有好的意见或者建议 ，欢迎私信
以上就是本篇文章的全部内容了
~ 关注我 ，点赞博文~ 每天带你涨知识!
1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧 ，你的「点赞 ，好评 ，收藏」是我创作的动力 。
2.关注我 ~ 每天带你学习 :各种前端插件 、3D炫酷效果 、图片展示 、文字效果 、以及整站模板 、HTML模板 、C++ 、数据结构 、Python程序设计 、Java程序设计 、爬虫等！ 「在这里有好多 开发者 ，一起探讨 前端 开发 知识 ，互相学习」！
3.以上内容技术相关问题可以相互学习 ，可 关 注 ↓公 Z 号
获取更多源码 !
获取源码？私信？关注？点赞？收藏？
👍+✏️+⭐️+🙇
有需要源码的小伙伴可以 关注下方微信公众号 " Enovo开发工厂 " ，回复 关键词 " a-daojishi "
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！