正文

揭秘JS环形进度条倒计时制作技巧：轻松实现倒计时效果，让你的页面动起来！

/0 浏览量
0329

环形进度条和倒计时功能在网页设计中非常常见，它们能够有效地提升用户体验，增加页面的互动性。本文将详细介绍如何使用JavaScript和CSS制作一个环形进度条倒计时效果，让你的页面更加生动有趣。

一、准备工作

在开始制作之前，我们需要准备以下工具和资源：

  1. HTML：用于搭建页面结构。
  2. CSS：用于美化页面和环形进度条。
  3. JavaScript：用于实现倒计时功能。

二、HTML结构

首先，我们需要创建一个基本的HTML结构来容纳环形进度条和倒计时显示。

<div id="progress-container">
    <div id="progress-ring">
        <div id="progress"></div>
    </div>
    <div id="countdown">00:00:00</div>
</div>

三、CSS样式

接下来，我们需要为环形进度条添加一些基本的样式。

#progress-container {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid #e6e6e6;
    border-top: 10px solid #3498db;
    animation: spin 1s linear infinite;
}

#progress {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
    transform: rotate(0deg);
    transform-origin: 0% 0%;
}

#countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #333;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

四、JavaScript实现倒计时

现在，我们来编写JavaScript代码，实现倒计时功能。

function startCountdown(duration, display) {
    var timer = duration, minutes, seconds;
    var interval = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            clearInterval(interval);
        }
    }, 1000);
}

window.onload = function () {
    var thirtySeconds = 30,
        display = document.querySelector('#countdown');
    startCountdown(thirtySeconds, display);
};

五、环形进度条动态显示

为了使环形进度条动态显示倒计时，我们需要根据剩余时间调整其旋转角度。

function updateProgressRing(duration) {
    var timer = duration;
    var interval = setInterval(function () {
        var progress = 360 - (timer / duration) * 360;
        document.getElementById('progress').style.transform = 'rotate(' + progress + 'deg)';
        if (--timer < 0) {
            clearInterval(interval);
        }
    }, 1000);
}

window.onload = function () {
    var thirtySeconds = 30;
    var display = document.querySelector('#countdown');
    startCountdown(thirtySeconds, display);
    updateProgressRing(thirtySeconds);
};

六、总结

通过以上步骤，我们成功实现了一个环形进度条倒计时效果。你可以根据需要调整倒计时的时长和样式，使你的页面更加生动有趣。希望这篇文章能够帮助你掌握JS环形进度条倒计时的制作技巧。

-- 展开阅读全文 --