Jquery+html5实现语音提醒的时钟效果-js教程-PHP中文网

首页

web前端

js教程

Jquery+html5实现语音提醒的时钟效果

巴扎黑

Aug 17, 2017 pm 03:37 PM

h5 时钟

本文实例讲述了Jquery+html5可设置闹钟并且会语音提醒的时钟特效。分享给大家供大家参考。具体如下：这是一款基于Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码，超逼真的模拟时钟，最大的特点还可以语音提醒，感兴趣的小伙伴们快来研究研究。运行效果图：

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码如下

<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>

登录后复制

以上是Jquery+html5实现语音提醒的时钟效果的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1677

CakePHP 教程

1431

Laravel 教程

1334

PHP教程

1280

C# 教程

1257

显示更多

Related knowledge

如何在 iPhone 上使用多计时器与 iOS 17 Jun 21, 2023 am 08:18 AM

什么是iOS17上的多计时器？在iOS17中，Apple现在为用户提供了在iPhone上一次设置多个计时器的能力。这是一个可喜的变化，许多人多年来一直期待的变化。时钟应用程序在iOS16之前只允许用户一次设置一个计时器，现在可用于激活任意数量的计时器，使其成为您一次完成多个任务的理想选择。您可以在计时器屏幕中设置任意数量的计时器。启动计时器后，所有活动计时器都将在锁屏界面和通知中心显示为“实时活动”通知。从这里，您可以查看计时器关闭、暂停或停止计时器的剩余时间，而无需打开时钟应用程序。当您在时钟

iPhone中缺少时钟应用程序：如何修复 May 03, 2024 pm 09:19 PM

您的手机中缺少时钟应用程序吗？日期和时间仍将显示在iPhone的状态栏上。但是，如果没有时钟应用程序，您将无法使用世界时钟、秒表、闹钟等多项功能。因此，修复时钟应用程序的缺失应该是您的待办事项列表的首位。这些解决方案可以帮助您解决此问题。修复1–放置时钟应用程序如果您错误地从主屏幕中删除了时钟应用程序，您可以将时钟应用程序放回原位。步骤1–解锁iPhone并开始向左侧滑动，直到到达“应用程序库”页面。步骤2–接下来，在搜索框中搜索“时钟”。步骤3–当您在搜索结果中看到下方的“时钟”时，请按住它并

iOS 17：如何在待机模式下更改iPhone时钟样式 Sep 10, 2023 pm 09:21 PM

待机是一种锁定屏幕模式，当iPhone插入充电器并以水平（或横向）方向定位时激活。它由三个不同的屏幕组成，其中一个是全屏时间显示。继续阅读以了解如何更改时钟的样式。StandBy的第三个屏幕显示各种主题的时间和日期，您可以垂直滑动。某些主题还会显示其他信息，例如温度或下一个闹钟。如果您按住任何时钟，则可以在不同的主题之间切换，包括数字、模拟、世界、太阳能和浮动。Float以可自定义的颜色以大气泡数字显示时间，Solar具有更多标准字体，具有不同颜色的太阳耀斑设计，而World则通过突出显示世界地

如何在 iPhone 上关闭闹钟 [2023] Aug 21, 2023 pm 01:25 PM

自从智能手机问世以来，它们无疑取代了闹钟。如果您拥有iPhone，则可以使用时钟应用程序在一天中的多个场合轻松设置任意数量的闹钟。该应用程序可让您配置闹钟时间，提示音，重复的频率，以及您是否希望使用“贪睡”选项来延迟它们。如果您想关闭已设置的闹钟，以下帖子应该可以帮助您禁用和删除iPhone上的常规闹钟和唤醒闹钟。如何在iPhone上关闭常规闹钟默认情况下，当您在时钟应用程序上添加闹钟或要求Siri为您添加闹钟时，您实际上是在创建常规闹钟。您可以在iPhone上创建任意数量的闹钟，并且可以将它们

h5是指什么 Aug 02, 2023 pm 01:52 PM

H5是指HTML5，是HTML的最新版本，H5是一个功能强大的标记语言，为开发者提供了更多的选择和创造空间，它的出现推动了Web技术的发展，使得网页的交互和效果更加出色，随着H5技术的逐渐成熟和普及，相信它将会在互联网的世界中发挥越来越重要的作用。

如何区分H5,WEB前端,大前端,WEB全栈? Aug 03, 2022 pm 04:00 PM

本文带你快速区分H5、WEB前端、大前端、WEB全栈，希望对需要的朋友有所帮助！

iOS 17中如何自定义待机颜色 Sep 23, 2023 pm 12:53 PM

Apple在iOS17中提供了一种新的锁屏模式，称为待机模式，当您的iPhone插入充电器（有线或无线）并以横向方向放置在支架上时，该模式会激活。此模式将通过显示时钟、天气数据、日历和一些小部件，一目了然地显示比标准锁定屏幕更多的信息。在设置中启用此功能后，当您的iPhone在充电时横向放置时，它将自动进入待机模式。如何在iOS17中更改待机颜色待机模式提供了一组三个页面（小部件、照片和时钟），您可以通过在屏幕上滑动来回切换。在这些页面中，只有“时钟”屏幕可让您自定义屏幕上显示的颜色，以便您可以

win10电脑时钟总是不准确怎么办_调整win10电脑时间的几种方法 Mar 27, 2024 pm 05:10 PM

1、首先点击开始菜单，选择开始菜单里的设置按钮。2、打开后选择时间与语言设置。3、把它换成自动设置时间。4、你也可以把自动设置时间关掉，选择自己更改的时间。方法二：1、打开【其他日期、时间和区域设置】选项。2、选择【设置时间和日期】。3、选择【Internet时间】，打开【更改设置选项】。4、勾选【与Internet时间服务器同步(S)】，点击【立即更新】，然后点击确定就可以了。

See all articles

Jquery+html5实现语音提醒的时钟效果

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题