C1任务04 js逻辑训练

最新推荐文章于 2024-08-11 11:27:09 发布

梦中情蛋

最新推荐文章于 2024-08-11 11:27:09 发布

阅读量121

点赞数

分类专栏： C站认证任务

本文链接：https://blog.csdn.net/fjaljda/article/details/116856546

版权

C站认证任务专栏收录该内容

5 篇文章 0 订阅

订阅专栏

任务一：生成图片广告

我在网上找了几张计算机语言的相关图片，并且用这些图片进行了简单的布局，用js的jQuery框架实现轮播操作，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播</title>
	<style>
		div,img,ul,li{
			margin: 0;
			padding: 0;
		}
		#main{
			width: 1000px;
			height: 300px;
			border: 1px solid #444;
		}
		#show{
			width: 240px;
			margin: 0 auto;
			overflow: hidden;
		}
		ul{
			display: flex;
			display: -webkit-flex;/*Safari*/
			justify-content: space-around;
			position: relative;
			left: 380px;
		}
		li{
			display: inline-block;
			list-style: none;
			margin: 20px;
		}
		img{
			width: 200px;
			border: 1px solid #444;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="show">
			<ul>
				<li><img src="./img1.jpg" alt="Python爬虫"></li>
				<li><img src="./img2.jpg" alt="hadoop"></li>
				<li><img src="./img3.jpg" alt="Scala"></li>
				<li><img src="./img4.jpg" alt="Java"></li>
			</ul>
		</div>
		
	</div>
	<script src="./jquery-1.11.1.js"></script>
	<script>
		var left = 360;
		var count = 0;
		setInterval(()=>{
			count++;
			$('ul').animate({left:left - (count % 4) * 240});
		},3000);
	</script>
</body>
</html>

在html文件当前文件夹中放入这几张图片和jQuery文件。
效果如下：
在这里插入图片描述

任务二：程序逻辑训练

实现多级联动菜单

准备工作

首先，从网上下载全国各省各市各区的json文件，转载至：https://blog.csdn.net/youshi520000/article/details/70808580
下面，通过json文件实现省、市、区的选取。

浏览器默认不允许读取本地文件，以下我用谷歌浏览器去读取json文件，首先要找到Chrome浏览器的路径，打开chrome://version/，查看当前Chrome浏览器的目录：
在这里插入图片描述
在cmd窗口输入命令：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

重启浏览器之后就可以读取本地文件了。

在网站上找一个省市区的json文件:https://blog.csdn.net/youshi520000/article/details/70808580，把它保存在html当前目录。

代码编写

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省、市、区的选取</title>
	<style>
		div,form,select,option{
			margin: 0;
			padding: 0;
		}
		#container{
			width: 1200px;
		}
		#layout{
			width: 1200px;
			position: relative;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			margin-top: 50px;
			margin-left: 60px;
		}
		select{
			width: 200px;
			height: 30px;
			border: 1px solid #444;
			border-radius: 4px;
			text-align-last: center;
			text-align: center;
			padding: 0 4%;
		}
		select:hover{
			border: 2px solid #c1d2f0;
		}
		option{
			padding: 40px;
		}
	</style>
</head>
<body>
	<div id="container">
		<form action="">
			<div id="layout">
				<select name="province" id="province"></select>
				<select name="city" id="city"></select>
				<select name="area" id="area"></select>
			</div>
		</form>
	</div>
	<script src="./jquery-1.11.1.js"></script>
	<script type="text/javascript">
		// 首先定义标签
		var province = document.getElementById("province");
		var city = document.getElementById("city");
		var area = document.getElementById("area");

		// 获取json数据
		$.getJSON("./全国省市区数据.json",function(data){
			//遍历data，把省份、市、区添加到select中去
			//初始化数据
			for(var i = 0;i < data.length;i++){
				province.options.add(new Option(data[i]["name"]));
			}
			city.options.add(new Option(data[0]["city"][0]["name"]));
			area.options.add(new Option(data[0]["city"][0]["area"][0]));

			//选择市，通过省份按钮的改变使市的按钮改变，先把市的option长度清零，防止与其他省份产生混淆
			province.onchange = function(){
				city.options.length = 0;
				var province_selected = province.selectedIndex;
				for(var i = 0;i < data[province_selected]["city"].length;i++){
					city.options.add(new Option(data[province_selected]["city"][i]["name"]));

					//把后面的city调成当前所在的市的区
					var city_selected = city.selectedIndex;
					//清空option
					area.options.length = 0;

					for(var j = 0;j < data[province_selected]["city"][city_selected]["area"].length;j++){
						area.options.add(new Option(data[province_selected]["city"][city_selected]["area"][j]));
					}
				}

			}

			//选择区，原理与市相同
			city.onchange = function(){
				//清空option
				area.options.length = 0;

				var province_selected = province.selectedIndex;
				var city_selected = city.selectedIndex;
				for(var i = 0;i < data[province_selected]["city"][city_selected]["area"].length;i++){
					area.options.add(new Option(data[province_selected]["city"][city_selected]["area"][i]));
				}
			}

		});
	</script>
</body>
</html>