数据分析疫情图——day3

前言

好好学习，javaweb制作全国疫情展示,以下是今天学习的知识，今天学了js制作时间导入到HTML中

第一天：数据分析疫情图——day1
第二天：数据分析疫情图——day2

定义一个main.js文件

function getTime(){
		var time = document.getElementById('Time');
		//简单使用，后期会学习jQuery封装，Vue封装
		var date = new Date();
		var year = date.getFullYear();//年
		var month = date.getMonth()+1;//从0开始的
		var day = date.getDate();//日
		var week = date.getDay();//周
		var hour = date.getHours();//小时
		var minute = date.getMinutes();//分钟
		var second = date.getSeconds();//秒
		switch (week) {
		case 1: week="星期一"; break;
		case 2: week="星期二"; break;
		case 3: week="星期三"; break;
		case 4: week="星期四"; break;
		case 5: week="星期五"; break;
		case 6: week="星期六"; break;
		case 7: week="星期日"; break;
		}
		/*返回对拥有指定id的第一个对象的引用*/
		time.innerHTML = year +'年'+ 
		month +'月'+day +'日'+ week+' '+ hour +':'+changeNum( minute )+':'+ changeNum(second )+'秒';
}

function changeNum(num){
	if (num < 10) {
		return '0' + num;//1 2
	}else{
		return num;
	}
}
getTime();
setInterval(getTime,1000);//每执行一秒就调用

也可以用jqure实现
导入两个js文件

function getTime() {

/* 	//document 对象：代表整个HTML文档，可以用来访问页面中的所有元素

	var time= document.getElementById('Time');
	//简单使用，后期会用jQuery封装 */



	var now = new Date();
	var year = now.getFullYear();
	var month = now.getMonth() + 1;
	var day = now.getDate();
	var week = now.getDay();//0,1,2,3,4,5,6
	var hour = now.getHours();
	var minute = now.getMinutes();
	var second = now.getSeconds();
	switch (week){
		case 1: week="星期一"; break;
		case 2: week="星期二"; break;
		case 3: week="星期三"; break;
		case 4: week="星期四"; break;
		case 5: week="星期五"; break;
		case 6: week="星期六"; break;
		case 7: week="星期日"; break;
	}
	
	content = `${year}年${changeNum(month)}月${changeNum(day)}日   ${week} ${hour}: ${minute} :  ${second} `;
	
	$('#Time').text(content);
}

function changeNum(num){
	if (num < 10) {
		return '0' + num;//1 2
	}else{
		return num;
	}
}

getTime();
setInterval(getTime,1000);

main.html

<!-- 时间显示：当前的系统时间 -->
	<div id="time">
		<span id="Time"></span>
	</div>

<!-- 引入外部js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

效果图