jQuery数字时钟插件MyDigitClock特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery数字时钟插件MyDigitClock特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery数字时钟插件MyDigitClock</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.MyDigitclock.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(function(){
	$("#clock1").MyDigitClock();

	$("#clock2").MyDigitClock({
		fontSize:50, 
		fontFamily:"Century gothic", 
		fontColor: "#000", 
		fontWeight:"bold", 
		bAmPm:true,
		background:'#fff',
		bShowHeartBeat:true
		});
		
	$("#clock3").MyDigitClock({
		fontSize:150, 
		fontColor:"grey",
		background:"#fff",
		fontWeight:"bold",
		timeFormat: '{HH}:{MM}'}
	);
});
});
</script>
</head>

<body>
<center>
<div id="clock1"></div>
<div id="clock2"></div>
<div id="clock3"></div>
</center>
</body>
</html>

JS代码(jquery.MyDigitClock.js):

/** * * Version 0.5 * */
(function($){
	var _options ={
}
;
	var _container ={
}
;
	jQuery.fn.MyDigitClock = function(options){
	var id = $(this).get(0).id;
	_options[id] = $.extend({
}
,$.fn.MyDigitClock.defaults,options);
	return this.each(function(){
	_container[id] = $(this);
	showClock(id);
}
);
	function showClock(id){
	var d = new Date;
	var h = d.getHours();
	var m = d.getMinutes();
	var s = d.getSeconds();
	var ampm = "";
	if (_options[id].bAmPm){
	if (h>12){
	h = h-12;
	ampm = " PM";
}
else{
	ampm = " AM";
}
}
var templateStr = _options[id].timeFormat + ampm;
	templateStr = templateStr.replace("{
	HH}
",getDD(h));
	templateStr = templateStr.replace("{
	MM}
",getDD(m));
	templateStr = templateStr.replace("{
	SS}
",getDD(s));
	var obj = $("#"+id);
	obj.css("fontSize",_options[id].fontSize);
	obj.css("fontFamily",_options[id].fontFamily);
	obj.css("color",_options[id].fontColor);
	obj.css("background",_options[id].background);
	obj.css("fontWeight",_options[id].fontWeight);
	//change readingobj.html(templateStr)//toggle handsif (_options[id].bShowHeartBeat){
	obj.find("#ch1").fadeTo(800,0.1);
	obj.find("#ch2").fadeTo(800,0.1);
}
setTimeout(function(){
	showClock(id)}
,1000);
}
function getDD(num){
	return (num>=10)?num:"0"+num;
}
function refreshClock(){
	setupClock();
}
}
//default valuesjQuery.fn.MyDigitClock.defaults ={
	fontSize:'50px',fontFamily:'Microsoft JhengHei,Century gothic,Arial',fontColor:'#ff2200',fontWeight:'bold',background:'#fff',timeFormat:'{
	HH}
<span id="ch1">:</span>{
	MM}
<span id="ch2">:</span>{
	SS}
',bShowHeartBeat:false,bAmPm:false}
;
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)