jQuery数字滚动点击开始特效

原创已于 2025-06-27 11:13:06 修改 · 424 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-19 14:05:47 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery数字滚动点击开始特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
font-family: 'Arial', sans-serif;
overflow: hidden;
}

.counter-container {
display: flex;
margin-bottom: 50px;
}

.digit-box {
width: 80px;
height: 120px;
background: rgba(255, 255, 255, 0.1);
margin: 0 10px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.digit {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.5s ease-out;
}

.start-btn {
padding: 15px 40px;
background: linear-gradient(45deg, #ff0a54, #ff477e);
color: white;
border: none;
border-radius: 50px;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 10, 84, 0.4);
}

.start-btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(255, 10, 84, 0.6);
}

.start-btn:active {
transform: translateY(0);
}

.title {
color: white;
font-size: 2rem;
margin-bottom: 30px;
text-align: center;
}

/* 装饰元素 */
.decoration {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(0, 245, 212, 0.1);
filter: blur(30px);
z-index: -1;
animation: float 15s infinite ease-in-out;
}

.decoration:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}

.decoration:nth-child(2) {
top: 60%;
left: 70%;
animation-delay: 3s;
}

.decoration:nth-child(3) {
top: 30%;
left: 50%;
animation-delay: 6s;
}

@keyframes float {
0%, 100% {
transform: translate(0, 0);
}
25% {
transform: translate(50px, 50px);
}
50% {
transform: translate(0, 100px);
}
75% {
transform: translate(-50px, 50px);
}
}

/* 版权信息 */
.footer {
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}

.footer a {
color: #00f5d4;
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1 class="title">点击按钮开始数字滚动特效</h1>

<div class="counter-container">
<div class="digit-box">
<div class="digit" data-value="0">0</div>
</div>
<div class="digit-box">
<div class="digit" data-value="0">0</div>
</div>
<div class="digit-box">
<div class="digit" data-value="0">0</div>
</div>
<div class="digit-box">
<div class="digit" data-value="0">0</div>
</div>
</div>

<button class="start-btn">开始滚动</button>


<div class="decoration"></div>
<div class="decoration"></div>
<div class="decoration"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 初始化数字
let targetNumber = 0;
let isAnimating = false;

// 点击开始按钮
$('.start-btn').click(function() {
if (isAnimating) return;

isAnimating = true;
$(this).text('滚动中...').prop('disabled', true);

// 随机生成目标数字(0-9999)
targetNumber = Math.floor(Math.random() * 10000);
const digits = String(targetNumber).padStart(4, '0').split('');

// 为每个数字框设置动画
$('.digit-box').each(function(index) {
const digitBox = $(this);
const digitElement = digitBox.find('.digit');
const currentValue = parseInt(digitElement.attr('data-value'));
const targetValue = parseInt(digits[index]);

// 创建数字序列
let numbers = [];
for (let i = currentValue; i <= currentValue + 10; i++) {
numbers.push(i % 10);
}
numbers.push(targetValue);

// 动画效果
digitBox.css('height', '120px');
digitElement.attr('data-value', targetValue);

// 清空并添加数字序列
digitElement.empty();
numbers.forEach((num, i) => {
const numElement = $('<div>').text(num).css({
'position': 'absolute',
'width': '100%',
'height': '100%',
'display': 'flex',
'justify-content': 'center',
'align-items': 'center',
'transform': `translateY(${i * 100}%)`
});
digitElement.append(numElement);
});

// 动画时间根据位置不同有所延迟
setTimeout(() => {
digitElement.css('transform', `translateY(-${(numbers.length - 1) * 100}%)`);
}, index * 200);
});

// 动画结束后重置按钮状态
setTimeout(() => {
$('.start-btn').text('再次开始').prop('disabled', false);
isAnimating = false;

// 简化显示最终数字
$('.digit').each(function() {
$(this).html($(this).attr('data-value'));
$(this).css('transform', 'translateY(0)');
});
}, 1500);
});
});
</script>
</body>
</html>