冰会化成水的……我相信我们的子孙还可以在贝加尔湖钓鲑鱼！
目录
一、前言
二、作品介绍
三、代码介绍
四、效果显示
五、编码实现
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 号 获取更多源码 !
获取源码？私信？关注？点赞？收藏？
👍+✏️+⭐️+🙇文章来源：https://www.toymoban.com/news/detail-476629.html
有需要源码的小伙伴可以 关注下方微信公众号 " Enovo开发工厂 "，回复 关键词 " a-daojishi "
文章来源地址https://www.toymoban.com/news/detail-476629.html
到了这里，关于有趣的HTML实例（一） 倒计时的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
