L'exemple de cet article décrit l'effet d'horloge de Jquery+html5 qui peut définir un réveil et fournir un rappel vocal. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants : Il s'agit d'un code d'effets spéciaux d'horloge basé sur Jquery+html5 qui peut définir un réveil et fournir des rappels vocaux. La plus grande fonctionnalité est qu'elle peut également fournir des rappels vocaux. des amis viennent l'étudier. Rendu des opérations :
Conseils : Si le navigateur ne fonctionne pas normalement, vous pouvez essayer de changer de mode de navigation. Le code Jquery+html5 que j'ai partagé avec vous pour implémenter l'effet d'horloge qui peut régler le réveil et fournir un rappel vocal est le suivant
<span class="dec"><!doctype html></span><br/><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"zh"</span><span class="tag">></span><br/><span class="tag"><head></span><br/><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">></span><br/><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">http-equiv</span><span class="pun">=</span><span class="atv">"X-UA-Compatible"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"IE=edge,chrome=1"</span><span class="tag">></span><span class="pln"> </span><br/><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><br/><span class="pln"> </span><span class="tag"><title></span><span class="pln">HTML5 canvas超逼真的模拟时钟特效</span><span class="tag"></title></span><br/><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/normalize.css"</span><span class="pln"> </span><span class="tag">/></span><br/><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/default.css"</span><span class="tag">></span><br/><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"http://fonts.useso.com/css?family=PT+Sans"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="tag">></span><br/><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">media</span><span class="pun">=</span><span class="atv">"screen"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/main.css"</span><span class="tag">/></span><br/><span class="pln"> </span><span class="com"><!--[if IE]></span><br/><span class="com"> <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script></span><br/><span class="com"> <![endif]--></span><br/><span class="tag"></head></span><br/><span class="tag"><body></span><br/><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"htmleaf-container"</span><span class="tag">></span><br/><span class="pln"> </span><br/><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">></span><br/><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myclock"</span><span class="tag">></div></span><br/><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"alarm1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alarm"</span><span class="tag">><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"javascript:void(0)"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"turnOffAlarm"</span><span class="tag">></span><span class="pln">关闭闹钟</span><span class="tag"></a></div></span><br/><span class="pln"> </span><span class="tag"></div></span><br/><br/><span class="pln"> </span><span class="tag"><br/><br/></span><br/><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"altime"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"hh:mm"</span><span class="tag">/><br><br></span><br/><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"javascript:void(0)"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"set"</span><span class="tag">></span><span class="pln">设置闹钟</span><span class="tag"></a></span><br/><span class="pln"> </span><br/><span class="pln"> </span><span class="tag"></div></span><br/><span class="pln"> </span><br/><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></script></span><br/><span class="pln"> </span><span class="tag"><script></span><span class="pln">window</span><span class="pun">.</span><span class="pln">jQuery </span><span class="pun">||</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="str">"<script src="</span><span class="pln">js</span><span class="pun">/</span><span class="pln">jquery</span><span class="pun">-</span><span class="lit">2.1</span><span class="pun">.</span><span class="lit">1.min</span><span class="pun">.</span><span class="pln">js</span><span class="str">"></span><span class="tag"></script></span><span class="pln">")</span><span class="tag"></script></span><br/><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">language</span><span class="pun">=</span><span class="atv">"javascript"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/jquery.thooClock.js"</span><span class="tag">></script></span><span class="pln"> </span><br/><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">language</span><span class="pun">=</span><span class="atv">"javascript"</span><span class="tag">></span><br/><span class="pln"> </span><span class="kwd">var</span><span class="pln"> intVal</span><span class="pun">,</span><span class="pln"> myclock</span><span class="pun">;</span><br/><br/><span class="pln"> $</span><span class="pun">(</span><span class="pln">window</span><span class="pun">).</span><span class="pln">resize</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><br/><span class="pln"> window</span><span class="pun">.</span><span class="pln">location</span><span class="pun">.</span><span class="pln">reload</span><span class="pun">()</span><br/><span class="pln"> </span><span class="pun">});</span><br/><br/><span class="pln"> $</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><br/><br/><span class="pln"> </span><span class="kwd">var</span><span class="pln"> audioElement </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Audio</span><span class="pun">(</span><span class="str">""</span><span class="pun">);</span><br/><br/><span class="pln"> </span><span class="com">//clock plugin constructor</span><br/><span class="pln"> $</span><span class="pun">(</span><span class="str">"#myclock"</span><span class="pun">).</span><span class="pln">thooClock</span><span class="pun">({</span><br/><span class="pln"> size</span><span class="pun">:</span><span class="pln">$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">height</span><span class="pun">()/</span><span class="lit">1.4</span><span class="pun">,</span><br/><span class="pln"> onAlarm</span><span class="pun">:</span><span class="kwd">function</span><span class="pun">(){</span><br/><span class="pln"> </span><span class="com">//all that happens onAlarm</span><br/><span class="pln"> $</span><span class="pun">(</span><span class="str">"#alarm1"</span><span class="pun">).</span><span class="pln">show</span><span class="pun">();</span><br/><span class="pln"> alarmBackground</span><span class="pun">(</span><span class="lit">0</span><span class="pun">);</span><br/><span class="pln"> </span><span class="com">//audio element just for alarm sound</span><br/><span class="pln"> document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">audioElement</span><span class="pun">);</span><br/><span class="pln"> </span><span class="kwd">var</span><span class="pln"> canPlayType </span><span class="pun">=</span><span class="pln"> audioElement</span><span class="pun">.</span><span class="pln">canPlayType</span><span class="pun">(</span><span class="str">"audio/ogg"</span><span class="pun">);</span><br/><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">canPlayType</span><span class="pun">.</span><span class="pln">match</span><span class="pun">(</span><span class="str">/maybe|probably/</span><span class="pln">i</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><br/><span class="pln"> audioElement</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> </span><span class="str">"alarm.ogg"</span><span class="pun">;</span><br/><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><br/><span class="pln"> audioElement</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> </span><span class="str">"alarm.mp3"</span><span class="pun">;</span><br/><span class="pln"> </span><span class="pun">}</span><br/><span class="pln"> </span><span class="com">// erst abspielen wenn genug vom mp3 geladen wurde</span><br/><span class="pln"> audioElement</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"canplay"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><br/><span class="pln"> audioElement</span><span class="pun">.</span><span class="pln">loop </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><br/><span class="pln"> audioElement</span><span class="pun">.</span><span class="pln">play</span><span class="pun">();</span><br/><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span><br/><span class="pln"> </span><span class="pun">},</span><br/><span class="pln"> showNumerals</span><span class="pun">:</span><span class="kwd">true</span><span class="pun">,</span><br/><span class="pln"> brandText</span><span class="pun">:</span><span class="str">"THOOYORK"</span><span class="pun">,</span><br/><span class="pln"> brandText2</span><span class="pun">:</span><span class="str">"Germany"</span><span class="pun">,</span><br/><span class="pln"> onEverySecond</span><span class="pun">:</span><span class="kwd">function</span><span class="pun">(){</span><br/><span class="pln"> </span><span class="com">//callback that should be fired every second</span><br/><span class="pln"> </span><span class="pun">},</span><br/><span class="pln"> </span><span class="com">//alarmTime:"15:10",</span><br/><span class="pln"> offAlarm</span><span class="pun">:</span><span class="kwd">function</span><span class="pun">(){</span><br/><span class="pln"> $</span><span class="pun">(</span><span class="str">"#alarm1"</span><span class="pun">).</span><span class="pln">hide</span><span class="pun">();</span><br/><span class="pln"> audioElement</span><span class="pun">.</span><span class="pln">pause</span><span class="pun">();</span><br/><span class="pln"> clearTimeout</span><span class="pun">(</span><span class="pln">intVal</span><span class="pun">);</span><br/><span class="pln"> $</span><span class="pun">(</span><span class="str">"body"</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">"background-color"</span><span class="pun">,</span><span class="str">"#FCFCFC"</span><span class="pun">);</span><br/><span class="pln"> </span><span class="pun">}</span><br/><span class="pln"> </span><span class="pun">});</span><br/><br/><span class="pln"> </span><span class="pun">});</span><br/><br/><span class="pln"> </span><br/><br/><span class="pln"> $</span><span class="pun">(</span><span class="str">"#turnOffAlarm"</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><br/><span class="pln"> $</span><span class="pun">.</span><span class="pln">fn</span><span class="pun">.</span><span class="pln">thooClock</span><span class="pun">.</span><span class="pln">clearAlarm</span><span class="pun">();</span><br/><span class="pln"> </span><span class="pun">});</span><br/><br/><br/><span class="pln"> $</span><span class="pun">(</span><span class="str">"#set"</span><span class="pun">).</span><span class="pln">click</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><br/><span class="pln"> </span><span class="kwd">var</span><span class="pln"> inp </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">"#altime"</span><span class="pun">).</span><span class="pln">val</span><span class="pun">();</span><br/><span class="pln"> $</span><span class="pun">.</span><span class="pln">fn</span><span class="pun">.</span><span class="pln">thooClock</span><span class="pun">.</span><span class="pln">setAlarm</span><span class="pun">(</span><span class="pln">inp</span><span class="pun">);</span><br/><span class="pln"> </span><span class="pun">});</span><br/><br/><span class="pln"> </span><br/><span class="pln"> </span><span class="kwd">function</span><span class="pln"> alarmBackground</span><span class="pun">(</span><span class="pln">y</span><span class="pun">){</span><br/><span class="pln"> </span><span class="kwd">var</span><span class="pln"> color</span><span class="pun">;</span><br/><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">y</span><span class="pun">===</span><span class="lit">1</span><span class="pun">){</span><br/><span class="pln"> color </span><span class="pun">=</span><span class="pln"> </span><span class="str">"#CC0000"</span><span class="pun">;</span><br/><span class="pln"> y</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><br/><span class="pln"> </span><span class="pun">}</span><br/><span class="pln"> </span><span class="kwd">else</span><span class="pun">{</span><br/><span class="pln"> color </span><span class="pun">=</span><span class="pln"> </span><span class="str">"#FCFCFC"</span><span class="pun">;</span><br/><span class="pln"> y</span><span class="pun">+=</span><span class="lit">1</span><span class="pun">;</span><br/><span class="pln"> </span><span class="pun">}</span><br/><span class="pln"> $</span><span class="pun">(</span><span class="str">"body"</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">"background-color"</span><span class="pun">,</span><span class="pln">color</span><span class="pun">);</span><br/><span class="pln"> intVal </span><span class="pun">=</span><span class="pln"> setTimeout</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">alarmBackground</span><span class="pun">(</span><span class="pln">y</span><span class="pun">);},</span><span class="lit">100</span><span class="pun">);</span><br/><span class="pln"> </span><span class="pun">}</span><br/><span class="pln"> </span><span class="tag"></script></span><br/><span class="tag"></body></span><br/><span class="tag"></html></span>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
qu'est-ce que h5
Comment implémenter h5 pour glisser vers le haut et charger la page suivante côté Web
La différence de vitesse entre USB2.0 et 3.0
Comment lire les fichiers py en python
ébrécher
transition css3
Qu'est-ce que l'indice Baidu
Quelle est la différence entre une machine de démonstration et une vraie machine ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
