28-03-26, 03:48 AM
(آخر تعديل لهذه المشاركة : 28-03-26, 04:01 AM {2} بواسطة Amir_Alzubidy.)
عليكم السلام و رحمة الله و بركاته
هذا تعديل المشاركة السابقة
[*]يحسب السنوات و الشهور والأيام والساعات والدقائق والثواني بدقة.
[*]يتعامل مع السنة الكبيسة وأطوال الأشهر المختلفة.
يمكنك الاستفادة من هذا التعديل ايضاً ..
هذا تعديل المشاركة السابقة
[*]يحسب السنوات و الشهور والأيام والساعات والدقائق والثواني بدقة.
[*]يتعامل مع السنة الكبيسة وأطوال الأشهر المختلفة.
PHP كود :
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>العد التراكمي</title>
<style>
#countupContainer {
display: flex;
gap: 8px;
background: #f0f0f0;
padding: 10px;
border-radius: 10px;
font-family: Arial, sans-serif;
justify-content: center;
margin-top: 20px;
}
.countBox {
background: #4CAF50;
color: #fff;
padding: 10px;
border-radius: 6px;
text-align: center;
min-width: 50px;
}
</style>
</head>
<body>
<h2>العد التراكمي</h2>
<div id="countupContainer"></div>
<script>
var startDate = new Date(2020, 0, 1);
function countup() {
var now = new Date();
var years = now.getFullYear() - startDate.getFullYear();
var months = now.getMonth() - startDate.getMonth();
var days = now.getDate() - startDate.getDate();
var hours = now.getHours() - startDate.getHours();
var minutes = now.getMinutes() - startDate.getMinutes();
var seconds = now.getSeconds() - startDate.getSeconds();
if(seconds < 0){ seconds += 60; minutes--; }
if(minutes < 0){ minutes += 60; hours--; }
if(hours < 0){ hours += 24; days--; }
if(days < 0){
months--;
var prevMonth = new Date(now.getFullYear(), now.getMonth(), 0);
days += prevMonth.getDate();
}
if(months < 0){ months += 12; years--; }
var container = document.getElementById("countupContainer");
container.innerHTML =
'<div class="countBox">'+years+'<br>years</div>'+
'<div class="countBox">'+months+'<br>months</div>'+
'<div class="countBox">'+days+'<br>days</div>'+
'<div class="countBox">'+hours+'<br>hours</div>'+
'<div class="countBox">'+minutes+'<br>minutes</div>'+
'<div class="countBox">'+seconds+'<br>seconds</div>';
setTimeout(countup, 1000);
}
window.onload = countup;
</script>
</body>
</html>
PHP كود :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cumulative Counter Since 2020</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: Tahoma, sans-serif;
background: linear-gradient(135deg, #eef2ff, #f8fafc);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.wrapper {
text-align: center;
padding: 2rem;
}
.title {
font-size: 16px;
color: #666;
margin-bottom: 1.5rem;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 480px;
margin: 0 auto 14px;
}
.box {
background: #fff;
border: 1px solid #ddd;
border-radius: 14px;
padding: 1.2rem 0.5rem;
text-align: center;
transition: all 0.2s;
cursor: default;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.box:hover {
transform: translateY(-4px) scale(1.03);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.box .num {
font-size: 42px;
font-weight: bold;
color: #222;
line-height: 1.1;
}
.box .lbl {
font-size: 14px;
color: #999;
margin-top: 8px;
}
/* Highlight seconds */
.box.sec {
border-color: #3b82f6;
background: #eff6ff;
}
.box.sec .num { color: #1d4ed8; }
.box.sec .lbl { color: #3b82f6; }
/* Highlight years */
#b-y {
background: #fef3c7;
border-color: #f59e0b;
}
#b-y .num { color: #b45309; }
/* Animation */
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.animate {
animation: pop 0.25s ease;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="title" id="title"></div>
<div class="grid">
<div class="box" id="b-y"><div class="num" id="v-y">00</div><div class="lbl">Years</div></div>
<div class="box" id="b-mo"><div class="num" id="v-mo">00</div><div class="lbl">Months</div></div>
<div class="box" id="b-d"><div class="num" id="v-d">00</div><div class="lbl">Days</div></div>
</div>
<div class="grid">
<div class="box" id="b-h"><div class="num" id="v-h">00</div><div class="lbl">Hours</div></div>
<div class="box" id="b-mi"><div class="num" id="v-mi">00</div><div class="lbl">Minutes</div></div>
<div class="box sec" id="b-s"><div class="num" id="v-s">00</div><div class="lbl">Seconds</div></div>
</div>
</div>
<script>
const start = new Date("2020-01-01T00:00:00");
const ids = ['y','mo','d','h','mi','s'];
const prev = {};
ids.forEach(k => prev[k] = -1);
function diff(s, e) {
let y = e.getFullYear() - s.getFullYear();
let mo = e.getMonth() - s.getMonth();
let d = e.getDate() - s.getDate();
let h = e.getHours() - s.getHours();
let mi = e.getMinutes() - s.getMinutes();
let sc = e.getSeconds() - s.getSeconds();
if (sc < 0) { sc += 60; mi--; }
if (mi < 0) { mi += 60; h--; }
if (h < 0) { h += 24; d--; }
if (d < 0) {
d += new Date(e.getFullYear(), e.getMonth(), 0).getDate();
mo--;
}
if (mo < 0) { mo += 12; y--; }
return { y, mo, d, h, mi, s: sc };
}
function tick() {
const t = diff(start, new Date());
const vals = { y: t.y, mo: t.mo, d: t.d, h: t.h, mi: t.mi, s: t.s };
ids.forEach(k => {
if (vals[k] !== prev[k]) {
const el = document.getElementById('v-' + k);
el.textContent = String(vals[k]).padStart(2, '0');
el.classList.remove('animate');
void el.offsetWidth;
el.classList.add('animate');
prev[k] = vals[k];
}
});
}
/* Dynamic title */
function updateTitle() {
const now = new Date();
document.getElementById("title").textContent =
"Since January 1, 2020 — " + now.toLocaleString();
}
tick();
updateTitle();
setInterval(() => {
tick();
updateTitle();
}, 1000);
</script>
</body>
</html>
![[صورة مرفقة: 177461173141861.gif]](https://up6.cc/2026/03/177461173141861.gif)
