1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

js倒计时效果代码 打折促销示例

1、js倒计时效果

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<script type="text/javascript">      			window.onload = function(){          //			倒计时函数      			function djs(){      			//			创建当前时间      			var now_time = new Date();      //			创建未来时间      			var fur_time = new Date(2019,0,22,10,0,0);      //			思路:计算差几天--分别获得上面的两个时间,用1970年1月1日做参考点他们的时间差,然后一减就获得它们两个的相差的毫秒数,然后毫秒数换算成天,小时,分钟,秒      //			计算两个日期之间的时间差      			var dd = fur_time.getTime() - now_time.getTime();      //			先算天数 dd除以一天的86400000毫秒(一天24小时,一小时60分钟,一分钟60秒,1秒钟1000毫秒)      //			var tian = dd/(86400000);      //			用公式写      parseInt() 解析一个字符串,并返回一个整数,这里可以简单理解成返回舍去参数的小数部分后的整数。      			var tian = parseInt(dd/(24*60*60*1000));      //			算小时    第一种方法就是,时间差减去天数转成的毫秒数,等于不够一天的数      //			 dd - tian*24*60*60*1000;      //			第二种方法就是取余      //			取余   获得计算完天数后剩余的毫秒数      			dd = dd%(24*60*60*1000);      //			也可以这样写       获得计算完天数后剩余的毫秒数      //			var tt = dd%(24*60*60*1000);      //			计算小时  也要取个整        parseInt() 函数可解析一个字符串,并返回一个整数      			var xiaoshi = parseInt(dd/(60*60*1000));      //			取余  获得计算完小时后还剩余的毫秒数      			dd= dd%(60*60*1000);      //			计算分钟      			var fenzhong = parseInt(dd/(60*1000));      //			获得计算完分钟后剩余的毫秒数      			dd = dd%(60*1000);      //			计算秒      			var miao = parseInt(dd/1000);      //			document.write("距离百家惠全场打折活动还剩"+tian+'天'+xiaoshi+'小时'+fenzhong+'分钟'+miao+'秒')      //			抓标签      			var kk = document.getElementById('time').getElementsByTagName('span');      			kk[0].innerHTML = tian;      			kk[1].innerHTML = xiaoshi;      			kk[2].innerHTML = fenzhong;      			kk[3].innerHTML = miao;				        			}	        //			手动执行一次倒计时,因为每次刷新有一秒钟页面是回到原位开始的,手动执行一次补上那一秒钟      			djs();      //			写一个定时器用来倒计时的      			setInterval(djs,1000);      		}	      		</script>      	</head>      	<body>      		<div id="time">距离百家惠全场打折活动还剩<span>0</span>天<span>0</span>小时<span>0</span>分钟<span>0</span>秒</div>      	</body>      </html>

上面代码效果图片:

原文链接:https://www.qiquanji.com/post/7688.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: