欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

数据分析疫情图——day2

程序员文章站 2022-06-22 17:00:42
数据分析疫情图一. css修改样式创建css文件编写代码二. js设置时间前言好好学习，javaweb制作全国疫情展示,以下是今天学习的知识第一天：数据分析疫情图——day1一. css修改样式效果图创建css文件编写代码/*标签名选择器 */body{margin:0;/* 外边距：控制盒子和盒子之间的距离 *//*background-color：设置背景颜色*/background-color:#333333;}/*2、ID选择器：通过标签上的id...

数据分析疫情图

前言

好好学习，javaweb制作全国疫情展示,以下是今天学习的知识

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

数据分析疫情图——day2

一. css修改样式

效果图
数据分析疫情图——day2

创建css文件

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

编写代码

/*标签名选择器  */
body{
	margin:0;/* 外边距：控制盒子和盒子之间的距离 */
	/*background-color：设置背景颜色*/
	background-color:#333333;
}

/*2、ID选择器：
通过标签上的id属性，可以为标签设置唯一的标识符。
可以通过ID的值来选定指定的元素。格式：#id值{css属性.}
*/

#title{
/*absolute：绝对定位的元素的位置相对于最近的已定位的父元素，如果元素没有已定位的父元素，那么他的位置就是相对于<html>标签。
*/
	position:absolute;
	width:40%;
	height:10%;
	top:0;/*控制距离顶部的位置*/
	left:30%;/*控制距离左边的位置*/
	/*设置字体的大小*/
	font-size:35px;
	color:white;
/*弹性布局：CSS3中新引入的一个布局模式。
元素如何在页面中进行排列展示，不同的屏幕尺寸和设备可以预测的展示出来。
*/
	display:flex;
	align-items:center;/*交叉轴的中点对齐*/
	justify-content:center;/*居中*/
}

/*3、class选择器
通过标签上通用的属性Class，可以为标签去指定所属的类/组，所有的class值相同的元素则就是一类/组，可以通过Class属性的值去选择这一组的标签，为这一组标签去统一设置样式
基本格式：.类名{css属性}
*/
.china_title{
	 border-bottom:3px solid #10AEB5;/*边框底部  */
	 padding-bottom:4px;/* 内边距 */
}

.world_title{
	font-size:26px;
	color:grey;
	/*text-decoration：设置文本的卜划线，一股常用的取值：none：没有下划线
		underline：有下划线
	*/
	text-decoration:none;
	
}

.world_title:hover{
	color: white;
	border-bottom:3px solid #10AEB5;/*边框底部  */
	padding-bottom: 5px;
}
/*time：绝对定位：高度：10%距离顶部：5%
右边：2%
颜色：白色
字体大小：20px；
*/
#time{
	position: absolute;
	height:10%;
	top:5%;
	color: white;
	font-size: 20px;
	right: 2%;
}


/*mid1的位置*/
#mid1{
	position:absolute;
	width:40%;
	height:25%;
	top:10%;
	left:30%;
	color:white;
}
.font{
	
	width:25%;
	float:left;
	color:#ffd700;
	display:flex;
	align-items:center;/*交叉轴的中点对齐*/
	justify-content:center;/*居中*/
}
.txt{
	
	width:25%;
	float:left;
	display:flex;
	align-items:center;/*交叉轴的中点对齐*/
	justify-content:center;/*居中*/
	font-familly:"幼圆";
}
#left1{
	position: absolute;
 	width: 30%; 
 	height: 45%; 
 	top: 10%; 
 	left: 0;
}
#left2{
	position: absolute; 
	width: 30%; 
	height: 45%; 
	top: 55%; 
	left: 0;
}
#mid2{
	position:absolute;
	width:40%;
	height:50%;
	top:35%;
	left:30%;
}
#right1{
	position: absolute;
 	width: 30%; 
	height: 45%; 
 	top: 10%; 
 	right: 0;
}

#right2{
	position: absolute;
 	width: 30%; 
	height: 45%; 
 	top: 55%; 
 	right: 0;
}
footer{
	position:absolute;
	width:40%;
	height:10%;
	top:90%;/*控制距离顶部的位置*/
	left:30%;/*控制距离左边的位置*/
	/*设置字体的大小*/
	text-align:center;/*text-align：需用的取值left：默认 1
right center justify：两端对齐
*/
	font-size:10px;
	display:flex;
	align-items:center;/*交叉轴的中点对齐*/
	justify-content:center;/*居中*/
}

HTML
如下样式定义框

<div id="title">
<span class="china_title">

数据分析疫情图——day2

二. js设置时间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onload="window.setInterval(gettime,1000)">
	<div id="cntime">
	</div>
</body>
<!-- window.setInterval（gettime，1000）
javascript提供了window对象，有个setInterval方法，可以定时的加载某一个方法方法中的参数有两个：第一个参数代表的是要调用的方法名
第二个参数代表的是时间的间隔的毫秒数（1秒=1000毫秒） -->

<script type="text/javascript">

	function gettime(){
		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();//秒
		/*返回对拥有指定id的第一个对象的引用*/
		document.getElementById('cntime').innerHTML = year +'年'+ 
		month +'月'+ day +'日'+ hour +'时'+ minute +'分'+ second +'秒';
	}
</script>
</html>

数据分析疫情图——day2

本人博客：https://blog.csdn.net/weixin_46654114
本人b站求关注：https://space.bilibili.com/391105864
转载说明：跟我说明，务必注明来源，附带本人博客连接。

请给我点个赞鼓励我吧
数据分析疫情图——day2

本文地址：https://blog.csdn.net/weixin_46654114/article/details/112507367

相关标签： 数据分析疫情 html javascript css

上一篇： 浅析Python自带性能强悍的标准库itertools

下一篇： Vue项目echarts的封装加mock模拟数据案例

推荐阅读