ساعة إيقاف HTML-CSS-JS

كود ساعة إيقاف Stopwatch يمكنك أن تستخدمه في اى مكان في مدونتك

تم مراعاة أن يكون الكود خفيف جداً بحيث لا يكون عبئ في أى شئ على المدونة

ويمكنك أن تضيفه في آداة HTML/JavaScript أو في صفحة أو موضوع

<style>
.stopwatch,.stopwatch *{box-sizing:border-box;}
.stopwatch{direction: ltr;display:inline-flex;flex-direction:column;background:linear-gradient(to bottom,#616161 0%,#000000 100%);padding:20px;border-radius:20px;width:160px;height:160px;align-items:center;justify-content:center;gap:20px;margin:0 auto;}
.stopcontrols{display:flex;align-items:center;gap:5px;}
.stopcontrols button{background-color: #eee;width:40px;height:40px;border-radius:50%;border:none;font-size:18px;color:#333;cursor:pointer;}
.stopcontrols button:hover{background-color:#fff;}
.bastop{display:flex;color:#fff;font-size:30px;gap:2px;}
</style>

<div class="stopwatch">
    <div class="bastop">
        <span id="stopmin">00</span>:<span id="stopsec">00</span>:<span id="stopmil">00</span>
    </div>
    <div class="stopcontrols">
        <button id="startBtn"><i class="fa-solid fa-play"></i></button>
        <button id="stopBtn"><i class="fa-solid fa-pause"></i></button>
        <button id="resetBtn"><i class="fa-solid fa-rotate-right"></i></button>
    </div>
</div>

<script>
const _0x4964f9=_0x2fcd;(function(_0x5a983a,_0x21a7eb){const _0x2b91df=_0x2fcd,_0x19d63f=_0x5a983a();while(!![]){try{const _0x14ab30=parseInt(_0x2b91df(0x178))/0x1*(parseInt(_0x2b91df(0x173))/0x2)+parseInt(_0x2b91df(0x180))/0x3*(parseInt(_0x2b91df(0x179))/0x4)+-parseInt(_0x2b91df(0x17d))/0x5+-parseInt(_0x2b91df(0x17b))/0x6+-parseInt(_0x2b91df(0x172))/0x7*(parseInt(_0x2b91df(0x177))/0x8)+-parseInt(_0x2b91df(0x176))/0x9*(-parseInt(_0x2b91df(0x17a))/0xa)+parseInt(_0x2b91df(0x182))/0xb*(parseInt(_0x2b91df(0x17c))/0xc);if(_0x14ab30===_0x21a7eb)break;else _0x19d63f['push'](_0x19d63f['shift']());}catch(_0x57b8a2){_0x19d63f['push'](_0x19d63f['shift']());}}}(_0x3dc8,0x96765));let stopmin=0x0,stopsec=0x0,stopmil=0x0,interval;const displaystopmin=document[_0x4964f9(0x185)]('stopmin'),displaystopsec=document[_0x4964f9(0x185)](_0x4964f9(0x181)),displaystopmil=document[_0x4964f9(0x185)](_0x4964f9(0x184));function _0x3dc8(){const _0x1b0cbc=['stopsec','1631300jdbAuB','startBtn','stopmil','getElementById','innerHTML','133ZBugPj','6zYYKqI','resetBtn','onclick','1076067UkXcLV','72344wlGIUq','185129nhxXze','3211052QgMHoI','50yLCZHz','3183198DJajTd','24jTdfAq','4669610qGkbHv','slice','stopBtn','3hKxysV'];_0x3dc8=function(){return _0x1b0cbc;};return _0x3dc8();}document[_0x4964f9(0x185)](_0x4964f9(0x183))[_0x4964f9(0x175)]=function(){clearInterval(interval),interval=setInterval(startbastopr,0xa);},document[_0x4964f9(0x185)](_0x4964f9(0x17f))['onclick']=function(){clearInterval(interval);},document['getElementById'](_0x4964f9(0x174))[_0x4964f9(0x175)]=function(){const _0x124dc7=_0x4964f9;clearInterval(interval),stopmin=0x0,stopsec=0x0,stopmil=0x0,displaystopmin[_0x124dc7(0x171)]='00',displaystopsec[_0x124dc7(0x171)]='00',displaystopmil[_0x124dc7(0x171)]='00';};function _0x2fcd(_0x53e17f,_0x358253){const _0x3dc835=_0x3dc8();return _0x2fcd=function(_0x2fcd8f,_0x2d1ab6){_0x2fcd8f=_0x2fcd8f-0x171;let _0x3221a7=_0x3dc835[_0x2fcd8f];return _0x3221a7;},_0x2fcd(_0x53e17f,_0x358253);}function startbastopr(){const _0x1cd8ed=_0x4964f9;stopmil++,stopmil>=0x64&&(stopmil=0x0,stopsec++),stopsec>=0x3c&&(stopsec=0x0,stopmin++),displaystopmil[_0x1cd8ed(0x171)]=('0'+stopmil)[_0x1cd8ed(0x17e)](-0x2),displaystopsec[_0x1cd8ed(0x171)]=('0'+stopsec)['slice'](-0x2),displaystopmin[_0x1cd8ed(0x171)]=('0'+stopmin)['slice'](-0x2);}
</script>

شرح التنسيق

هذا findbackground:linear-gradient(to bottom,#616161 0%,#000000 100%); هو كود التدرج اللوني 

يمكنك أن تستعين بمولد التدرجات اللونية لعمل تدرج مناسب لك واستبدال الكود

الرقم 160 مكرر مرتين في الكود وهو عرض وارتفاع الإضافة يمكنك تغييره والتحكم به  

• 💢
• معاينة

00:00:00