Live Demo - Bootstrap 4 Analog Alarm Clock With jQuery Canvas thooClock

See Free Live Demo example of Analog Alarm Clock using jQuery Canvas thooClock and bootstap 4. how we can set web alarm in website. this simple and nice clock design with bootstrap 4. this is jquery digital clock. you can easaly use jquery digital clock in your website with bootstrap 4. We allows to free snippets of jquery a...

<!doctype html>
<html>
<head>
	<title>Timer Clock</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
	<link rel="stylesheet" media="screen" href="custom.css"/>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-3 col-12 text-center main-section">
				<div id="myclock"></div>
				<div id="alarm1" class="alarm"><a href="javascript:void(0)" id="turnOffAlarm">ALARM OFF</a></div><br>
				<input type="text" id="altime" class="form-control mb-3" placeholder="hh:mm"/>
				<a href="javascript:void(0)" id="set">set Alarm</a>
			</div>
		</div>
	</div>
<br/><br/>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script language="javascript" type="text/javascript" src="https://www.jqueryscript.net/demo/Customizable-Analog-Alarm-Clock-with-jQuery-Canvas-thooClock/js/jquery.thooClock.js"></script>  
</body>
</html>

var intVal, myclock;

$(window).resize(function(){
		window.location.reload()
	});

$(document).ready(function(){

var audioElement = new Audio("");

//clock plugin constructor
		$('#myclock').thooClock({
			size:$(document).height()/1.4,
			onAlarm:function(){
				//all that happens onAlarm
				$('#alarm1').show();
				alarmBackground(0);
				//audio element just for alarm sound
				document.body.appendChild(audioElement);
				var canPlayType = audioElement.canPlayType("audio/ogg");
				if(canPlayType.match(/maybe|probably/i)) {
					audioElement.src = '//nicesnippets.com/demo/alarm.ogg';
				} else {
					audioElement.src = '//nicesnippets.com/demo/alarm.mp3';
				}
				// erst abspielen wenn genug vom mp3 geladen wurde
				audioElement.addEventListener('canplay', function() {
					audioElement.loop = true;
					audioElement.play();
				}, false);
			},
			showNumerals:true,
			brandText:'THOOYORK',
			brandText2:'Germany',
			onEverySecond:function(){
				//callback that should be fired every second
			},
			//alarmTime:'15:10',
			offAlarm:function(){
				$('#alarm1').hide();
				audioElement.pause();
				clearTimeout(intVal);
				$('body').css('background-color','#FCFCFC');
			}
		});

});

$('#turnOffAlarm').click(function(){
		$.fn.thooClock.clearAlarm();
	});

$('#set').click(function(){
		var inp = $('#altime').val();
		$.fn.thooClock.setAlarm(inp);
	});

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();