使用 HTML、CSS 和 JS 的简单倒数计时器 |
您所在的位置：网站首页 › 倒计时器在线使用秒钟怎么设置 › 使用 HTML、CSS 和 JS 的简单倒数计时器 |
使用 HTML、CSS 和 JS 的简单倒数计时器
|
💂 个人网站:【 海拥】【开发文档导航】【Font Awesome 中文网】🤟 风趣幽默的前端学习课程：👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼游戏】【摸鱼交流圈】💬 免费且实用的计算机相关知识题库：👉进来逛逛
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。 博主前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住也分享一下给大家，👉点击跳转到网站。
JavaScript 倒数计时器 用于各种电子商务和建设中的网站，以使用户保持最新状态。我们可以在不同类型的电子商务网站上看到，在一些产品或优惠到达之前的某个时间开始倒计时。 在本文中，我使用了简单的 JavaScript 代码创建了一个倒数计时器和大家分享。 ❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️ 🍰 在线演示🎯 第 1 步：倒数计时器的基本结构🥇 第 2 步：使用 CSS 代码完善整体样式🏆 第 3 步：调节各部分元素的布局🍖 第 4 步：使用 JavaScript 代码激活它🛬 wuhu ! 起飞 !🎡 完整源码下载 🍰 在线演示演示地址：https://haiyong.site/tools/daojishi 你可以尝试它的现场演示以了解它是如何工作的。如果你知道如何创建数字时钟，那么创建这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后，在 JavaScript 代码的帮助下，从那个时间减去当前时间，减法每秒减少一次。 正如您在上图中所看到的，我在这里使用了一张背景图。该页面包含四个小框，分别表示天、小时、分钟和秒。首先，你必须创建一个 HTML 和 CSS 文件。 🎯 第 1 步：倒数计时器的基本结构这里我使用了一行标题，一个表单和两个段落 还有一个pickedTime 用来显示剩余时间。然后我使用下面的 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("https://img-blog.csdnimg.cn/8efdbb066aa64083bae7577dd50aedca.png") 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 设为居中 .container { text-align: center; margin: 2rem auto 0; padding: 0 15px; }再将各部分元素分离开 .container > * { padding: 1rem; }设置h5字体大小 .container h5 { font-size: 2rem; }效果 效果 现在我已经在 JavaScript 的帮助下实现了这个倒数计时器。我们需要获取用户设置了一个特定的日期Date.parse。也就是说，您必须确定要运行倒计时的时间。 ➤ 一分钟等于 60 秒，所以在这种情况下 m = s * 60 ➤ 一小时等于 60 分钟，在这种情况下 h = m * 60 ➤ 一天等于 24 小时，所以在这种情况下 d = h * 24。 ➤ 一年等于 365天，所以在这种情况下 y = d * 365。 const s = 1000, m = s * 60, h = m * 60, d = h * 24, y = d * 365;指示每1000 毫秒使用setInterval. 由于倒计时时间每秒都是间歇性的，所以这个系统需要每秒更新一次。 setInterval(() => { counting(); }, 1000);获取用户提供的时间 const date = document.getElementById('date').value, time = document.getElementById('time').value, timeYears = document.getElementById('time-years'), timeDays = document.getElementById('time-days'), timeHours = document.getElementById('time-hours'), timeMinutes = document.getElementById('time-minutes'), timeSeconds = document.getElementById('time-seconds');我使用的是new Date ()从设备中获取当前时间的方法。在这种情况下这里使用的时间不是任何服务器的时间，而是你设备的当地时间，然后使用了JavaScript 中的Math.floor const interval = setInterval(() => { const pickedDate = new Date(`${date} ${time}`).getTime(), currentDate = new Date().getTime(), difference = pickedDate - currentDate, years = Math.floor(difference / y); if (years timeYears.parentElement.style.display = 'block'; } timeYears.innerHTML = Math.floor(difference / y); timeDays.innerHTML = Math.floor((difference % y) / d); timeHours.innerHTML = Math.floor((difference % d) / h); timeMinutes.innerHTML = Math.floor((difference % h) / m); timeSeconds.innerHTML = Math.floor((difference % m) / s); }, 1000);最终完整的 JavaScript 代码 const s = 1000, m = s * 60, h = m * 60, d = h * 24, y = d * 365; setInterval(() => { counting(); }, 1000); const formAddDate = document.getElementById('addDate'); formAddDate.addEventListener('submit', addTime); function addTime(e) { const date = document.getElementById('date').value, time = document.getElementById('time').value, timeYears = document.getElementById('time-years'), timeDays = document.getElementById('time-days'), timeHours = document.getElementById('time-hours'), timeMinutes = document.getElementById('time-minutes'), timeSeconds = document.getElementById('time-seconds'); if (date && time) { const chosenDate = new Date(`${date} ${time}`) document.getElementById('until').innerText = chosenDate.toString(); const hidden = document.querySelectorAll('.hidden'); hidden.forEach(el => el.style.display = 'block'); const interval = setInterval(() => { const pickedDate = new Date(`${date} ${time}`).getTime(), currentDate = new Date().getTime(), difference = pickedDate - currentDate, years = Math.floor(difference / y); if (years timeYears.parentElement.style.display = 'block'; } timeYears.innerHTML = Math.floor(difference / y); timeDays.innerHTML = Math.floor((difference % y) / d); timeHours.innerHTML = Math.floor((difference % d) / h); timeMinutes.innerHTML = Math.floor((difference % h) / m); timeSeconds.innerHTML = Math.floor((difference % m) / s); }, 1000); document.querySelector('button').addEventListener('click', () => { clearInterval(interval); }); formAddDate.reset(); } e.preventDefault(); }演示效果
希望通过本文，您已经学会了如何使用 HTML、CSS 和 JS 的简单倒数计时器。我之前使用 HTML、CSS 和 JavaScript 制作了更多类型的小工具，如果您愿意，可以查看这些设计。 使用 HTML、CSS 和 JavaScript 制作的随机密码生成器 使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序 你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？ ❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️ 11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】 我已经写了很长一段时间的技术博客，并且主要通过CSDN发表，这是我的一篇 Web 响应式简单倒数计时器教程。我喜欢通过文章分享技术与快乐。您可以访问我的博客： https://haiyong.blog.csdn.net/ 以了解更多信息。希望你们会喜欢！😊 💌 欢迎大家在评论区提出意见和建议！💌 🎡 完整源码下载如果你真的从这篇文章中学到了一些新东西，喜欢它，收藏它并与你的小伙伴分享。🤗最后，不要忘了❤或📑支持一下哦。 完整的源代码：点击此处下载 免费源码可通过下方公号回复代码获取👇🏻👇🏻👇🏻 |
直接跳到末尾 获取完整源码
【本文地址】
今日新闻 |
推荐新闻 |