数据分析疫情图——day3

迷南。 2022-11-19 12:43 145阅读 0赞

前言

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][20210113182324352.png]

定义一个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文件  
![在这里插入图片描述][20210113183828598.png]

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>

<script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]

[day1]: https://chenyunzhi.blog.csdn.net/article/details/112481162
[day2]: https://chenyunzhi.blog.csdn.net/article/details/112507367
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70]: /images/20221119/0d00070fd0d849da99fa2823268237ec.png
[20210113182324352.png]: https://img-blog.csdnimg.cn/20210113182324352.png
[20210113183828598.png]: https://img-blog.csdnimg.cn/20210113183828598.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210113182445529.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjY1NDExNA==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关数据分析疫情图——OVER

数据分析疫情图——day10 一. 最终效果二. 结束&&感想十天的学习我&&老师 > 今天是

àì夳堔傛蜴生んèń/ 2023年01月10日 03:43/ 0 赞/ 98 阅读

相关数据分析疫情图——day9

数据分析疫情图——day9 一. 写入数据库二.Tomcat的安装和使用 2.1 安装 2.2 使用

╰+哭是因爲堅強的太久メ/ 2023年01月09日 14:22/ 0 赞/ 88 阅读

相关数据分析疫情图——day8

数据分析疫情图——day8 一.获取数据，数据解析二.数据库连接前言 > 好好学习，javaweb制作全国疫情展示,接下来要用ja

灰太狼/ 2023年01月09日 03:43/ 0 赞/ 92 阅读

相关数据分析疫情图——day7

数据分析疫情图——day7 一. 异常二 . 集合API 三. Map接口四.简单爬取页面数据前言

素颜马尾好姑娘i/ 2023年01月08日 09:27/ 0 赞/ 99 阅读

相关数据分析疫情图——day6

java练习一. java基础二. 正则三. 时间转换前言 > 好好学习，javaweb制作全国疫情展示,接下来

妖狐艹你老母/ 2023年01月08日 02:24/ 0 赞/ 149 阅读

相关数据分析疫情图——day5

数据分析疫情图制作饼图制作留言墙制作地图前言 > 好好学习，javaweb制作全国疫情展示,以下是今天学习的知识，今天

Bertha 。/ 2023年01月07日 04:59/ 0 赞/ 91 阅读

相关数据分析疫情图——day4

数据分析疫情图 jquery做时间绘图前言 > 好好学习，javaweb制作全国疫情展示,以下是今天学习的知识，今天学了jquery制作

川长思鸟来/ 2023年01月06日 12:56/ 0 赞/ 190 阅读

相关数据分析疫情图——day2

数据分析疫情图一. css修改样式创建css文件编写代码二. js设置时间前言 > 好好

柔情只为你懂/ 2023年01月05日 12:11/ 0 赞/ 147 阅读

相关数据分析疫情图——day1

数据分析疫情一. 创建javaweb项目二.前端练习 1.导入视频 2. 获取二维码

- 日理万妓/ 2023年01月05日 05:11/ 0 赞/ 96 阅读

相关数据分析疫情图——day3

前言 > 好好学习，javaweb制作全国疫情展示,以下是今天学习的知识，今天学了js制作时间导入到HTML中第一天：[数据分析疫情图——day1][day1] 第二

迷南。/ 2022年11月19日 12:43/ 0 赞/ 146 阅读