1.5 js基础

最新推荐文章于 2024-10-04 16:11:51 发布

我爱丁丁猫

最新推荐文章于 2024-10-04 16:11:51 发布

阅读量180

点赞数

分类专栏：前端文章标签： javascript基础

原文链接：https://www.mk2048.com/blog/blog.php?id=h1j2j10hjakj&title=1.5+js%E5%9F%BA%E7%A1%80

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

1、变量、参数、return可以装任何东西。

2、什么时候使用window.onload?

当操作元素时

3、 日期对象：在创建日期对象的时候它的日期是不会改变的。

获取日期

var oDate=new Date();

oDate.getFullYear();//获取年份

oDate.getMonth() 1;//获取月份

oDate.getDate();//获取天

oDate.getDay();//获取星期，星期日是0.

获取小时

oDate.getHours();//获取小时

oDate.getMinutes();//获取分钟

oDate.getSeconds();//获取秒数

获取时间戳

oDate.getTime();//1437459829777 时间戳。从1970年1月1日到现在经历的毫秒数。

设置年月日

oDate.setFullYear(年，月，日);

设置时分秒

oDate.setHours(h,m,s,ms);//时、分、秒、毫秒

4、

实例：倒计时
    1、获取目标的时间戳
    2、获取现在的时间戳
    3、获取时间戳的差值=目标-现在；用到定时器
<script>
	function toDouble(inum){
		return inum>10?'' inum:'0' inum;
	}
	window.onload=function(){
		var ospan=document.getElementsByTagName('span')[0];
		//获取目标时间戳
		var iTarget=new Date();
		iTarget.setFullYear(2015,9,1);
		iTarget.setHours(0,0,0,0);
		var iTartime=iTarget.getTime();
		//获取当前时间戳和目标事件戳的差值
		function countDown(){
			var oDate=new Date();
			var iTime=oDate.getTime();
			var s=parseInt((iTartime-iTime)/1000);
			var d=parseInt(s/86400);
			s%=86400;
			var h=parseInt(s/3600);
			s%=3600;
			var m=parseInt(s/60);
			s%=60;
			ospan.innerHTML=toDouble(d) '天' toDouble(h) '小时' toDouble(m) '分钟' toDouble(s) '秒';
		}
		//声明定时器获取当前时间戳
		countDown();
		setInterval(countDown,1000);
	};
</script>

5、时钟例子

实例：时钟
<script>
	window.onload=function(){
		function toDouble(inum){
			return inum>10?inum:'0' inum;
		}
		getNowTime();
		function getNowTime(){
			var oTime=document.getElementById('time');
			var oData=document.getElementById('date');
			var oWeek=document.getElementById('week');
			var oDate=new Date();
			var h=oDate.getHours();
			var m=oDate.getMinutes();
			var s=oDate.getSeconds();
			var y=oDate.getFullYear();
			var M=oDate.getMonth() 1;
			var d=oDate.getDate();
			var w=oDate.getDay();
			oTime.innerHTML=toDouble(h) ':' toDouble(m) ':' toDouble(s);
			oData.innerHTML=y '年' M '月' d '日';
			oWeek.innerHTML='星期' w;
		
		}
		var timer=null;
		clearInterval(timer);
		timer=setInterval(function(){
			getNowTime();
		},1000);
				
	}
</script>

6、　模拟时钟

模拟时钟2：
      步骤：1、分别获取时分秒然后拼成字符串
                2、字符串注意补0，所以要写一个补0的方法
                3、定时器封装获取时间。  
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
body{background:#000; color:#fff; font-size:70px; text-align:center;}
</style>
<script>
  window.onload=function(){
	var aImg=document.getElementsByTagName('img');
	function toDouble(inum){
	 	return inum>10?'' inum:'0' inum;
	}
	function getNowTime(){
		var oDate=new Date();
		var h=oDate.getHours();
		var m=oDate.getMinutes();
		var s=oDate.getSeconds();
		var num=toDouble(h) toDouble(m) toDouble(s);
		for(var i=0;i<aImg.length;i  ){
			aImg[i].src='img/'  num.charAt(i) '.png'
		}
	}
	getNowTime();
	setInterval(function(){getNowTime();},1000);
	  	
  }
</script>
</head>
<body>
<img src="img/0.png" />
<img src="img/0.png" />
<span>:</span>
<img src="img/0.png" />
<img src="img/0.png" />
<span>:</span>
<img src="img/0.png" />
<img src="img/0.png" />
</body>
</html>