ホームページ > 記事 > ウェブフロントエンド > Clock Jquery HTML5 特殊効果コード共有 (目覚まし時計の設定と音声リマインダーが可能)_jquery
この記事の例では、目覚まし時計を設定し、音声リマインダーを提供できる Jquery html5 の時計効果について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、目覚まし時計を設定し、音声リマインダーを提供できる Jquery html5 ベースの時計特殊効果コードです。最大の特徴は、音声リマインダーも提供できることです。
オペレーション レンダリング: -------------------エフェクトを表示 ソース コードをダウンロード-------- - --------
ヒント: ブラウザが正常に動作しない場合は、閲覧モードを切り替えてみてください。
私が皆さんと共有する Jquery html5 実装は、次のような目覚まし時計を設定し、音声リマインダーを提供できる時計の特殊効果コードです
<!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>
上記は、jQuery の超リアルな時計エフェクトです。気に入っていただければ幸いです。