js第十节-日期对象，网页时钟，倒计时

最新推荐文章于 2023-11-05 11:41:52 发布

梦想创业俱乐部

最新推荐文章于 2023-11-05 11:41:52 发布

阅读量905

点赞数 2

分类专栏： javascript 文章标签： javascript 梦想创业俱乐部前端js学习日期对象网页时钟倒计时妙味课堂js视频

本文链接：https://blog.csdn.net/chenminglvming/article/details/51100679

版权

javascript 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

js第十节-日期对象，网页时钟，倒计时

1.记忆的东西
var myTime = new Date();
myTime.getFullYear();
var iMonth = myTime.getMonth()+1;
var iDate = myTime.getDate();
var iWeek = myTime.getDay();
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();

var iNew = new Date( 2013, 10, 27, 21,56,0 );
var iNew = new Date( 'November 27,2013 22:3:0' );

var str = Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时'+Math.floor(t%86400%3600/60)+'分'+t%60+'秒';

// 天：Math.floor(t/86400)
// 时：Math.floor(t%86400/3600)
// 分：Math.floor(t%86400%3600/60)
// 秒：t%60

// 数字形式：new Date( 2013,4,1,9,48,12 );
// 字符串形式：new Date('June 10,2013 12:12:12');

// January、February、March、April、May、June、
// July、August、September、October、November、December

2.时间扩展版

<span style="font-size:18px;"><!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=gb2312" />
<title>时间扩展版</title>
<script>
window.onload = function(){
	var oP = document.getElementsByTagName('p');
	var oNum0 = document.getElementById('num0');
	var oNum1 = document.getElementById('num1');
	var oNum2 = document.getElementById('num2');
	var oNum3 = document.getElementById('num3');
	var oNum4 = document.getElementById('num4');
	var oNum5 = document.getElementById('num5');
	var oMao1 = document.getElementById('mao1');
	var oMao2 = document.getElementById('mao2');
    oMao1.onOff = true;
	oMao2.onOff = true;
	
	
	var timer =setInterval(function(){
		var myTime = new Date();
		var iHour = myTime.getHours();
	    var iMin = myTime.getMinutes();
	    var iSeconds = myTime.getSeconds();
		var str = '';
		
	   oP[0].innerHTML = trans(iHour) +'小时' + trans(iMin) + '分' + trans(iSeconds) + '秒';
	   	SIhour = trans(iHour) + str;
		SIMin = trans(iMin) + str;
		SIseconds = trans(iSeconds)+ str;
		
		oNum0.src ='img/'+ SIhour.charAt(0) + '.jpg';
		oNum1.src = 'img/'+ SIhour.charAt(1) + '.jpg';
		oNum2.src = 'img/'+ SIMin.charAt(0) + '.jpg';
		oNum3.src = 'img/'+ SIMin.charAt(1) + '.jpg';
		oNum4.src = 'img/'+ SIseconds.charAt(0) + '.jpg';
		oNum5.src = 'img/'+ SIseconds.charAt(1) + '.jpg';
		if(oMao1.onOff){
			oMao1.src= 'img/colon1.JPG';
			oMao2.src= 'img/colon1.JPG';
			oMao1.onOff = false;
		    oMao2.onOff = false;
		}else{
			oMao1.src= 'img/colon.JPG';
			oMao2.src= 'img/colon.JPG';
			oMao1.onOff = true;
		    oMao2.onOff = true;
		}
		
	   
	},1000);

   	
	function trans(n){
		if(n < 10){
			n = '0' + n; 
		}else{
			n = '' + n;
		}
		return n;
	};	
	
	
};
</script>
</head>

<body>
<p>文本时间：</p>
<img src='img/0.JPG' id='num0' />
<img src='img/0.JPG' id='num1' />
<img src='img/colon.JPG' id='mao1' />
<img src='img/0.JPG' id='num2' />
<img src='img/0.JPG' id='num3' />
<img src='img/colon.JPG'/ id='mao2'>
<img src='img/0.JPG' id='num4' />
<img src='img/0.JPG' id='num5' />
</body>
</html></span>

陈明吕老师这一节没有过多的叙述，希望各位初学者一定要加强练习，才能打牢基础。下一节讲解的内容是字符串方法，谢谢大家。

梦想创业俱乐部

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js第十节-日期对象，网页时钟，倒计时

js第十节-日期对象，网页时钟，倒计时1.记忆的东西var myTime = new Date();myTime.getFullYear();var iMonth = myTime.getMonth()+1;var iDate = myTime.getDate();var iWeek = myTime.getDay();var iHours = myTime.getHo
复制链接

扫一扫