当前位置：首页 > 行业动态 > 正文

如何在网页中实现一个3秒的CSS和JS倒计时效果？

admin
行业动态
2025-01-24
2232

### ，，本文介绍了使用HTML、CSS和JavaScript实现倒计时3秒的方法，包括设置HTML结构、编写CSS样式以及JavaScript逻辑代码。

CSS 和 JavaScript 是前端开发中常用的两种技术，它们在实现网页的样式和交互效果方面发挥着重要作用，以下将详细介绍如何使用 CSS 和 JavaScript 实现一个 3 秒倒计时的效果：

如何在网页中实现一个3秒的CSS和JS倒计时效果？第1张

一、CSS 部分

1、基础样式设置：通过 CSS 为倒计时元素设置一些基础样式，如字体、颜色、大小等，使其在页面上清晰可见且美观。

.countdown { font-size: 24px; color: #333; font-weight: bold; }

2、布局样式调整：根据页面设计需求，使用 CSS 对倒计时元素进行布局定位，可以采用绝对定位、相对定位或浮动等方式，确保倒计时元素在页面上的合适位置。

.countdown { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

二、JavaScript 部分

1、获取元素：在 JavaScript 中，首先需要获取倒计时显示的元素，假设 HTML 结构中有一个<div> 元素用于显示倒计时，其类名为countdown，那么可以通过以下代码获取该元素：

var countdownElement = document.querySelector('.countdown');

2、初始化时间：设置倒计时的初始时间为 3 秒，可以使用 JavaScript 中的Date 对象来获取当前时间，并加上 3 秒得到目标时间。

var targetTime = new Date().getTime() + 3000;

3、启动定时器：使用setInterval 方法每隔 1 秒更新一次倒计时显示的内容，在每次定时器触发时，计算当前时间与目标时间的差值，并将其转换为秒、分钟等单位，然后更新到页面上，具体代码如下：

var interval = setInterval(function() { var now = new Date().getTime(); var distance = targetTime now; var seconds = Math.floor((distance % (1000 * 60)) / 1000); countdownElement.innerText = seconds + '秒'; if (distance < 0) { clearInterval(interval); countdownElement.innerText = '倒计时结束'; } }, 1000);

三、完整示例代码

以下是一个完整的 HTML 页面示例，展示了如何使用 CSS 和 JavaScript 实现 3 秒倒计时：

 en 
 var countdownElement = document.querySelector('.countdown');
 var targetTime = new Date().getTime() + 3000;
 var interval = setInterval(function() {
     var now = new Date().getTime();
     var distance = targetTime now;
     var seconds = Math.floor((distance % (1000 * 60)) / 1000);
     countdownElement.innerText = seconds + '秒';
     if (distance < 0) {
         clearInterval(interval);
         countdownElement.innerText = '倒计时结束';
     }
 }, 1000);
 
 .countdown {
     font-size: 24px;
     color: #333;
     font-weight: bold;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }