JS特效第148弹：html5 css3圆形进度条倒计时页面跳转代码
以下是一个简化的HTML和JavaScript代码示例，用于创建一个圆形进度条并在倒计时结束时跳转到指定页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆形进度条倒计时</title>
<style>
.circle-timer {
width: 100px;
height: 100px;
position: relative;
border-radius: 50%;
background: conic-gradient(#4db8ff 0%, #f9f900 50%, #ff3c5c 100%);
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<div id="timer" class="circle-timer">10</div>
<script>
function startTimer(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);
window.location.href = "https://www.example.com"; // 指定跳转的URL
}
}, 1000);
}
window.onload = function () {
var timeLeft = 10 * 60,
display = document.querySelector('#timer');
startTimer(timeLeft, display);
};
</script>
</body>
</html>这段代码实现了一个简单的圆形进度条，通过conic-gradient创建颜色渐变，并在倒计时结束时使用window.location.href跳转到指定的页面。你可以根据需要调整倒计时时间和目标页面的URL。
评论已关闭