C1-4任务笔记

最新推荐文章于 2024-08-10 17:24:49 发布

灵魂牢笼

最新推荐文章于 2024-08-10 17:24:49 发布

阅读量130

点赞数

分类专栏：考级任务 C1考级任务

本文链接：https://blog.csdn.net/m0_52283848/article/details/118353952

版权

C1考级任务同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

考级任务

3 篇文章 0 订阅

订阅专栏

文章目录

任务1生成图片广告
任务2程序逻辑训练
拓展任务：实现多级联动菜单
自测题目

任务1生成图片广告

首先,能够用HTML+CSS+ JavaScript在页面正中生成一幅广告图片

具体实现代码及效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			#mydiv {
				//设置为相对定位
				position: relative;
			}

			#mydiv img {
				position: relative;
				width: 300px;
				height: 400px;
				top: 120px;
				left: 40%;
			}

			p {
				font-size: 40px;
				color: #F2A263;
				text-align: center;
			}
		</style>

	</head>
	<body>
		<p>广告图片</p>
		<div id="mydiv">
			<img src="img/html页面广告图/图片%20(1).jpeg">	
		</div>
	</body>
</html>

在这里插入图片描述

其次,用 JavaScript数组在页面上放置多张广告图片,同时动态计算不同广告位之间的布局,实现水平等间距布局

具体实现代码及效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;

			}

			#mydiv {
				/* 设置为相对定位 */
				position: relative;
			}
			/* 统一设置mydiv下的img标签的属性 */
			#mydiv img {
				position: relative;
				width: 200px;
				height: 300px;
				top: 120px;
				/* left属性留在后面一次性设置 */
			}

			p {
				font-size: 40px;
				color: #F2A263;
				text-align: center;
			}
		</style>

	</head>
	<body>
		<script>
			// window可以省略不写,默认就是window
			onload = function() {  
					//获取所有img标签，element获取的对象如果是多个则是以数组形式存在
					var imgs = document.getElementsByTagName("img");
					//电脑屏幕宽度
					var pingmu = screen.width;	
					//计算标签数量
					var count = imgs.length;
					//这里用var是为了后面也能取用到,不清楚的可以百度下let和var的区别		
					var left = 0;
					//遍历取出元素
					for (var i=0;i<imgs.length;i++) {
						//将屏幕排放图片后剩余的位置平均分配给每个图片，因为要预留一个空位所以+1
						left = (pingmu - count * (imgs[i].width)) / (count+1) + left;
						//设置图片的left属性，px用字符表示是为了下次循环不出现leftpxpx
						imgs[i].style.left = left + "px";	
						}	
					}
		</script>
		<p>广告图片</p>
		<div id="mydiv">
			<!-- 图片之间不能有空格，不然会有空隙 -->
			<img src="img/html页面广告图/图片%20(1).jpeg"><img src="img/html页面广告图/图片%20(2).jpeg"><img
				src="img/html页面广告图/图片%20(3).jpeg"><img src="img/html页面广告图/图片%20(4).jpeg"><img
				src="img/html页面广告图/图片%20(5).jpeg">
		</div>


	</body>
</html>

在这里插入图片描述

最后,用 JavaScript代码实现多张广告图片轮播效果:在页面正中每隔3秒切换不同的广告图片,多张图片轮流显示

在这里插入图片描述

具体实现代码及效果图：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            position: static;
        }
        #imgId{
            width: 400px;
        }
        .mydiv{
            position: sticky;
            top: 200px;
            margin-left: 35%;
        }
    </style>
</head>
<body>
    <script>
        onload = function(){
            let imgId = document.getElementById("imgId");
            var imgs = ["img\\html页面广告图\\图片%20(1).jpeg",
						"img\\html页面广告图\\图片%20(3).jpeg",
						"img\\html页面广告图\\图片%20(4).jpeg",
						"img\\html页面广告图\\图片%20(5).jpeg",
						"img\\html页面广告图\\图片%20(6).jpeg",
                        "img\html页面广告图\\图片%20(2).jpeg"];     
            var imgsLength = imgs.length;
            let flag = 0;
			//使用setInterval方法将函数和播放时间传入进去
			setInterval(function(){fun(imgs,imgsLength);},1000);
			// for (let i = 0; i < imgs.length; i++) {
			// 	if(flag > imgsLength - 1){
			// 	    flag = 0;
			// 	}
			// 	imgId.src = imgs[flag++]; 
			// }
            function fun(imgs,imgsLength){
                if(flag > imgsLength - 1){
                    flag = 0;
                }
                imgId.src = imgs[flag++];
            }
            
        }
    </script>
    <div class="mydiv">
        <img id="imgId" >
    </div>
</body>
</html>

这里由于是截图所以没有办法演示效果：
在这里插入图片描述

任务2程序逻辑训练

后续有时间更新

在code.org上以「所见即所得(WYSIWYG) 」的编码方式完成「应用实验室」系列任务,加深对代码逻辑和程序语法的理解。

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

有时间再更新

用HTML + CSS + JavaScript实现网页上常见的【省市区多级联动下拉单】
选择直辖市的过程

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			span,#info{
				font-size: 20px;
				color: #F7CC9F;
			}	
			select{
				width: 200px;
				height: 40px;
				font-size: 20px;
				border: skyblue solid 1px;
			}
		</style>
	</head>
	<body>
		<script>
			onload = function() {
				let l_sheng = document.getElementById("sheng");
				let l_shi = document.getElementById("shi");
				let l_qu = document.getElementById("qu");
				let l_info = document.getElementById("info");

				let sheng = [["江西省"], ["福建省"], ["北京"]];
				let shi = [["南昌市"], ["漳州市"], ["北京市"]];
				//为了后面取到的i是南城县所以这里用了多个[]包裹
				let qu = [[["南城县"]], [["芗城区"]],[["东城区"]]];
				
				//用于拼接省市区打印汇总
				let sheng_info = "";
				let shi_info = "";
				let qu_info = "";
				l_sheng.innerHTML = "<option value=''>---未选择---</option>";
				for (let i = 0; i < sheng.length; i++) {
					l_sheng.innerHTML += "<option value='" + i + "'>" + sheng[i] + "</option>";
				}
				l_sheng.onchange = function() {
					//每次改变省选项，都将清空省市县信息
					sheng_info_str = "";
					shi_info_str = "";
					qu_info_str = "";

					sheng_info_str += sheng[l_sheng.value];
					l_shi.innerHTML = "";
					l_qu.innerHTML = "";
					l_shi.innerHTML = "<option value=''>---未选择---</option>";
					for (let i = 0; i < shi.length; i++) {
						l_shi.innerHTML += "<option value='" + i + "'>" + shi[l_sheng.value][i] + "</option>";
					}
					l_shi.onchange = function() {
						//每次改变市选项，都将清空市县信息
						shi_info_str = "";
						xian_info_str = "";

						shi_info_str += shi[l_sheng.value][l_shi.value];
						l_qu.innerHTML = "";
						l_qu.innerHTML = "<option value=''>---未选择---</option>";
						for (let i = 0; i < qu.length; i++) {
							l_qu.innerHTML += "<option value='" + i + "'>" + qu[l_sheng.value][l_shi.value][i] + "</option>";
						}
						l_qu.onchange = function() {
							//每次改变县选项，都将清空县信息
							xian_info_str = "";
							xian_info_str += qu[l_sheng.value][l_shi.value][l_qu.value];
							l_info.innerText = "您的选择：" + sheng_info_str + " " + shi_info_str + " " + xian_info_str;
						}
					}
				}
			}
		</script>
		<div id="mydiv">
			<span>省</span><select id="sheng">
	<!-- 方便复制比较懒 -->
					<!-- <option value="">江西省</option>-->
				</select>
				<span>市</span></span><select id="shi">
				</select>
				
				<span>区</span></span><select id="qu">
				</select>
				
				<div id="info">详细地址： </div>
			</div>
		</body>
	</html>