-
🏆 第 3 步:调节各部分元素的布局
-
🍖 第 4 步:使用 JavaScript 代码激活它
-
🛬 wuhu ! 起飞 !
-
🎡 完整源码下载
演示地址:https://haiyong.site/tools/daojishi
你可以尝试它的现场演示以了解它是如何工作的。如果你知道如何创建数字时钟,那么创建这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后,在 JavaScript 代码的帮助下,从那个时间减去当前时间,减法每秒减少一次。
正如您在上图中所看到的,我在这里使用了一张背景图。该页面包含四个小框,分别表示天、小时、分钟和秒。首先,你必须创建一个 HTML 和 CSS 文件。
这里我使用了一行<h5>
标题,一个<form>
表单和两个段落<p>
还有一个pickedTime <div>
用来显示剩余时间。然后我使用下面的 css 代码设计了网页body
的样式。我使用了自己库存的一张图片作为背景图,你也可以使用任何其他您想要的颜色或者图片。
HTML
添加日期
提交
截止日期
还剩的时间
-
年
-
天
-
时
-
分
-
秒
CSS
@import url(“https://fonts.googleapis.com/css2?family=Roboto&display=swap”);
- {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
width: 100%;
min-height: 100vh;
font-family: “Roboto”, sans-serif;
background: url(“http://haiyong.site/wp-content/uploads/2021/09/3a2bd7324818ffb7fa6ed0e753a8d560.jpg”) no-repeat center/cover;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
效果图
调暗背景
body::before {
content: “”;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
container <div>
设为居中
.container {
text-align: center;
margin: 2rem auto 0;
padding: 0 15px;
}
再将各部分元素分离开
.container > * {
padding: 1rem;
}
设置h5字体大小
.container h5 {
font-size: 2rem;
}
效果
.container form input {
padding: 10px 15px;
font-size: 1.2rem;
border: none;
border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.container form button {
font-size: 1.2rem;
outline: none;
border: none;
padding: 10px 15px;
background: #ffffff;
color: #b6281b;
cursor: pointer;
transition: 0.2s linear;
}
.container form button:hover {
background: #b6281b;
color: #ffffff;
}
.container h1 {
font-size: 3rem;
text-transform: uppercase;
}
.container h5, .container h1, .container p {
color: #ffffff;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.container p {
font-size: 1.2rem;
width: 80%;
margin: auto;
}
.container .hidden {
display: none;
}
.container .pickedTime {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.container .pickedTime .time {
margin: 0.5rem;
padding: 0.5rem 1rem;
background: #ffffff;
}
.container .pickedTime .time span {
font-size: 2.5rem;
color: #b6281b;
}
.container .pickedTime .time p {
color: #000000;
width: 100%;
}
.container .boxes {
display: flex;
flex-wrap: wrap;
最后
🍅 硬核资料:关注即可领取PPT模板、简历模板、行业经典书籍PDF。
🍅 技术互助:技术群大佬指点迷津,你的问题可能不是问题,求资源在群里喊一声。
🍅 面试题库:由技术群里的小伙伴们共同投稿,热乎的大厂面试真题,持续更新中。
🍅 知识体系:含编程语言、算法、大数据生态圈组件(Mysql、Hive、Spark、Flink)、数据仓库、Python、前端等等。
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Python工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Python爬虫全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:python)
、Spark、Flink)、数据仓库、Python、前端等等。
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Python工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Python爬虫全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:python)
[外链图片转存中…(img-xHt1C4FC-1711005713072)]