<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>365存钱法 - 智能计算器</title>
<style>
:root {
--primary: #4a90e2;
--bg: #f5f7fa;
--card-bg: #ffffff;
--text: #2c3e50;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
.container {
max-width: 600px;
margin: 1rem auto;
padding: 1.5rem;
}
.calculator-card {
background: var(--card-bg);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 2rem;
}
.date-picker {
position: relative;
margin-bottom: 1.5rem;
}
.custom-date-input {
width: 100%;
padding: 1rem;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
background: #fff;
-webkit-appearance: none;
}
.calendar-icon {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
pointer-events: none;
}
.result-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 1.5rem 0;
}
.result-item {
background: rgba(74,144,226,0.1);
padding: 1rem;
border-radius: 8px;
text-align: center;
transition: transform 0.3s ease;
}
.progress-container {
height: 12px;
background: #e0e0e0;
border-radius: 6px;
margin: 2rem 0;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #4a90e2, #6c5ce7);
transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.quote {
margin-top: 2rem;
padding: 1.5rem;
background: rgba(74,144,226,0.05);
border-radius: 8px;
text-align: center;
font-style: italic;
color: #666;
opacity: 1;
transition: opacity 0.3s ease;
}
.quote.fade {
opacity: 0;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.animated {
animation: pulse 0.5s ease-in-out;
}
[url=home.php?mod=space&uid=945662]@media[/url] (max-width: 480px) {
.container {
padding: 1rem;
}
.result-grid {
grid-template-columns: 1fr;
}
.custom-date-input {
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="calculator-card">
<h2 style="margin-bottom: 1.5rem; text-align: center">💰365存钱法💰</h2>
<div class="date-picker">
<input type="date" id="dateInput" class="custom-date-input">
<svg class="calendar-icon" viewBox="0 0 24 24">
<path fill="currentColor" d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10z"/>
</svg>
</div>
<div class="result-grid">
<div class="result-item">
<p>今日应存</p>
<h3 id="dailyAmount">0 元</h3>
</div>
<div class="result-item">
<p>累计存款</p>
<h3 id="totalAmount">0 元</h3>
</div>
</div>
<div class="progress-container">
<div class="progress-bar" id="progressBar" style="width: 0%"></div>
</div>
<div style="text-align: center">
<p>总进度：<span id="percentage">0</span>%</p>
</div>
<div class="quote">
<p id="quoteText">理财之道，积少成多</p>
<p class="quote-author" id="quoteAuthor">—— 中国谚语</p>
</div>
</div>
</div>
<script>
const SavingCalculator = (() => {
const quotes = [
{ text: "省下一分钱就是赚到一分钱", author: "本杰明·富兰克林" },
{ text: "财富就像一棵树，是从一粒小小的种子开始成长的", author: "戴夫·拉姆齐" },
{ text: "不要为了花钱而工作，要让钱为你工作", author: "罗伯特·清崎" },
{ text: "理财的首要目标应是保障资本安全，其次才是追求收益", author: "沃伦·巴菲特" },
{ text: "每月存下收入的10%会让你惊讶于它的累积速度", author: "约翰·洛克菲勒" },
{ text: "理财不是有钱人的专利，而是每个人的必修课", author: "李嘉诚" }
];
let animationFrameIds = {};
function getToday() {
const now = new Date();
return new Date(now.getFullYear(), now.getMonth(), now.getDate());
}
function calculateDays(startDate, endDate) {
const start = new Date(startDate);
const end = new Date(endDate);
start.setHours(0, 0, 0, 0);
end.setHours(0, 0, 0, 0);
return Math.floor((end - start) / 86400000) + 1;
}
function animateValue(elementId, targetValue) {
const element = document.getElementById(elementId);
const current = parseInt(element.textContent.replace(/,/g, '')) || 0;
if (animationFrameIds[elementId]) {
cancelAnimationFrame(animationFrameIds[elementId]);
}
const startTime = Date.now();
const duration = 500;
const animate = () => {
const progress = Math.min((Date.now() - startTime) / duration, 1);
const value = Math.floor(current + (targetValue - current) * progress);
element.textContent = value.toLocaleString() + ' 元';
if (progress < 1) {
animationFrameIds[elementId] = requestAnimationFrame(animate);
} else {
delete animationFrameIds[elementId];
}
};
animationFrameIds[elementId] = requestAnimationFrame(animate);
}
function updateProgress(percentage) {
const progressBar = document.getElementById('progressBar');
const percentageElement = document.getElementById('percentage');
progressBar.style.width = `${percentage}%`;
percentageElement.textContent = percentage.toFixed(1);
}
function showRandomQuote() {
const quoteContainer = document.querySelector('.quote');
quoteContainer.classList.add('fade');
setTimeout(() => {
const {text, author} = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById('quoteText').textContent = text;
document.getElementById('quoteAuthor').textContent = `—— ${author}`;
quoteContainer.classList.remove('fade');
}, 300);
}
return {
init() {
const dateInput = document.getElementById('dateInput');
const currentYear = new Date().getFullYear();
// 设置日期范围
dateInput.min = `${currentYear}-01-01`;
dateInput.max = `${currentYear}-12-31`;
// 初始化日期
const savedDate = localStorage.getItem('savingDate');
if (savedDate && new Date(savedDate).getFullYear() === currentYear) {
dateInput.value = savedDate;
} else {
dateInput.value = getToday().toISOString().split('T')[0];
}
// 绑定事件
dateInput.addEventListener('change', () => {
localStorage.setItem('savingDate', dateInput.value);
this.calculate();
});
this.calculate();
showRandomQuote();
},
calculate() {
const dateInput = document.getElementById('dateInput');
const currentYear = new Date().getFullYear();
const selectedDate = new Date(dateInput.value);
// 日期有效性验证
if (isNaN(selectedDate) || selectedDate.getFullYear() !== currentYear) {
dateInput.value = getToday().toISOString().split('T')[0];
selectedDate.setTime(getToday().getTime());
}
// 计算天数
const startDate = new Date(currentYear, 0, 1);
const daysPassed = Math.max(1, Math.min(
calculateDays(startDate, selectedDate),
365
));
// 计算结果
const totalSaved = (daysPassed * (daysPassed + 1)) / 2;
const percentage = (totalSaved / 66795) * 100;
// 更新界面
animateValue('dailyAmount', daysPassed);
animateValue('totalAmount', totalSaved);
updateProgress(percentage);
showRandomQuote();
// 触发元素动画
document.querySelectorAll('.result-item h3').forEach(el => {
el.classList.add('animated');
setTimeout(() => el.classList.remove('animated'), 500);
});
}
};
})();
// 初始化应用
SavingCalculator.init();
</script>
</body>
</html>
[复制链接]
发表于 2025-3-24 19:45
|
发表于 2025-3-24 20:24
