html桌面倒计时代码,超详细!使用HTML、CSS、JavaScript实现倒计时。附加功能——点击页面出现小心心...

写在开头的感谢:

感谢 @Destiny_1853 的灵感和获取时间的代码提供。

感谢 @扰扰 的页面点击出现小心心的代码提供。

本次,我们准备写一个有关倒计时的小例子,正好最近在进行前端实训,学习了HTML和CSS,因此就在这里先实操一下

64472ec3317aa0b0fe456a8a692bbb10.png

1、本次倒计时我们准备采用,天 时 分 秒 四个时间来进行计时。

利用 span 标签,分别设置各个时间。

HTML实现代码如下:

DAYS

00

:

HOURS

00

:

MINUTES

00

:

SECONDS

00

95e1a25e1676d3a3d395b9ab0a0f8b8b.png

2、通过看效果图发现,不好看。因此我对这四个 span 每个都添加一个盒子(div)从而可以实现对span的样式设计。当然还能通过 标签的选择模式 将 行内标签 span 转换为 块标签 span,再对span标签设置样式。

并且将这几个盒子放在一个大盒子里。目的是为了对这几个盒子限制在网页中的区域。

转换的原因是:

行内标签:不能设置宽高,不独占一行

块标签:能设置宽高,独占一行

HTML实现代码如下:

DAYS

00

:

HOURS

00

:

MINUTES

00

:

SECONDS

00

运行效果:

a1f9327e8c3f76d4d2f47ca1ff26a298.png

为这几个盒子添加css样式:

在设置样式的时候,首先利用 通配符选择器 清除标签的默认样式

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值