JavaScript 案例学习笔记

1 输出Hello world

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello world</title>
		<script type="text/javascript">
			document.write("Hello world");
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

2 数据类型检测

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据类型检测</title>
		<script type="text/javascript">
			var count = 0.1;
			// 含有OK或确定的弹框 提示警告
			alert("类型："+ typeof(count));
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

3 浮点数精度问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮点数精度问题</title>
		<script type="text/javascript">
			var a = 0.1;
			var b = 0.2;
			if(a+b != 0.3){
				alert("0.1+0.2 != 0.3\n0.1+0.2 = "+ (a+b))
			}
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

4 用js改变h5的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用js改变h5的内容</title>
		<script type="text/jscript">
			function change(){
				var text = document.getElementById("para");
				text.innerHTML = "不，我要成为卷王";
			}
		</script>
		<style type="text/css">
			#div{
				width: 50%;
				height: 20%;
				margin: 0 auto;
				position: absolute;
				left: 40%;
			}
			#para{
				font-size: 20px;
				font-weight: bold;
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<p id="para">我不想学习，我想躺平&gt;_&lt;</p>
			<button type="button" onclick="change()">点一下试试</button>
		</div>
	</body>
</html>

点击前：
在这里插入图片描述
点击后：
在这里插入图片描述

5 函数的调用：开关灯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数的调用：开关灯</title>
		<script type="text/javascript">
			function change(){
				x = document.getElementById("light");
				if(x.src.match("on")){
					x.src = "pic_off.gif";
				}else{
					x.src = "pic_on.gif";
				}
			}
		</script>
		<style type="text/css">
			#outer{
				width: 50%;
				height: 20%;
				margin: 0 auto;
				position: absolute;
				left: 40%;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<img id="light" onclick="change()" src="pic_off.gif"  width="100" height="180"/>
			<p>点击灯泡可开灯或关灯</p>
		</div>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

6 登录验证界面（鸡肋版）

老师上课给的例子，看看就好，实际情况不会这样读取用户名与密码数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录验证</title>
		<script type="text/javascript">
			function check(){
				a = document.getElementById("username").value;
				b = document.getElementById("password").value;
				c = document.getElementById("Username").value;
				d = document.getElementById("Password").value;
				if(a != c){
					alert("用户名输入错误！");
				}else if(b != d){
					alert("密码输入错误！");
				}else{
					alert("登录成功！");
				}
			}
		</script>
		<style type="text/css">
			#login{
				width: 600px;
				height: 400px;
				position: fixed;
				left: 30%;
				background-image: url(background.jpg);
			}
		</style>
	</head>
	<body>
		<div id="login">
			<form>
				<table width="100%">
					<tr>
						<td style="text-align: right;" height="100px">
							<p><h4>用户名：</h4></p>
						</td>
						<td>
							<input type="text" name="username" id="username" 
							value="" size="" maxlength=""/>
							<input type="hidden" name="Username" id="Username" 
							value="admin" size="" maxlength=""/>
						</td>
					</tr>
					<tr>
						<td style="text-align: right;" height="100px">
							<p><h4>密码：</h4></p>
						</td>
						<td>
							<input type="password" name="password" id="password" 
							value="" size="" maxlength=""/>
							<input type="hidden" name="Password" id="Password" 
							value="123456" size="" maxlength=""/>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<input type="button" name="" id="" value="登录" onclick="check()"/>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

在这里插入图片描述

7 ECharts图表库

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）。

ECharts是商业级数据图表，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。

7.1 柱状图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>柱状图</title>
		<!-- 1、引入echarts图表库 -->
		<script type="text/javascript" src="echarts.min.js"></script>
	</head>
	<body>
		<!-- 2、设置容器以存放图表 -->
		<div id="container" style="width: 650px; height: 400px;">
			
		</div>
		<!-- 3、对图表进行配置 -->
		<script type="text/javascript">
			// 图表初始化
			var myChart = echarts.init(document.getElementById('container'));
			// 设置配置信息
			var option = {
				// 图表标题
				title:{
					text:'第一个图表示例：本周专注时长'
				},
				// 鼠标悬停效果
				tooltip:{
					trigger:'item',
					formatter:'{b} : {c}'+'小时',
				},
				// 图例
				legend:{
					data:['专注时长']
				},
				// 横纵坐标
				xAxis:{
					data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				},
				yAxis:{
					
				},
				// 柱子上显示的内容
				series:[{
					name:'专注时长',
					type:'bar',
					data:[10, 11, 12.5, 11, 12, 8, 9]
				}]
			};
			// 4、将图表放置在容器里
			myChart.setOption(option);
		</script>
	</body>
