سفينة القراء Ship Of Readers نشر 7 أبريل 2020 أرسل تقرير نشر 7 أبريل 2020 <div id="container" > <p id="cuonter" >1</p> <button class="button1" >click1</button> <button class="button1" >click2</button> </div> 1 اقتباس
0 Othmane Othwsav نشر 7 أبريل 2020 أرسل تقرير نشر 7 أبريل 2020 (معدل) بتاريخ 19 ساعات قال سفينة القراء Ship Of Readers: <div id="container" > <p id="cuonter" >1</p> <button class="button1" >click1</button> <button class="button1" >click2</button> </div> السلام عليكم, لقد قمت بصنع عداد متطور قليلا باستخدام jquery, و لقد استغرق مني بعض الوقت لذلك أتمنى أن تستفيد منه: هته بعض الصور التي توضحه: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Timer</title> <link href="https://fonts.googleapis.com/css2?family=Muli:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <style> :root { --bgColor: #8D99AE; --textColor: #EDF2F4; --brColor: #2B2D42; --btColor: #d80032; } body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: 'Muli', sans-serif; } body>div { background-color: var(--bgColor); border: 6px solid var(--brColor); color: var(--textColor); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; width: 520px; height: 520px; box-sizing: border-box; } .timer { display: flex; flex-direction: column; align-items: center; } .timer { margin-bottom: 25px; } .res { margin: 20px 0; } h2 { font-weight: 900; position: relative; } h2::before, h2::after { content: ""; background: var(--btColor); width: 30px; height: 5px; border-radius: 4px; position: absolute; top: 50%; } h2::before { transform: translateX(-40px) translateY(-50%); } h2::after { transform: translateX(10px) translateY(-50%); } .button { background: var(--btColor); padding: 10px 25px; cursor: pointer; border: 2px solid #e7f2f4; border-radius: 25px; transition: all .25s; } .button:hover { background: var(--textColor); color: var(--btColor); border-color: var(--btColor); box-shadow: 0px 0px 10px var(--textColor); } .inputs input { width: 40px; font-family: inherit; border-radius: 10px; padding: 0 5px; border: none; margin-left: 10px; font-weight: bold; border: 1px solid transparent; transition: all .35s; } .inputs input:focus { outline: none; border-color: var(--brColor); } .timer .res { color: var(--brColor); font-weight: 900; } .actions { display: flex; justify-content: space-around; width: 100%; } .timer .actions .reset, .timer .actions .pause, .timer .actions .continue { display: none; } </style> </head> <body> <div> <div class="timer"> <h2>Timer</h3> <div class="inputs"> <input type="number" class="duration h" value="00" min="0" max="99"> <label>hours </label> <input type="number" class="duration m" value="00" min="0" max="59"> <label>minutes </label> <input type="number" class="duration s" value="00" min="0" max="59"> <label>seconds</label> </div> <div class="remaining res"> <span>00</span>h <span>00</span>min <span>00</span>s </div> <div class="actions"> <div class="button start">Start</div> <div class="button toggle pause">Pause</div> <div class="button reset">Reset</div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script defer> // Timer Part Start // this line to prevent user from writing in number inputs $("input.duration").keypress(e => { e.preventDefault() }) // when this ecent is occured the text of the remaining time changes $(".timer .inputs input").change(function () { $(".remaining span").eq($(this).index() / 2).text(($(this).val().length == 1) ? `0${$(this).val()}` : $( this).val()) }) let isWorking = true $(".timer .button.start").click(function () { let vals = [Number($(".h").val()), Number($(".m").val()), Number($(".s").val())] // if this satatement is true, the timer will began if (vals.reduce((t, e) => e + t, 0) > 0) { isWorking = true $(".timer .button.toggle").addClass("pause").removeClass("continue").text("Pause") $(this).hide("fast", function () { $(this).siblings().show("fast") }) $(".inputs input").prop("disabled", true) // start of animation let timerAn = setInterval(function () { // reset button $(".timer .button.reset").click(function () { $(".remaining").html(`<span>00</span>h <span>00</span>min <span>00</span>s`) stopTimer() }) // this line write the remaining time in the dom and add a 0 to numbers from 0 to 9 to be like: 08 04 00... $(".remaining").html( `<span>${([vals[0]].toString().length == 1)? `0${vals[0]}` : vals[0]}</span>h <span>${([vals[1]].toString().length == 1)? `0${vals[1]}` : vals[1]}</span>min <span>${([vals[2]].toString().length == 1)? `0${vals[2]}` : vals[2]}</span>s` ) // these if statement is for correct time progress if (isWorking) { if (vals[2] > 0) vals[2] = vals[2] - 1 else { if (vals[1] > 0) [vals[2], vals[1]] = [59, vals[1] - 1] else { if (vals[0] > 0) [vals[2], vals[1], vals[0]] = [59, 59, vals[0] - 1] else { // the timer has finished here stopTimer() } } } } // this line write the remaining time in the dom and add a 0 to numbers from 0 to 9 to be like: 08 04 00... $(".remaining").html( `<span>${([vals[0]].toString().length == 1)? `0${vals[0]}` : vals[0]}</span>h <span>${([vals[1]].toString().length == 1)? `0${vals[1]}` : vals[1]}</span>min <span>${([vals[2]].toString().length == 1)? `0${vals[2]}` : vals[2]}</span>s` ) }, 1000) // this function is called when the timer finishes or the user click reset button function stopTimer() { $(".timer .start").siblings().hide("fast", function () { $(".timer .start").show("fast") }) $(".inputs input").prop("disabled", false).val("00") clearInterval(timerAn) } } }) // Pause and Continue part $(".timer .button.toggle").click(function () { if ($(this).hasClass("pause")) { isWorking = false } else { isWorking = true } $(this).toggleClass("continue pause").text(($(this).hasClass("pause")) ? "Pause" : "Continue") }) </script> </body> </html> إذا كان أي استفسار أو مشكل أنا في الخدمة. تحياتي الحارة. تم التعديل في 7 أبريل 2020 بواسطة Othmane Othwsav 1 اقتباس
0 Mohamd Imran نشر 7 أبريل 2020 أرسل تقرير نشر 7 أبريل 2020 بتاريخ 5 ساعات قال سفينة القراء Ship Of Readers: <div id="container" > <p id="cuonter" >1</p> <button class="button1" >click1</button> <button class="button1" >click2</button> </div> السلام عليكم @سفينة القراء Ship Of Readers تفضل <html> <head> <title>Space Clicker</title> </head> <body> <script type="text/javascript"> var clicks = 0; function onClick() { clicks += 1; document.getElementById("clicks").innerHTML = clicks; }; </script> <button type="button" onClick="onClick()">Click me</button> <p>Clicks: <a id="clicks">0</a></p> </body></html> تحياتي شكرا لك بتاريخ 5 ساعات قال سفينة القراء Ship Of Readers: <div id="container" > <p id="cuonter" >1</p> <button class="button1" >click1</button> <button class="button1" >click2</button> </div> اعتذر لم انتبه انك تريد عداد ,تفضل عداد عن الضغط على الزر <html> <head> <title>countdown</title> </head> <body> <script type="text/javascript"> function onClick(duration) { var sec = 60; <!-- هنا قيمة العداد التي يبدء بها --> setInterval(function() { document.getElementById("clicks").innerHTML = sec + " "; sec--; if (sec < 0) { sec = 60; } }, 1000); } </script> <button type="button" onClick="onClick()">Click me</button> <p>countdown: <a id="clicks">0</a></p> </body></html> اتمنى ان اكون قد افدتك تحياتي شكرا لك 1 اقتباس
0 سفينة القراء Ship Of Readers نشر 7 أبريل 2020 الكاتب أرسل تقرير نشر 7 أبريل 2020 بتاريخ 8 ساعات قال Mohamd Imran: السلام عليكم @سفينة القراء Ship Of Readers تفضل <html> <head> <title>Space Clicker</title> </head> <body> <script type="text/javascript"> var clicks = 0; function onClick() { clicks += 1; document.getElementById("clicks").innerHTML = clicks; }; </script> <button type="button" onClick="onClick()">Click me</button> <p>Clicks: <a id="clicks">0</a></p> </body></html> تحياتي شكرا لك اعتذر لم انتبه انك تريد عداد ,تفضل عداد عن الضغط على الزر <html> <head> <title>countdown</title> </head> <body> <script type="text/javascript"> function onClick(duration) { var sec = 60; <!-- هنا قيمة العداد التي يبدء بها --> setInterval(function() { document.getElementById("clicks").innerHTML = sec + " "; sec--; if (sec < 0) { sec = 60; } }, 1000); } </script> <button type="button" onClick="onClick()">Click me</button> <p>countdown: <a id="clicks">0</a></p> </body></html> اتمنى ان اكون قد افدتك تحياتي شكرا لك شكرا جزيلا لك 1 اقتباس
السؤال
سفينة القراء Ship Of Readers
<div id="container" >
<p id="cuonter" >1</p>
<button class="button1" >click1</button>
<button class="button1" >click2</button>
</div>
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.