js实现某年某月某天距离现在有多少天,多少分,多少秒,动态显示!

本文介绍了一个使用jQuery和自定义JavaScript实现的时间差动态显示方法,能够实时更新并展示给定日期与当前时间之间的天数、小时数、分钟数及秒数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简单描述一下问题:给定一个年月日时分秒,在网页中动态显示,距离今天已经有多少天,多少小时,多少分钟,多少秒.

1.用到的这些jQuery和jscex文件都可以从网上下载,这里不再赘述
<script src=" jquery-1.11.1.min.js "></script>
<script type="text/javascript" src="jscex.min.js"></script>
<script type="text/javascript" src="jscex-parser.js"></script>
<script type="text/javascript" src="jscex-jit.js"></script>
<script type="text/javascript" src="jscex-builderbase.min.js"></script>
<script type="text/javascript" src="jscex-async.min.js"></script>
<script type="text/javascript" src="jscex-async-powerpack.min.js"></script>
2.这里还要引用一个.js文件,是自己写的,方便操作
<script type="text/javascript" src="functions.js" charset="utf-8"></script>
具体的内容如下:
var $win = $(window);
var clientWidth = $win.width();
var clientHeight = $win.height();

$(window).resize(function() {
    var newWidth = $win.width();
    var newHeight = $win.height();
    if (newWidth != clientWidth && newHeight != clientHeight) {
        location.replace(location);
    }
});

(function($) {
	$.fn.typewriter = function() {
		this.each(function() {
			var $ele = $(this), str = $ele.html(), progress = 0;
			$ele.html('');
			var timer = setInterval(function() {
				var current = str.substr(progress, 1);
				if (current == '<') {
					progress = str.indexOf('>', progress) + 1;
				} else {
					progress++;
				}
				$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
				if (progress >= str.length) {
					clearInterval(timer);
				}
			}, 75);
		});
		return this;
	};
})(jQuery);

function timeElapse(date){
	var current = Date();
	var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
	var days = Math.floor(seconds / (3600 * 24));
	seconds = seconds % (3600 * 24);
	var hours = Math.floor(seconds / 3600);
	if (hours < 10) {
		hours = "0" + hours;
	}
	seconds = seconds % 3600;
	var minutes = Math.floor(seconds / 60);
	if (minutes < 10) {
		minutes = "0" + minutes;
	}
	seconds = seconds % 60;
	if (seconds < 10) {
		seconds = "0" + seconds;
	}
	var result = "第 <span class=\"digit\">" + days + "</span> 天 <span class=\"digit\">" + hours + "</span> 小时 <span class=\"digit\">" + minutes + "</span> 分钟 <span class=\"digit\">" + seconds + "</span> 秒"; 
	$("#clock").html(result);
}


3.不多说了,直接上完整代码,代码上有注释
<body>
    <div id="clock-box"> <span></span><font color="#33CC00">我们</font> <span>已经是……</span>
      <div id="clock"></div>
    </div>
 </body>
 <script src=" jquery-1.11.1.min.js "></script>
 <script type="text/javascript" src="jscex.min.js"></script>
 <script type="text/javascript" src="jscex-parser.js"></script>
 <script type="text/javascript" src="jscex-jit.js"></script>
 <script type="text/javascript" src="jscex-builderbase.min.js"></script>
 <script type="text/javascript" src="jscex-async.min.js"></script>
 <script type="text/javascript" src="jscex-async-powerpack.min.js"></script>
 <script type="text/javascript" src="functions.js" charset="utf-8"></script>
	<script>
		var textAnimate = eval(Jscex.compile("async", function () 
		{
		    var together = new Date();
		    together.setFullYear(2014,10, 15); 			//时间年月日,注意月份是0-11
		    together.setHours(0);						//小时	
		    together.setMinutes(0);						//分钟
		    together.setSeconds(0);						//秒前一位
		    together.setMilliseconds(0);				//秒第二位
            $("#clock-box").fadeIn(500);
            while (true) {
                timeElapse(together);
                $await(Jscex.Async.sleep(1000));
            }
		}));

		textAnimate().start();
		
	</script>


4.希望大家有什么不懂得,可以直接查官方文档,穿"一手鞋"。
快乐学习,快乐编程!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值