cari

Rumah >hujung hadapan web >tutorial js >Perkongsian kod kesan khas Jam Jquery html5 (jam penggera boleh ditetapkan dan peringatan suara)_jquery

Perkongsian kod kesan khas Jam Jquery html5 (jam penggera boleh ditetapkan dan peringatan suara)_jquery

WBOY
WBOYasal
2016-05-16 15:42:542448semak imbas

Contoh dalam artikel ini menerangkan kesan jam Jquery html5 yang boleh menetapkan jam penggera dan memberikan peringatan suara. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini adalah kod kesan khas jam berdasarkan Jquery html5 yang boleh menetapkan jam penggera dan memberikan peringatan suara Ia adalah jam analog super realistik ialah ia juga boleh memberikan peringatan suara, datang dan pelajari.
Paparan operasi: -------------------Lihat kesan Muat turun kod sumber--------- - --------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.
Pelaksanaan html5 Jquery yang akan saya kongsikan dengan anda ialah kod kesan khas jam yang boleh menetapkan jam penggera dan memberikan peringatan suara seperti berikut 

<!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&#63;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>

Di atas ialah kesan jam ultra-realistik jQuery yang dikongsi dengan anda.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery melaksanakan kod kesan menu sekunder yang meluncur keluar ke kiri dan kanan seperti fence_jqueryArtikel seterusnya：jquery melaksanakan kod kesan menu sekunder yang meluncur keluar ke kiri dan kanan seperti fence_jquery

Artikel berkaitan

Lihat lagi