C1认证：JavaScript编程

刺骨的言语ヽ痛彻心扉 2023-01-13 08:54 105阅读 0赞

![在这里插入图片描述][20210417121105454.jpg_pic_center]

> 文章首发至个人博客：[https://hujix.gitee.io/f14ba1ab844d.html][https_hujix.gitee.io_f14ba1ab844d.html]

> 由于最近的事情比较多，过多的描述我就略过了，这回直接进入正题。

### 目录 ###

*   *  任务一
     *   *  生成广告图片
         *   *  思路一
             *  思路二：
         *  水平等间距布局
         *   *  思路一：
         *  图片轮播
         *   *  思路一：
             *  思路二：
     *  任务二
     *  拓展
     *  ⾃测

--------------------

## 任务一 ##

### 生成广告图片 ###

1、**用 HTML + CSS + JavaScript 在页面正中生成⼀幅广告图片。**

> 因为题目只是说将这种效果做出来，但是去确实想不到具体是想让我们怎么实现，所以 **条条大路通罗马** ，方法很多~~

#### 思路一 ####

> 1、绝对定位。（ HTML + CSS ）

**html部分：**

**css部分：**

#ad_div { 
    	width: 500px;
    	height: 400px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-top: -200px;
    	margin-left: -250px;
    	background-color: #FFFFBF;
    }

效果如下：（ 画面抖动是软件问题~~）  
![在这里插入图片描述][20210416212617794.gif_pic_center]

--------------------

#### 思路二： ####

> 2、使用JS动态计算。（ HTML + CSS + JavaScript ）

**html部分：**

**css部分:**

#ad_div { 
    	width: 500px;
    	height: 400px;
    	background-color: #FFFFBF;
    }

**javaScript部分：**

// 获取div标签
    var div = document.getElementById("ad_div");
    // 获取浏览器窗口宽度 --- 忽略滚动条
    var window_width = document.documentElement.clientWidth;
    // 获取浏览器窗口高度 --- 忽略滚动条
    var window_height = document.documentElement.clientHeight;
    div.style.top = (window_height - 400) / 2 + "px";
    div.style.left = (window_width - 500) / 2 + "px";
    // 或者
    // div.style.top = (window_height - div.offsetHeight) / 2 + "px";
    // div.style.left = (window_width - div.offsetWidth) / 2 + "px";

![在这里插入图片描述][20210417080229105.gif_pic_center]

> 这种计算方式虽然不够友好，但是还是能够实现这个功能。

如果在上面的基础上想改成响应式，则可以在外层套用：

window.onresize = function(){ }

--------------------

### 水平等间距布局 ###

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

#### 思路一： ####

> 普通的三剑客组合，动态设置外边框。

**html部分：**

**css部分：**

* { 
    	padding: 0;
    	margin: 0;
    }
    
    .div_2 { 
    	width: 200px;
    	height: 100px;
    	margin-top: 20px;
    	margin-left: 0px;
    	float: left;
    	background-color: #FFFFBF;
    }

**javaScript部分：**

var window_width = document.documentElement.clientWidth;
    var div_s = document.getElementsByClassName("div_2");
    for (var i = 0; i < div_s.length; i++) { 
    	div_s[i].style.marginLeft = (window_width - div_s.length * div_s[i].offsetWidth) / (div_s.length + 1) + "px";
    }

效果如下：  
![在这里插入图片描述][20210417121832686.png_pic_center]

--------------------

### 图片轮播 ###

3、**用JavaScript代码实现多张广告图片轮播效果：在页面正中每隔3秒切换不同的广告图片，多张图片轮流显示。**

#### 思路一： ####

对于这个案例，我第一时间就想到了计时器：  
**html部分：**：

**css部分：**

* { 
    	padding: 0;
    	margin: 0;
    }
    
    div { 
    	width: 400px;
    	height: 300px;
    	background-color: #FFFFBF;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-top: -150px;
    	margin-left: -200px;
    }

**javaScript部分：**

var a = ["./img/1.png", "./img/2.png", "./img/3.png", "./img/4.png", "./img/5.png"];
    var num = 1;
    setInterval(function() { 
    	document.getElementsByTagName("img")[0].src = a[num];
    	num++;
    	if (num == 5) { 
    		num = 0;
    	}
    }, 3000);

效果如下：  
![在这里插入图片描述][20210417100552897.gif_pic_center]

