真ん中の大きな赤いボタンを押すとカウントが1増える。カウントが10増えるごとにボタンの色が変わる。カウントが100増えるごとにカウントの文字の色が変わる。赤から青、黄色、紫、緑など's game

Click here for free DL of the app version that can save data.

No:36366

←

Prev Next

→

真ん中の大きな赤いボタンを押すとカウントが1増える。カウントが10増えるごとにボタンの色が変わる。カ..ALL
Developer User16795｜Date and time 24/1/17 15:57:26
Build time 7.541 sec｜Game capacity 1.292KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>Button Game</title>
	<style>
		#count {
			font-size: 48px;
			color: red;
		}
		
		#button {
			width: 200px;
			height: 200px;
			font-size: 24px;
			border-radius: 50%;
			background-color: red;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	</style>
</head>
<body>
	<div id="count">0</div>
	<button id="button">Push me!</button>

button.addEventListener("click", function() {
			count++;
			updateCountDisplay();

if (count % 10 === 0) {
				changeButtonColor();
			}

if (count % 100 === 0) {
				changeCountColor();
			}
		});

function updateCountDisplay() {
			countDisplay.textContent = count;
		}

function changeButtonColor() {
			let colors = ["red", "blue", "yellow", "purple", "green"];
			let randomIndex = Math.floor(Math.random() * colors.length);
			button.style.backgroundColor = colors[randomIndex];
		}

function changeCountColor() {
			let colors = ["red", "blue", "yellow", "purple", "green"];
			let randomIndex = Math.floor(Math.random() * colors.length);
			countDisplay.style.color = colors[randomIndex];
		}
	</script>
</body>
</html>