首页 > 代码修改 > 数字时钟代码
2012
08-27

数字时钟代码

今天小编从网友的模版中找到了一个数字时钟的代码,在此共享出来,供大家参详!

数字时钟代码 - 第1张  | 心岛博客

本代码目前仅适用于于点点网核心的博客!

一、html代码部分,如下所示:

<!---钟表-->
		<div id="countdown">
						<div id="defaultCountdown"><span class="countdown_section"><span class="countdown_amount">27</span><br>August</span><span class="countdown_section"><span class="countdown_amount">14</span><br>Hour</span><span class="countdown_section"><span class="countdown_amount">10</span><br>Minute</span><span class="countdown_section"><span class="countdown_amount">43</span><br>Second</span></div>
					</div>
		<!---钟表end--> 

二、js代码部分,如下所示:

<script type="text/javascript">
		 /* <![CDATA[  */		 
		var J = jQuery.noConflict();
		J(document).ready(function(){		
		    J('blockquote img').each(function() {
				var maxWidth = 595; // 图片最大宽度
				var maxHeight = 400;    // 图片最大高度
				var ratio = 0;  // 缩放比例
				var width = J(this).width();    // 图片实际宽度
				var height = J(this).height();  // 图片实际高度
			
				// 检查图片是否超宽
				ratio = maxWidth / width;   // 计算缩放比例
				J(this).css("width", maxWidth); // 设定实际显示宽度
				height = height * ratio;    // 计算等比例缩放后的高度
				J(this).css("height", height);  // 设定等比例缩放后的高度
			});
		    J('.logo-img img').each(function() {
				var maxWidth = 222; // 图片最大宽度
				var maxHeight = 50;    // 图片最大高度
				var ratio = 0;  // 缩放比例
				var width = J(this).width();    // 图片实际宽度
				var height = J(this).height();  // 图片实际高度			
				// 检查图片是否超宽
				if (width > maxWidth)
				{
					ratio = maxWidth / width;   // 计算缩放比例
					J(this).css("width", maxWidth); // 设定实际显示宽度
					height = height * ratio;    // 计算等比例缩放后的高度
					J(this).css("height", height);  // 设定等比例缩放后的高度
				}
			});
			
			J(function () {
				setInterval(
					function() {
						var date= new Date();
						var aMonth	= new Array("January","February","March","April","May","June","July","August","September","October","November","December")
						var days = date.getDate();
						var months = date.getMonth();
						var seconds = date.getSeconds();
						var minutes = date.getMinutes();
						var hours = date.getHours();
						printTime(days,aMonth[months],hours,minutes,seconds);
					}, 1000
				);
				function printTime(days,months,hours,minutes,seconds){
					var inner = '';
					inner +='<span class="countdown_section"><span class="countdown_amount">'+days+'</span><br>'+months+'</span>';
					inner +='<span class="countdown_section"><span class="countdown_amount">'+hours+'</span><br>Hour</span>';
					inner +='<span class="countdown_section"><span class="countdown_amount">'+minutes+'</span><br>Minute</span>';
					inner +='<span class="countdown_section"><span class="countdown_amount">'+seconds+'</span><br>Second</span>';
					J('#defaultCountdown').html(inner);
				}
			});
			
			J('div.box').fadeIn(150);
		});
		/* ]]> */  
	</script>

三、CSS代码:

	<style type="text/css">
<!--
		#countdown {display:block;
width:246px;height:80px;
    
}
.countdown_section {
width:46px;
    color: #AAAAAA;
    float: left;
    font-size: 10px;
    margin: 0 12px 0 0;
    text-align: center;
}
.countdown_section br {
    clear: both;
}
.countdown_amount {
    background: -moz-linear-gradient(center top , #F7F7F7 0%, #F7F7F7 50%, #F2F2F2 50%, #F9F9F9 100%) repeat scroll 0 0 transparent;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.08) inset;
    color: #888888;
    float: left;
    font-family: 'Terminal Dosis',"Helvetica Neue",'Microsoft YaHei',Helvetica,Arial,sans-serif;
    font-size: 32px;
    font-weight: 200;
    letter-spacing: -1px;
    padding: 9px 9px;
    text-align: center;
    text-shadow: 1px 1px #F3F3F3;
    width: 36px;
}
-->
    </style>

使用方法:首先将html代码放在点点博客的适当位置,然后将第二部分的js代码放置于网页最后</body>标签之前,最后将css代码放置与<head></head>标签之间即可!

演示网址:时尚59588

最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。