|
|
|
|
|
<!doctype html>
|
|
|
|
|
|
<html lang="zh">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<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.0">
|
|
|
|
|
|
<title>HTML5 canvas超逼真的模拟时钟特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/default.css">
|
|
|
|
|
|
<link href='http://fonts.useso.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
|
|
|
|
|
|
<link rel="stylesheet" media="screen" href="css/main.css"/>
|
|
|
|
|
|
<!--[if IE]>
|
|
|
|
|
|
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
|
|
|
|
|
|
<![endif]-->
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="htmleaf-container">
|
|
|
|
|
|
<header class="htmleaf-header">
|
|
|
|
|
|
<h1>HTML5 canvas超逼真的模拟时钟特效 <span>A jQuery and Canvas analogue AlarmClock Plugin</span></h1>
|
|
|
|
|
|
<div class="htmleaf-links">
|
|
|
|
|
|
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
|
|
|
|
|
|
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/html5/html5-canvas/201507112207.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div id="myclock" ></div>
|
|
|
|
|
|
<div id="alarm1" class="alarm"><a href="javascript:void(0)" id="turnOffAlarm">ALARM OFF</a></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<br/><br/>
|
|
|
|
|
|
<input type="text" id="altime" placeholder="hh:mm"/><br><br>
|
|
|
|
|
|
<a href="javascript:void(0)" id="set">set Alarm</a>
|
|
|
|
|
|
<div class="related">
|
|
|
|
|
|
<h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
|
|
|
|
|
|
<a href="http://www.htmleaf.com/html5/html5donghua/201501041103.html">
|
|
|
|
|
|
<img src="related/1.jpg" width="300" alt="html5 svg简单的模拟时钟特效"/>
|
|
|
|
|
|
<h3>html5 svg简单的模拟时钟特效</h3>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="http://www.htmleaf.com/html5/html5donghua/20141222960.html">
|
|
|
|
|
|
<img src="related/2.jpg" width="300" alt="html5超逼真带定时功能的电子数字时钟"/>
|
|
|
|
|
|
<h3>html5超逼真带定时功能的电子数字时钟</h3>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
|
|
|
|
|
|
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
|
|
|
|
|
|
<script language="javascript" type="text/javascript" src="js/jquery.thooClock.js"></script>
|
|
|
|
|
|
<script language="javascript">
|
|
|
|
|
|
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 = 'alarm.ogg';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
audioElement.src = '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);
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
