Das Beispiel in diesem Artikel beschreibt den Uhreffekt von JQuery HTML5, mit dem ein Wecker eingestellt und eine Spracherinnerung bereitgestellt werden kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein auf JQuery HTML5 basierender Uhr-Spezialeffektcode, der einen Wecker stellen und Spracherinnerungen bereitstellen kann. Das größte Merkmal ist, dass er auch Spracherinnerungen bereitstellen kann.
Vorgangsrendering: -------------------Effekt anzeigen Quellcode herunterladen--------- - --------
Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Die Jquery-HTML5-Implementierung, die ich mit Ihnen teilen werde, ist der Uhr-Spezialeffektcode, der wie folgt einen Wecker stellen und Spracherinnerungen bereitstellen kann
<!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超逼真的模拟时钟特效</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">
<div class="container">
<div id="myclock"></div>
<div id="alarm1" class="alarm"><a href="javascript:void(0)" id="turnOffAlarm">关闭闹钟</a></div>
</div>
<br/><br/>
<input type="text" id="altime" placeholder="hh:mm"/><br><br>
<a href="javascript:void(0)" id="set">设置闹钟</a>
</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>
Das Obige ist der ultrarealistische jQuery-Uhreffekt, den ich mit Ihnen geteilt habe. Ich hoffe, er wird Ihnen gefallen.
