jQuery, CSS and HTML
<!DOCTYPE html>
<html>
<head>
	<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
	<style>
        a:hover {
            color: #333;
        }

		pre {
			background-color: #e0e0e0;
			border: none;
			margin-bottom: 20px;
		}

		pre, .btn, .form-control {
			border-radius: 0;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
		}

		h1{
			font-family: 'Comfortaa', Helvetica, Arial,  sans-serif;
            font-weight: 200;
            margin-bottom: 20px;
		}
		em { color: #999; font-size: 12px; }

		.top-bar {
			background: #000;
			padding: 10px 0;
		}

		.dark {
			padding-bottom: 30px;
			margin-bottom: 30px;
			border-bottom: 1px solid #ccc;
		}

		.timer {
			background: #f2f3f4;
			margin-bottom: 10px;
			font-weight: bold;
			font-size: 16px;
			text-shadow: -1px 0 1px #fff;
		}

		.action {
			font-style: italic;
		}

        .highlight {
            color: #a80000;
        }

        .highlight:hover {
            text-decoration: none;
        }


	</style>
</head>
<body>
	<div class='full-width dark'>
		<div class='container'>
			<h1>A demo of jQuery Timer</h1>

			<br>
			<h4>Try it out</h4>
			<div class='row'>
				<div class='col-md-3'>
					<input type='text' name='timer' class='form-control timer-demo' placeholder='0 sec' />
				</div>
				<div class='col-md-9'>
					<button class='btn btn-primary btn-lg start-timer-btn'>Start</button>
					<button class='btn btn-primary btn-lg resume-timer-btn hidden'>Resume</button>
					<button class='btn pause-timer-btn hidden'>Pause</button>
					<button class='btn btn-danger remove-timer-btn hidden'>Remove Timer</button>
				</div>
			</div>


	<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
	<script src='js/timer.jquery/timer.jquery.js'></script>
	<script>
	    (function(){
			var hasTimer = false;
			// Init timer start
			$('.start-timer-btn').on('click', function() {
				hasTimer = true;
				$('.timer-demo').timer({
					editable: true
				});
				$(this).addClass('hidden');
				$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
			});

			// Init timer resume
			$('.resume-timer-btn').on('click', function() {
				$('.timer-demo').timer('resume');
				$(this).addClass('hidden');
				$('.pause-timer-btn, .remove-timer-btn').removeClass('hidden');
			});


			// Init timer pause
			$('.pause-timer-btn').on('click', function() {
				$('.timer-demo').timer('pause');
				$(this).addClass('hidden');
				$('.resume-timer-btn').removeClass('hidden');
			});

			// Remove timer
			$('.remove-timer-btn').on('click', function() {
				hasTimer = false;
				$('.timer-demo').timer('remove');
				$(this).addClass('hidden');
				$('.start-timer-btn').removeClass('hidden');
				$('.pause-timer-btn, .resume-timer-btn').addClass('hidden');
			});

			// Additional focus event for this demo
			$('.timer-demo').on('focus', function() {
				if(hasTimer) {
					$('.pause-timer-btn').addClass('hidden');
					$('.resume-timer-btn').removeClass('hidden');
				}
			});

			// Additional blur event for this demo
			$('.timer-demo').on('blur', function() {
				if(hasTimer) {
					$('.pause-timer-btn').removeClass('hidden');
					$('.resume-timer-btn').addClass('hidden');
				}
			});
		})();
	</script>
</body>
</html>