'次日下午 2 点送达倒计时脚本 - CSS' 介绍

简介

这个脚本是一个使用 CSS 编写的倒计时计时器，它可以用于实现在次日下午2点之前下单，以便在次日下午2点后送货的场景。该脚本代码简洁、实用，可以帮助用户方便地进行倒计时计算。

代码

HTML

在 HTML 中添加以下代码：

<div class="countdown-container">
  <div class="countdown-timer">
    <span id="hours"></span>
    <span id="minutes"></span>
    <span id="seconds"></span>
  </div>
</div>

此处的 countdown-container 是容器的类名，而 countdown-timer 是用于容纳倒计时的区块的类名。注意，要为每一个倒计时单元（hours、minutes、seconds）指定一个 ID，ID 分别为 hours、minutes 和 seconds。

CSS

在 CSS 中添加以下代码：

.countdown-timer span {
  display: inline-block;
  font-size: 2em;
  font-weight: bold;
  padding: 0.2em 0.5em;
  border-radius: 0.5em;
  background-color: #222;
  color: #fff;
  margin: 0 0.25em;
}

@media (max-width: 600px) {
  .countdown-timer span {
    font-size: 1.5em;
    padding: 0.1em 0.25em;
    border-radius: 0.25em;
    margin: 0 0.125em;
  }
}

该 CSS 代码会将倒计时单元的样式定义为一个带有圆角矩形背景的文本框，背景色为黑色，前景色为白色。此外，当浏览器的窗口大小小于 600 像素时，CSS 代码会对字体大小、边距和圆角等属性进行适当缩小，以适应移动端浏览器。

JavaScript

在 JavaScript 中添加以下代码：

function getTimeRemaining(endtime) {
  var total = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((total / 1000) % 60);
  var minutes = Math.floor((total / 1000 / 60) % 60);
  var hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  return {
    total: total,
    hours: hours,
    minutes: minutes,
    seconds: seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var hoursSpan = clock.querySelector("#hours");
  var minutesSpan = clock.querySelector("#minutes");
  var secondsSpan = clock.querySelector("#seconds");

  function updateClock() {
    var t = getTimeRemaining(endtime);

    hoursSpan.innerHTML = ("0" + t.hours).slice(-2);
    minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
    secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 1 * 24 * 60 * 60 * 1000);
deadline.setHours(14,0,0,0);
initializeClock("countdown-timer", deadline);

此 JavaScript 代码定义了两个函数： getTimeRemaining() 和 initializeClock() 。其中 getTimeRemaining() 函数用于计算剩余时间，而 initializeClock() 函数则用于初始化并更新实际倒计时计时器。

在 initializeClock() 函数中，首先使用 document.getElementById() 方法获取倒计时区块的 ID。然后，使用 querySelector() 方法获得倒计时单元的 ID，并在一个名为 timeinterval 的定时器中更新倒计时刷新。

使用方法

为了使用此倒计时脚本，必须：

1. 将 HTML、CSS 和 JavaScript 代码分别复制到对应的代码块中。
2. 使用 initializeClock() 函数时，必须采用24小时制。

总结

此次日下午 2 点送达倒计时脚本使用 HTML5、CSS3 和原生 JavaScript 实现。它使得倒计时计时器的设计更为轻松。同时，这个小小的交互设计还能够增强客户体验，提高用户转化率，实现让网站更加易于使用和可操作的目标。