时钟Jquery+html5特效代码分享（可设置闹钟并且语音提醒）

本文实例讲述了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超逼真的时钟特效，希望大家可以喜欢。

赞 (0)

相关推荐

  • Android闹钟设置的解决方案

    Android闹钟设置的解决方案

    Android设置闹钟并不像IOS那样这么简单,做过Android设置闹钟的开发者都知道里面的坑有多深.下面记录一下,我解决Android闹钟设置的解决方案. 主要问题 1.API19开始AlarmManager的机制修改. 2.应用程序被Kill掉后,设置的闹钟不响. 3.6.0以上进入Doze模式会使JobScheduler停止工作. 4.手机设置重启后,闹钟失效问题. API19以上AlarmManager机制的修改 API19之前AlarmManager提供了三个设置闹钟的方法,由于业务

  • Android手机闹钟服务AlarmManagerk开发案例

    Android手机闹钟服务AlarmManagerk开发案例

    AlarmManager通常用来开发手机闹钟,并且它是一个全局定时器,可在指定时间或指定周期启动其他组件(包括Activity,Service,BroadcastReceiver) 获取AlarmManager对象: getSystemService(Service.ALARM_SERVICE) 调用其中的方式设置定时器启动指定组件: set(int type,long triggerAtTime,PendingIntent operation)设置在TriggerAtTime时间启动由oper

  • C#实现闹钟AlarmClock实例代码

    本文所述是一个小巧且功能简单的C#闹钟程序代码AlarmClock,程序涉及到了AxInterop.MSMask.dll与Interop.MSMask.dll两个控件,对编写时间闹钟或许有点参考价值. 完整实例代码如下: using System; using System.Drawing; using System.Collections; using System.ComponentModel; using System.Windows.Forms; using System.Data; n

  • 简单实现Android闹钟程序 附源码

    这个应用实现了简单的闹钟功能,关闭程序的状态中也可以进行闹钟的提醒. 这里遗留了一个问题: 如果我通过应用本身关闭程序,是可以实现我上述所说的功能,但是如果我在手机进程管理中实现应用程序的关闭操作,这个提醒就不起作用了,我很疑惑的是,我通过应用程序本身关闭了后,在进程中也是查看不到这个应用了的.所以哪位知道的帮留个言指点下,谢谢. ClockDemo.java package com.example.clock; import java.util.Calendar; import android

  • Android编程实现PendingIntent控制多个闹钟的方法

    本文实例讲述了Android编程实现PendingIntent控制多个闹钟的方法.分享给大家供大家参考,具体如下: 要用 android.app.PendingIntent.getBroadcast(Context context, int requestCode, Intent intent)来实现控制多个闹钟,关键点在于其中的一个参数requestCode. 举例说明如下: public void setClock(){ if(lva.ids.equals("")||lva.ids

  • 利用QT写一个极简单的图形化Python闹钟程序

    今天我们讲一下用Python写的GUI小程序.一个小闹钟(只是屏幕提示,没有声音哦) 让我们先介绍这个闹钟如何奇葩. 需要通过命令行启动. 没有标题栏. 没菜单. 甚至没有关闭按钮. 没有运行界面. 看到这里想必大家要问了,何必去做一个这样弱爆了的程序呢.显然,教育意义大于其实际用处. 像其他的模块一样,QT界面包是需要加载的. 我们用到了命令行输入,所以,sys模块也是必须的. 用到了时间,但是我们不需要使用time模块,我们用QT提供的QTime模块. 让我们先写import 语句部分. i

  • java开发之闹钟的实现代码

    java开发之闹钟的实现代码

    项目结构: 效果图一: 效果图二: 效果图三: 关于闹钟: 复制代码 代码如下: Alarm hongten v1.0 使用说明: 此文件夹中包括:             src文件夹       存放图片和声音文件夹,使用程序的时候,请不要删除此文件夹             alarm.jar    主要的功能程序jar包(要求安装jdk1.5或以上版本)             ReadMe.txt     说明文档 1.菜单功能说明 文件-- >               上传铃声(

  • C++实现闹钟程序的方法

    本文所述为C++实现闹钟程序的方法,代码结构相对简单,注释也较为完善.现分享给大家供大家参考. 具体功能代码如下: #include<iostream> #include<string> #include<ctime> using namespace std; //时间类 class Time{ private: int hour; int minute; int second; public: //设置时间 void set(int h,int m,int s){ h

  • C#使用timer实现的简单闹钟程序

    本文实例讲述了C#使用timer实现的简单闹钟程序.分享给大家供大家参考.具体如下: 当我在电脑上工作,我经常会被一些东西吸引,比如某宝,结果三个小时过去了我都完全没有注意到.所以我通过C#做了一个简单闹钟程序,这个小程序主要使用C# Timer对象,让用户设定一个倒计时的时长,如果时间到了,就播放一个wav音频文件(也就是闹铃). 我一直试图保持这个timer的简单性,但我还是添加了一些额外的功能,在状态栏中显示一个通知图标. 通过这个小应用你也可以了解到C#中timer定时器的一些简单用法.

  • Android手机闹钟用法实例

    Android手机闹钟用法实例

    本文实例讲述了Android手机闹钟用法.分享给大家供大家参考.具体如下: 一.开发手机闹钟主要用到了AlarmManager类,AlarmManager类提供了访问系统定时服务的途径,开发人员可以在程序中设置某个应用程序在未来的某个时刻被执行.当AlarmManager定时时间到了之后,当初注册的Intent对象将会被系统广播,进而启动目标程序. 二.在程序运行时当需要使用AlarmManager类时,可以通过Context对象的getSystemService(Context.ALARM_S

随机推荐