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 sind 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 Freunde kommen und studieren es. Vorgangswiedergabe:
Tipps: Wenn der Browser nicht normal läuft, können Sie versuchen, den Browsermodus zu wechseln. Der Code für Jquery+html5, um den Uhreffekt mit Ihnen zu teilen, der den Wecker einstellen und eine Spracherinnerung bereitstellen kann, lautet wie folgt:
<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>Das obige ist der detaillierte Inhalt vonJquery + HTML5 realisiert den Uhreffekt der Spracherinnerung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
was ist h5
So implementieren Sie h5, um nach oben zu rutschen und die nächste Seite auf der Webseite zu laden
Was bedeutet Klasse in der C-Sprache?
Datenstruktur der C-Sprache
So lösen Sie das Problem „Berechtigung verweigert'.
Assoziationsregeln Apriori-Algorithmus
Wie heißt die Telekommunikations-App?
Was sind die Vor- und Nachteile der Dezentralisierung?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
