• 0

كيف أقوم بإظافة عداد يعمل عند النقر على عدة أزرار بالجافاسكريبت

<div id="container" >
    <p id="cuonter" >1</p>
    <button class="button1"  >click1</button>
    <button class="button1" >click2</button>
</div>

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 19 ساعات قال سفينة القراء Ship Of Readers:

<div id="container" >
    <p id="cuonter" >1</p>
    <button class="button1"  >click1</button>
    <button class="button1" >click2</button>
</div>

 

 

السلام عليكم,

لقد قمت بصنع عداد متطور قليلا باستخدام jquery, و لقد استغرق مني بعض الوقت لذلك أتمنى أن تستفيد منه:

هته بعض الصور التي توضحه:

ice_screenshot_20200407-212649.png.467b8ab90ca88218a2a20ce9fd0a859f.png

ice_screenshot_20200407-212729.png.8cf98ba3abe7cd6436cccecab7c4777c.png

ice_screenshot_20200407-212747.png.ecce3e6a9ef59068a13309232b2f6a73.png

ice_screenshot_20200407-212758.png.61a8269b1d4c11212cf7858513fde2ae.png

 

 

<!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>

إذا كان أي استفسار أو مشكل أنا في الخدمة.

تحياتي الحارة.

تمّ تعديل بواسطة Othmane Othwsav
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 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
بتاريخ 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 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن