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

No:306

9107

←

Prev Next

→

Analog clock time guessing game
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time unknown sec｜Game capacity 3.569KB｜

Script

アナログ時計の時間当てゲーム

現在の時刻は何時何分でしょうか？

概要：現在のアナログ時計の時間を当てるゲームです。時計が1秒ごとに動き、入力欄に答えを入力して答えを確認することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>アナログ時計の時間当てゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: 'Helvetica Neue',sans-serif;
		}
		h1 {
			text-align: center;
			margin-top: 20px;
			font-size: 24px;
			color: #f9575c;
		}
		.clock {
			width: 250px;
			height: 250px;
			margin: 0 auto;
			position: relative;
		}
		.hand {
			position: absolute;
			width: 2px;
			height: 80px;
			background: #e3e3e3;
			left: 50%;
			top: 50%;
			transform-origin: bottom center;
			transform: translate(-50%,-50%) rotate(0deg);
			animation: rotate 60s linear infinite;
		}
		.hand.hour {
			height: 60px;
			width: 6px;
			background: #f9575c;
			transform-origin: bottom center;
			transform: translate(-50%,-50%) rotate(0deg);
			animation: rotate 7200s linear infinite;
		}
		.hand.minutes {
			height: 80px;
			width: 4px;
			background: #f9575c;
			transform-origin: bottom center;
			transform: translate(-50%,-50%) rotate(0deg);
			animation: rotate 360s linear infinite;
		}
		.hand.seconds {
			height: 100px;
			width: 2px;
			background: #f9575c;
			transform-origin: bottom center;
			transform: translate(-50%,-50%) rotate(0deg);
			animation: rotate 60s linear infinite;
		}
		@keyframes rotate {
			from {
				transform: translate(-50%,-50%) rotate(0deg);
			}
			to {
				transform: translate(-50%,-50%) rotate(360deg);
			}
		}
		.game {
			text-align: center;
			margin-top: 20px;
		}
		.button {
			margin-top: 20px;
			padding: 10px 20px;
			background-color: #f9575c;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
		.input {
			margin-top: 20px;
			padding: 10px;
			border-radius: 5px;
			border: 1px solid #e3e3e3;
			width: 200px;
			text-align: center;
			font-size: 18px;
		}
	</style>
	<script>
		window.onload = function() {
			setInterval(function() {
				var date = new Date();
				var hours = date.getHours() % 12;
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				document.querySelector('.hand.hour').style.transform = "translate(-50%,-50%) rotate(" + ((hours * 30) + (minutes * 0.5)) + "deg)";
				document.querySelector('.hand.minutes').style.transform = "translate(-50%,-50%) rotate(" + (minutes * 6) + "deg)";
				document.querySelector('.hand.seconds').style.transform = "translate(-50%,-50%) rotate(" + (seconds * 6) + "deg)";
			}, 1000);
		}

概要：現在のアナログ時計の時間を当てるゲームです。時計が1秒ごとに動き、入力欄に答えを入力して答えを確認することができます。