> 很显然，这种方式切换图片会有一点生硬，方法二将会拓展一下，让它变得丝滑~~

#### 思路二： ####

> 将所有的照片都排好，进行滚动播放：

**html部分：**

**css部分：**

* { 
    	padding: 0px;
    	margin: 0px;
    	border: 0px;
    }
    
    #main { 
    	width: 400px;
    	height: 300px;
    	background-color: #FFFFBF;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-top: -150px;
    	margin-left: -200px;
    	overflow: hidden;
    }
    
    #ads { 
    	position: absolute;
    	top: 0px;
    }

**javaScript部分：**

效果如下：  
![在这里插入图片描述][20210417121520949.gif_pic_center]

> 总的来说，这次的任务，题目没有确定是用什么方法，所以都不止一种解决方案，我只是写了我最能想到的。

--------------------

## 任务二 ##

> 这就不用谁多说了吧~

## 拓展 ##

> 首先，要编写省市区的三级联动下拉列表，肯定要有数据的吧，如果你有，那我不多说什么，如果没有，可以试一试我的这个：[省市区三级联动下拉列表json数据文件][json]

**html部分：**

**css部分：**

* { 
    	padding: 0;
    	margin: 0;
    }
    
    select { 
    	width: 150px;
    	font-size: 18px;
    }
    
    input { 
    	line-height: 22px;
    	font-size: 18px;
    	margin-top: 10px;
    }

**javaScript部分：**

效果如下：  
![在这里插入图片描述][20210417140802224.gif_pic_center]

--------------------

## ⾃测 ##

> 实现对数组 \[0, 9, 12, 1, 6, 3, 7, 11\] 的冒泡排序

> 解释JavaScript中的堆和栈数据结构的区别

栈会自动分配内存空间，会自动释放。堆动态分配的内存，大小不定也不会自动释放。

> a=1, b=2，使用至少三种方法交换变量a和b的值

**方式一：定义中间变量**

function swap(a, b) { 
    	var temp;
    	temp = a;
    	a = b;
    	b = temp;
    }

**方式二：数字加减运算**

function swap(a, b) { 
    	a = a + b;
    	b = a - b; 
    	a = a - b; 
    }

**方式三：对象赋值**

function swap(a, b) { 
    	var temp = { 
    		a: b,
    		b: a
    	};
    	a = temp.a;
    	b = temp.b;
    }

**方式四：异或**

function swap(a, b) { 
    	a ^=b;
    	b ^=a;
    	a ^=b;
    }

> 使用for循环求出0～300之间的奇数之和

function add() { 
    	var num = 0;
    	for (let i = 0; i < 300; i++) { 
    		if (i % 2 != 0) { 
    			num += i;
    		}
    	}
    	console.log(num);
    }

> 去除数组\[8, 7, 2, 1, 5, 0, 1, 9, 2\]中重复的值，相同的值只保留⼀个

**方法一：Set去重**

function remove() { 
    	var arr = [8, 7, 2, 1, 5, 0, 1, 9, 2];
    	var arr_r = Array.from(new Set(arr));
    	// 打印
    	for (let i = 0; i < arr_r.length; i++) { 
    		console.log(arr_r[i])
    	}
    }

**方法二：新建数组，使用 indexof()**

> 使用非递归方式对数组\[8, 7, 12, 1, 5, 0, 6, 9, 2\]执行折半查

[20210417121105454.jpg_pic_center]: /images/20221022/4e1ecbbc119f448cb8c7e73341b9f8f0.png
[https_hujix.gitee.io_f14ba1ab844d.html]: https://hujix.gitee.io/f14ba1ab844d.html
[20210416212617794.gif_pic_center]: /images/20221022/653f13f9487f4e318d99f9ba2d2d3caf.png
[20210417080229105.gif_pic_center]: /images/20221022/5d8cda6566514bf7af9bdb645c539bb3.png
[20210417121832686.png_pic_center]: /images/20221022/b24dc316896c43259cbf38465aa87fff.png
[20210417100552897.gif_pic_center]: /images/20221022/1da933189f634624be37519bcfc35124.png
[20210417121520949.gif_pic_center]: /images/20221022/7dfaa604555d4656bdc621e8573b3c8a.png
[json]: https://download.csdn.net/download/qq_44700693/16727656
[20210417140802224.gif_pic_center]: /images/20221022/5fead1d565cb41a08fe935efa800a4b5.png