使用 HTML、CSS 和 JS 的简单倒数计时器

举报
海拥 发表于 2022/03/30 23:03:20 2022/03/30
【摘要】 直接跳到末尾 获取完整源码JavaScript 倒数计时器 用于各种电子商务和建设中的网站,以使用户保持最新状态。我们可以在不同类型的电子商务网站上看到,在一些产品或优惠到达之前的某个时间开始倒计时。在本文中,我使用了简单的 JavaScript 代码创建了一个倒数计时器和大家分享。@[TOC](❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️) 🍰 在线演示演示地址:htt...

在这里插入图片描述
直接跳到末尾 获取完整源码

JavaScript 倒数计时器 用于各种电子商务和建设中的网站,以使用户保持最新状态。我们可以在不同类型的电子商务网站上看到,在一些产品或优惠到达之前的某个时间开始倒计时。

在本文中,我使用了简单的 JavaScript 代码创建了一个倒数计时器和大家分享。

@[TOC](❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️)

🍰 在线演示

演示地址:https://haiyong.site/tools/daojishi

你可以尝试它的现场演示以了解它是如何工作的。如果你知道如何创建数字时钟,那么创建这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后,在 JavaScript 代码的帮助下,从那个时间减去当前时间,减法每秒减少一次。

正如您在上图中所看到的,我在这里使用了一张背景图。该页面包含四个小框,分别表示天、小时、分钟和秒。首先,你必须创建一个 HTML 和 CSS 文件。

🎯 第 1 步:倒数计时器的基本结构

这里我使用了一行<h5>标题,一个<form>表单和两个段落<p>还有一个pickedTime <div>用来显示剩余时间。然后我使用下面的 css 代码设计了网页body的样式。我使用了自己库存的一张图片作为背景图,你也可以使用任何其他您想要的颜色或者图片。

HTML

<div class="container">
	<h5>添加日期</h5>
	<form id="addDate">
		<input type="date" name="date" id="date">
		<input type="time" name="time" id="time">
		<button type="submit">提交</button>
	</form>
	<p class="hidden">截止日期<br><span id="until"></span></p>
	<p class="hidden">还剩的时间</p>
	<div class="pickedTime">
        <div class="time">
            <span id="time-years">-</span>
            <p></p>
        </div>
        <div class="time">
            <span id="time-days">-</span>
            <p></p>
        </div>
        <div class="time">
            <span id="time-hours">-</span>
            <p></p>
        </div>
        <div class="time">
            <span id="time-minutes">-</span>
            <p></p>
        </div>
        <div class="time">
            <span id="time-seconds">-</span>
            <p></p>
        </div>
    </div> 
</div>

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;
}

效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/38db10592cbf4c119aefa02500ed81c7.png#pic_center =500x)

🥇 第 2 步:使用 CSS 代码完善整体样式

调暗背景

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;
}

效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/971d10cdc9554bda86a9a877321edaa6.png#pic_center =500x)

🏆 第 3 步:调节各部分元素的布局

.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;
	justify-content: center;
	align-items: center;
	}
.container .boxes .box {
	background: #ffffff;
	margin: 1rem;
	padding: 1rem 2rem;
	display: flex;
	flex-direction: column;
	text-align: center;
	}
.container .boxes .box span {
	color: #b6281b;
	font-weight: bold;
	font-size: 4rem;
}
.container .boxes .box p {
	color: #000000;
	width: 100%;
	}

效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/2c4bb89240214533aa2c283b1df0ebe5.png#pic_center =500x)

🍖 第 4 步:使用 JavaScript 代码激活它

现在我已经在 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 < 1) {
         timeYears.parentElement.style.display = 'none';
     } else {
         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 < 1) {
                timeYears.parentElement.style.display = 'none';
            } else {
                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();
}

演示效果

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。