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

سفينة القراء Ship Of Readers · 7 أبريل 2020

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

Mohamd Imran · 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>

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

تحياتي

شكرا لك

سفينة القراء Ship Of Readers · 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>

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

تحياتي

شكرا لك

شكرا جزيلا لك

Othmane Othwsav · 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, و لقد استغرق مني بعض الوقت لذلك أتمنى أن تستفيد منه:

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

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>

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

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

تم التعديل في 7 أبريل 2020 بواسطة Othmane Othwsav

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

السؤال

سفينة القراء Ship Of Readers

3 أجوبة على هذا السؤال

Recommended Posts

Mohamd Imran

سفينة القراء Ship Of Readers

Othmane Othwsav

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية