A5下载文章资讯

分类分类

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

2015-08-25 15:44作者:yezheng

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

展开全部

相关

说两句网友评论
    我要跟贴
    取消