اذهب إلى المحتوى
  • 0

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

السؤال

Recommended Posts

  • 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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


اتمنى ان اكون قد افدتك :) 

تحياتي 

شكرا لك

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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


اتمنى ان اكون قد افدتك :) 

تحياتي 

شكرا لك

شكرا جزيلا لك

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...