</html>

在这里插入图片描述

7.2 折线图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折线图</title>
		<!-- 1、引入echarts图表库 -->
		<script type="text/javascript" src="echarts.min.js"></script>
	</head>
	<body>
		<!-- 2、设置容器以存放图表 -->
		<div id="container" style="width: 800px; height: 400px;">
			
		</div>
		<!-- 3、对图表进行配置 -->
		<script type="text/javascript">
			// 图表初始化
			var myChart = echarts.init(document.getElementById('container'));
			var option = {
				// 图表标题
				title:{
					text:'第二个图表示例：本周专注时长趋势'
				},
				// 鼠标悬停效果
				tooltip:{
					trigger:'item',
					formatter:'{b} : {c}'+'小时',
				},
				// 图例
				legend:{
					data:['专注时长']
				},
				// 横纵坐标
				xAxis:{
					data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				},
				yAxis:{
					
				},
				// 折线上显示的内容
				series:[{
					name:'专注时长',
					type:'line',
					data:[10, 11, 12.5, 11, 12, 8, 9]
				}]
			};
			// 4、将图表放置在容器里
			myChart.setOption(option);
		</script>
	</body>
</html>

在这里插入图片描述
总结：柱状图与折线图的配置信息很相似，很容易互改

7.3 饼状图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>饼状图</title>
		<!-- 1、引入echarts图表库 -->
		<script type="text/javascript" src="echarts.min.js"></script>
	</head>
	<body>
		<!-- 2、设置容器以存放图表 -->
		<div id="container" style="width: 600px; height: 400px;">
			
		</div>
		<!-- 3、对图表进行配置 -->
		<script type="text/javascript">
			// 图表初始化
			var myChart = echarts.init(document.getElementById('container'));
			var option = {
				// 图表标题
				title:{
					text:'第三个图表示例：观众来源占比'
				},
				// 鼠标悬停效果
				tooltip:{
					trigger:'item',
					formatter:'{b} : {c}'+'%',
				},
				// 饼图上显示的内容
				series:[{
					name:'观众来源',
					type:'pie',
					radius:'50%',
					data:[
						{value:75, name:'Android'},
						{value:20, name:'iOS'},
						{value:3, name:'PC'},
						{value:2, name:'H5'}
					],
				}]
			};
			// 4、将图表放置在容器里
			myChart.setOption(option);
		</script>
	</body>
</html>

在这里插入图片描述

7.4 漏斗图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>漏斗图</title>
		<!-- 1、引入echarts图表库 -->
		<script type="text/javascript" src="echarts.min.js"></script>
	</head>
	<body>
		<!-- 2、设置容器以存放图表 -->
		<div id="container" style="width: 1000px; height: 600px;">
			
		</div>
		<!-- 3、对图表进行配置 -->
		<script type="text/javascript">
			// 图表初始化
			var myChart = echarts.init(document.getElementById('container'));
			var option = {
				// 图表标题
				title:{
					text:'第四个图表示例：大学生毕业走向'
				},
				// 鼠标悬停效果
				tooltip:{
					trigger:'item',
					formatter:'{b} : {c}'+'人',
				},
				// 图例
				legend:{
					data:['考研', '考公', '就业', '留学', '回家继承家业']
				},
				// 饼图上显示的内容
				series:[{
					name:'人数',
					type:'funnel',
					data:[
						{value:123, name:'考研'},
						{value:30, name:'考公'},
						{value:234, name:'就业'},
						{value:10, name:'留学'},
						{value:5, name:'回家继承家业'}
					],
				}]
			};
			// 4、将图表放置在容器里
			myChart.setOption(option);
		</script>
	</body>
</html>

在这里插入图片描述

版权声明：本文为weixin_44641176原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。