- Nov 22, 2022
- 10,043
- 1
- 38
كود الساعة للزين فورو
طريقة تشغيل الكود
المظهر- القطع- إضافة قطعة - ملاحظة عند مفتاح القطعة قم بكتابة ( watch )
HTML:
<div class="block-container" data-widget-id="199" data-widget-key="time_widget" data-widget-definition="html">
<div class="block-body block-row">
<div class="wrapper">
<div class="display">
<div id="time">09:44:50</div>
</div>
<span></span>
<span></span>
</div>
<style>
.wrapper {
height: 100px;
position: relative;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
border-radius: 10px;
cursor: default;
animation: animate 1.5s linear infinite;
}
.wrapper .display,
.wrapper span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wrapper .display {
z-index: 999;
height: 80px;
width: 400px;
background: #1b1b1b;
border-radius: 6px;
text-align: center;
}
.display #time {
line-height: 85px;
color: #fff;
font-size: 50px;
font-weight: 600;
letter-spacing: 1px;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate 1.5s linear infinite;
}
@keyframes animate {
100% {
filter: hue-rotate(360deg);
}
}
.wrapper span {
height: 100%;
width: 100%;
border-radius: 10px;
background: inherit;
}
.wrapper span:first-child {
filter: blur(7px);
}
.wrapper span:last-child {
filter: blur(20px);
}
</style>
<script>
function updateClock() {
const time = document.querySelector(".display #time");
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let day_night = "صباح";
if (hours >= 12) {
day_night = "مساء";
if (hours > 12) hours -= 12;
}
if (hours === 0) hours = 12; // تصحيح الساعة 0 لتكون 12 AM
if (seconds < 10) seconds = "0" + seconds;
if (minutes < 10) minutes = "0" + minutes;
if (hours < 10) hours = "0" + hours;
time.textContent = `${hours}:${minutes}:${seconds} ${day_night}`;
setTimeout(updateClock, 1000); // تحديث الساعة كل ثانية
}
// بدء تحديث الساعة
updateClock();
</script>
</div>[/B][/SIZE]
[B][SIZE=6]</div>