乐趣区

关于前端:使用-JavaScript-创建一个兔年春节倒数计时器

jiezi
  • 💂 集体网站:【海拥】【摸鱼游戏】【神级源码资源网】
  • 🤟 前端学习课程：👉【28 个案例趣学前端】【400 个 JS 面试题】
  • 💅 想寻找独特学习交换、摸鱼划水的小伙伴，请点击【摸鱼学习交换群】

咱们能够通过多种形式构建 JavaScript 倒数计时，我在本教程中展现的这个兔年春节倒数计时器 是由 HTML CSS 和 JavaScript 创立的。

在线地址：https://haiyong.site/demo/tunianjishi.html

它的工作形式非常简单，须要两种类型的工夫。咱们要运行倒计时的以后工夫和特定工夫，必须手动增加计时器倒计时，JavaScript 的 new Date()用于捕捉以后工夫。new Date ()是一种 JavaScript 办法，从设施获取以后工夫。

如何在 JavaScript 中构建倒数计时器

早些时候我分享了各种 简略的倒数计时器 的设计。然而，如果你想制作高级倒数计时器，那么此设计适宜你。

上面我分享了一个对于如何应用 JavaScript 创立一个兔年春节倒数计时器的分步教程。

首先 HTML 增加所有信息。而后我应用 CSS 设计了这个倒数计时器。最初，我应用 JavaScript 使 javascript 计数器计时器无效。

第 1 步：创立倒计时输入框

应用上面的 HTML 和 CSS，我创立了一个输出日期的中央。这就是我应用输入法的起因。这里 type=”date” 用于抉择和输出日期。

<div class=”clock-input”>
  <input type=”date”name=”time-to”class=”time-to”id=”time-to”value=””onchange=”calcTime(this.value)”>
</div>
html {
  font-size: 62.5%;
  font-family:“Montserrat”, sans-serif;
  font-weight: 300;
  line-height: 1rem;
  letter-spacing: 0.08rem;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  font-size: 1.4rem;
  font-weight: inherit;
  background: url("https://haiyong.site/img/bizhi/2301061.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

.clock-input {
  clear: both;
  text-align: center;
  max-width: 250px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  margin: 0 auto 90px;
}

input#time-to {
  padding: 5px;
  border: 0;
  border-radius: 3px;
  font-size: 23px;
  font-family: sans-serif;
  text-align: center;
  color: #066dcd;
  background-color: #fff;
}

第 2 步：倒数计时器的根本构造

我应用以下 HTML 增加了此javascript 倒计时的所有信息。 这里基本上做了 4 个盒子。一天中的工夫、小时、分钟和秒将别离显示在这些框中。

<div class="container">
        <div class="clock-column">
                <p class="clock-day clock-timer"></p>
                <p class="clock-label"> 日 </p>
        </div>

        <div class="clock-column">
                <p class="clock-hours clock-timer"></p>
                <p class="clock-label"> 时 </p>
        </div>

        <div class="clock-column">
                <p class="clock-minutes clock-timer"></p>
                <p class="clock-label"> 分 </p>
        </div>

        <div class="clock-column">
                <p class="clock-seconds clock-timer"></p>
                <p class="clock-label"> 秒 </p>
        </div>
</div>

第 3 步：应用 CSS 设计 JavaScript 定时器

1. 设计工夫视图框

我应用上面的 CSS 设计了这些盒子。这里应用的框是 min-height: 160px，min-width: 160px 和 background-color: #fff。

.container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 20rem;
  width: 60rem;
  background-color: transparent;
  border-radius: 3px;
  box-shadow: none;
}

.clock-column {
  margin-right: 7rem;
  text-align: center;
  position: relative;
  background-color: #fff;
  min-height: 160px;
  min-width: 160px;
  border-radius: 5px;
}

2. 在两个方框之间加一个冒号

当初，在两个框之间别离增加了一个冒号。这个冒号是应用 CSS 的“:: after”增加的。我还应用了 font-size: 75px 来减少符号的大小。

.clock-column::after {
  content: ":";
  display: block;
  height: 0.25rem;
  width: 0.25rem;
  font-size: 75px;
  font-weight: 200;
  color: #feffff;
  position: absolute;
  top: 60px;
  right: -25px;
}
.clock-column:last-child::after {display: none;}

3. 设计倒计时信息

当初咱们须要应用以下 CSS 来设计框中的倒数计时器信息。这里只能看到文字，看不到工夫相干的信息，前面应用 JavaScript 查看倒计时工夫。

.clock-label {
  padding-top: 20px;
  text-transform: uppercase;
  color: #131313;
  font-size: 16px;
  text-align: center;
  border-top: 2px solid rgba(6, 121, 215, 0.989);
}

.clock-timer {
  color: #131313;
  font-size: 46px;
  line-height: 1;
}

第四步：简略倒数计时器的 JavaScript

我曾经在下面增加了我所有的根本信息来制作这个javascript 倒计时，但尚未施行。

正如我之前所说，以后工夫将首先应用此处的 new Date()从你的设施获取。而后将从以后工夫中减去你输出的工夫值。

而后，该工夫将以天、小时、分钟和秒的模式示意。最初，应用 innerHTML，它们显示在网页上。而后用 setInterval 每秒更新一次这个工夫。

加载事件监听器

loadEventListeners();

function loadEventListeners() {
    // DOMContentLoaded 事件在初始 HTML 文档已齐全加载时触发
    document.addEventListener('DOMContentLoaded', function() {calcTime(); });
};

var timeTo = document.getElementById('time-to').value,
        date,
        now = new Date(),
        newYear = new Date('1.1.2023').getTime(),
        startTimer = '';

天、小时、分钟和秒的工夫计算

var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

select 元素

document.querySelector('.clock-day').innerHTML = days;
document.querySelector('.clock-hours').innerHTML = hours;
document.querySelector('.clock-minutes').innerHTML = minutes;
document.querySelector('.clock-seconds').innerHTML = seconds;

到这里咱们就实现了，附上残缺源码：https://code.juejin.cn/pen/7185452719165931572

退出移动版