实操：利用日期对象和方法以及其他相关知识实现简单的钟表功能

**
js学习中的小实操
**
实现类似于钟表功能的一个页面，包括年月日时分秒，和系统时间一致，秒数每一秒都会改变，背景颜色为黑色，字体颜色为白色。

那么下面写一下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
		//设置背景颜色为黑色
			body{
				background: #000000;				
				}
				
		//设置时间以及点的颜色为白色，还有大小
			#hour,#minute,#second,#a,#year,#month,#day{
				color: #FFFFFF;
				font-size: 100px;
			}
			
		</style>
	</head>


	<body>
	//这里是我们的盒子分别装着我们的年月日还有时间
		<span >00</span>
		<span id="year">0</span>
		<span id="a">年</span>
		<span id="month">0</span>
		<span id="a">月</span>
		<span id="day">0</span>
		<span id="a">日</span>
		
		<span id="hour">00</span>
		<span id="a">:</span>
		<span id="minute">00</span>
		<span id="a">:</span>
		<span id="second">00</span>
		
		<script>
		
		//用document.getEIementById来获取这个控件对象
			var year=document.getElementById("year");
				month=document.getElementById("month");
				day=document.getElementById("day");
			    hour=document.getElementById("hour");
			    minute=document.getElementById("minute");
				second=document.getElementById("second");

 			//创建函数，改变盒子里的数据			
			function fn(){
				var date=new Date();
				
				year.innerHTML=date.getFullYear();
				month.innerHTML=date.getMonth();
				day.innerHTML=date.getDate();
				hour.innerHTML=sw(date.getHours());
				minute.innerHTML=sw(date.getMinutes());
				second.innerHTML=sw(date.getSeconds());			
			}	
			
			fn();
			//添加一个定时器，每隔1000毫秒执行一次上面我们创建的函数，也就是秒针每一秒都会动
			
			 setInterval(
			
			   function(){
					fn();					
				},1000)
			
			
			//因为当时分秒为个位数的时候要显示为01、02这样，所以我们再创建一个函数 用if来做判断。
			//为单个数的时候就在前面加上一个0			
			function sw(time){
				
				if(time<10){
					return "0"+time;
				}else{
					return time;
				}
			}
			
			/*因为我们的定时器是每隔一秒除法一次，意味着当我们执行成功之后，要等一秒之后，该效果时间才会出现 
			所以我们应该直接先执行一次上面的fn（）函数*/
				fn();
							
		</script>	
	</body>
</html>

执行结果：
在这里插入图片描述
那么这便是成功了。
**

实操：利用日期对象和方法以及其他相关知识实现简单的钟表功能

猜你喜欢