微信扫一扫 分享朋友圈

已有 134 人浏览分享

开启左侧

如何使用 HTML、CSS 和 JS 生成倒数计时器

[复制链接]
134 0
第 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;
}
image.png
第 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;
}

image.png
第 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%;
        }

image.png
第 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();
}

image.png

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

56

主题
热度排行
回复排行
最新贴子

Archiver|手机版|小黑屋|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2022-10-6 12:45 , Gzip On, MemCache On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。