NiceSnippets.com
Bootstrap 4 Analog Alarm Clock With jQuery Canvas thooClock
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 analog clock , you can download full code of analog clock in bootstrap layout. Here in this post i will give you example of jquery digital clock snippet and you will get simple code of html, css and jquery. In bootstrap clock widget snippet i give you three tab with html, css and js, you can easily get code of jquery plugin for analog clock with bootstrap 4 layout.
<!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>
body{
font-family:'PT sans';
background-image:url(//nicesnippets.com/demo/vignette.png);
}
.main-section{
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%,30%);
}
#myclock canvas{
width:300px !important;
}
.alarm{
display:none;
margin:10px 0px 0px 0px;
}
.alarm a{
text-decoration:none;
padding:5px 10px 5px 10px;
color:#FFF;
background-color:#026729;
border-radius:5px;
}
.alarm a:hover{
text-decoration:none;
padding:4px 9px 4px 9px;
color:#fefefe;
background-color:#026729;
border-radius:5px;
}
#set{
text-decoration:none;
padding:5px 10px 5px 10px;
color:#FFF;
background-color:#F3A829;
border-radius:5px;
}
#set:hover{
text-decoration:none;
padding:4px 9px 4px 9px;
color:#fefefe;
background-color:#F3A829;
border-radius:5px;
}
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);
});
function alarmBackground(y){
var color;
if(y===1){
color = '#CC0000';
y=0;
}
else{
color = '#FCFCFC';
y+=1;
}
$('body').css('background-color',color);
intVal = setTimeout(function(){alarmBackground(y);},100);
}
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);
})();
