magkopian/clock_view.php

## clock_view.php
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Simple Ajax Clock</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}

			#wrapper {
				width: 100%;
			}

			#clock {
				width: 50%;
				min-height: 100px;
				margin: 50px auto;
				text-align: center;
				font-size: 85px;
			}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			var start_time;
			var current_time;

			//gets current server time
			var get_time = function () {
				$.ajax({
					type: 'GET',
					url: 'clock.php',
					data: ({ action : 'get_time' }),
					success: (function (data) {
						start_time = new Date(
							data.year,
							data.month,
							data.day,
							data.hour,
							data.minute,
							data.second
						);
						$('#clock').html(current_time.toLocaleTimeString());
					}),
					dataType: 'json'
				});
			}

			//counts 0.25s
			var cnt_time = function () {
				current_time = new Date(start_time.getTime() + 250);
				$('#clock').html(current_time.toLocaleTimeString());
				start_time = current_time;
			}

			setInterval(cnt_time, 250); //add 250ms to current time every 250ms
			setInterval(get_time, 30250); //sync with server every 30,25 second
			get_time();
		</script>
	</head>
	<body>
		<div id="wrapper">
			<div id="clock"></div>
		</div>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Simple Ajax Clock</title>
	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	}

	#wrapper {
	width: 100%;
	}

	#clock {
	width: 50%;
	min-height: 100px;
	margin: 50px auto;
	text-align: center;
	font-size: 85px;
	}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
	var start_time;
	var current_time;

	//gets current server time
	var get_time = function () {
	$.ajax({
	type: 'GET',
	url: 'clock.php',
	data: ({ action : 'get_time' }),
	success: (function (data) {
	start_time = new Date(
	data.year,
	data.month,
	data.day,
	data.hour,
	data.minute,
	data.second
	);
	$('#clock').html(current_time.toLocaleTimeString());
	}),
	dataType: 'json'
	});
	}

	//counts 0.25s
	var cnt_time = function () {
	current_time = new Date(start_time.getTime() + 250);
	$('#clock').html(current_time.toLocaleTimeString());
	start_time = current_time;
	}

	setInterval(cnt_time, 250); //add 250ms to current time every 250ms
	setInterval(get_time, 30250); //sync with server every 30,25 second
	get_time();
	</script>
	</head>
	<body>
	<div id="wrapper">
	<div id="clock"></div>
	</div>
	</body>
	</html>