C1任务四-计算机程序逻辑_计算机程序逻辑上机任务-CSDN博客

本文链接：https://blog.csdn.net/qq_51178391/article/details/118705052

文章目录

任务一、生成广告图片
任务二：程序逻辑训练
拓展任务：实现多级联动菜单

任务一、生成广告图片

生成一张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			padding: 0;
			margin: 0;
		}
		body {
			background-color: pink;
		}
		#img_div{
			width: 500px;
			height: 320px;
			position: relative;
		}
		#img_div img{
			width: 140px;
			height: 105px;
		}
		</style>
	</head>
	<body>
		<div id="img_div">
			<img src="img/1.jpg" alt="">
		</div>
		<script type="text/javascript">
		οnlοad=function(){
			var img_div=document.getElementById("img_div");
			img_div.style.top=(innerHeight-105)/2+'px';
			img_div.style.left=(innerWidth-140)/2+'px';
		}
		</script>
	</body>
</html>

在这里插入图片描述

多张图片，动态设置间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#img_div{
				width: 800px;
				height: 320px;
				position: relative;
				border: 1px solid purple;
			}
			body{
				background-color: pink;
			}
			#img_div img{
				float: left;
				width: 140px;
				height: 105px;
			}
		</style>
	</head>
	<body>
		<div id="img_div">
			<img src="img/1.jpg" alt="">
			<img src="img/2.jpg" alt="">
			<img src="img/3.jpg" alt="">
			<img src="img/4.png" alt="">
			<img src="img/5.jpg" alt="">
		</div>
		<script type="text/javascript">
			var imgs;
			οnlοad=function(){
				var img_div=document.getElementById("img_div");
				img_div.style.top=(innerHeight-320)/2+'px';
				img_div.style.left=(innerWidth-650)/2+'px';
				imgs=document.getElementsByTagName("img");
				var num=imgs.length*7+1;
				var margin=650/num;
				var w=margin*6;
				var h=margin*4;
				for(var i=0;i<imgs.length;i++){
					imgs[i].style.marginLeft=margin+'px';
					imgs[i].style.marginTop=margin+'px';
					imgs[i].style.height=h+'px';
					imgs[i].style.weight=w+'px;'
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述
3. 轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			padding: 0;
			margin: 0;
		}
		body {
			background-color: pink;
		}
		#img_div{
			width: 500px;
			height: 320px;
			position: relative;
		}
		#img_div img{
			width: 140px;
			height: 105px;
		}
		</style>
	</head>
	<body>
		<div id="img_div">
			<img src="img/1.jpg" alt="" id="banner">
		</div>
		<script type="text/javascript">
		οnlοad=function(){
			var img_div=document.getElementById("img_div");
			img_div.style.top=(innerHeight-105)/2+'px';
			img_div.style.left=(innerWidth-140)/2+'px';
		}
		var banner=document.getElementById("banner");
		var i=0;
		function bann(){
			if(i%5==0){
				banner.src="img/2.jpg";
			}else if(i%5==1){
				banner.src="img/3.jpg";
			}else if(i%5==2){
				banner.src="img/4.jpg";
			}else if(i%5==3){
				banner.src="img/5.jpg";
			}else if(i%5==4){
				banner.src="img/1.jpg";
			}
			i++;
		}
		setInterval(bann,3000);
		</script>
	</body>
</html>

在这里插入图片描述

任务二：程序逻辑训练

分支
if…else
switch case
循环
while(){}
do{}while()
算法
1. 算法要在合理的时间复杂度、合理运行时间内、合理的空间内运行。
2. 并行算法的最短时间就是该算法最长时间步骤运行的时间

拓展任务：实现多级联动菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="prov" οnchange="selecrProv(this)">
			<option value="">-请选择您的省份-</option>
			<option value="">-北京市-</option>
			<option value="">-江西-</option>
		</select>
		<select id="city" οnchange="selecrCity(this)">
			<option value="">-请选择您的城市-</option>
			<option value="">-南昌-</option>
		</select>
		<select id="country" οnchange="selecrCountry(this)">
			<option value="">-请选择您的县区-</option>
			<option value="">-红谷滩区-</option>
			<option value="">-新建区-</option>
			<option value="">-其他-</option>
		</select>
		<script type="text/javascript">
			var provice = [
				{
					name:"北京市",
					city:[
						{
							name:"北京市",
							districtAndCountry:["东城区"，"西城区","其他"];
						}
					]
				},
				{
					name:"江西省",
					city:[
						{
							name:"南昌市",
							districtAndCountry:["红谷滩区"，"新建区","其他"];
						}
					]
				}
			];
			οnlοad=function(){
				loadProv();
			};
			function getTag(str){
				return document.getElementById(str);
			}
			var prov=getTag("prov");
			var city=getTag("city");
			var country=getTag("country");
			function loadProv(){
				for(var i=0;i<provice.length;i++){
					var proAdd=document.createElement("option");
					proAdd.innerHTML=provice[i].name;
					proAdd.value=i;
					prov.appendChild(proAdd);
				}
			};
			var proC;
			var cityC;
			var countryC;
			function selecrProv(obj){
				var index=obj.value;
				proC=index;
				if(index!=null){
					city.length=1;
					for(var i=0;i<provice[index].city.length;i++){
						var cityAdd=document.createElement("option");
						cityAdd.innerHTML=provice[index].city[i].name;
						cityAdd.value=i;
						city.appendChild(cityAdd);
					}
				}
			};
			function selecrCity(obj){
				var index=obj.value;
				cityC=index;
				if(index!=null){
					city.length=1;
					for(var i=0;i<provice[proC].city[index].districtAndCountry.length;i++){
						var countryAdd=document.createElement("option");
						countryAdd.innerHTML=provice[proC].city[cityC].districtAndCountry[i];
						countryAdd.value=i;
						city.appendChild(countryAdd);
					}
				}
			};
			function selecrCountry(obj){
				countryC=obj.value;
				alert("您选择的是："+provice[proC].name+"-"+provice[proC].city[cityC].name+"-"+provice[proC].city[cityC].districtAndCountry[countryC]);
			};
		</script>
	</body>
</html>