C1認證：JavaScript編程-有解無憂

在這里插入圖片描述

文章首發至個人博客：https://jackson-art.gitee.io/f14ba1ab844d.html

由于最近的事情比較多，過多的描述我就略過了，這回直接進入正題，

任務一

生成廣告圖片

1、用 HTML + CSS + JavaScript 在頁面正中生成?幅廣告圖片，

因為題目只是說將這種效果做出來，但是去確實想不到具體是想讓我們怎么實作，所以 條條大路通羅馬 ，方法很多~~

思路一

1、絕對定位，（ HTML + CSS ）

html部分：

<div id="ad_div">
</div>

css部分：

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

效果如下：（畫面抖動是軟體問題~~）
在這里插入圖片描述

思路二：

2、使用JS動態計算，（ HTML + CSS + JavaScript ）

html部分：

<div id="ad_div">
</div>

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";

在這里插入圖片描述

這種計算方式雖然不夠友好，但是還是能夠實作這個功能，

如果在上面的基礎上想改成回應式，則可以在外層套用：

window.onresize = function(){}

水平等間距布局

2、用JavaScript陣列在頁面上放置多張廣告圖片，同時動態計算不同廣告位之間的布局，實作水平等間距布局，

思路一：

普通的三劍客組合，動態設定外邊框，

html部分：

<div>
	<div class="div_2"></div>
	<div class="div_2"></div>
	<div class="div_2"></div>
</div>

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";
}

效果如下：
在這里插入圖片描述

圖片輪播

3、用JavaScript代碼實作多張廣告圖片輪播效果：在頁面正中每隔3秒切換不同的廣告圖片，多張圖片輪流顯示，

思路一：

對于這個案例，我第一時間就想到了計時器：
html部分：：

<div>
	<img src="./img/1.png">
</div>

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);

效果如下：
在這里插入圖片描述

很顯然，這種方式切換圖片會有一點生硬，方法二將會拓展一下，讓它變得絲滑~~

思路二：

將所有的照片都排好，進行滾動播放：

html部分：

<div id="main">
	<div id="ads">
		<img src="./img/1.png">
		<img src="./img/2.png">
		<img src="./img/3.png">
		<img src="./img/4.png">
		<img src="./img/5.png">
	</div>
</div>

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部分：

var speed = 10;
var num = 0;
var pic_num = 0;
setInterval(function() {
	var temp = setInterval(function() {
		num++;
		if (num == 150) {
			num = 0;
		}
		document.getElementById("ads").style.top = -speed * num - 5 * pic_num + "px";
		if (num % 30 == 0) {
			clearInterval(temp);
		}
	}, 10);
	pic_num++;
	if (pic_num == 5) {
		pic_num = 0;
	}
}, 3300);

效果如下：
在這里插入圖片描述

總的來說，這次的任務，題目沒有確定是用什么方法，所以都不止一種解決方案，我只是寫了我最能想到的，

任務二

這就不用誰多說了吧~

拓展

首先，要撰寫省市區的三級聯動下拉串列，肯定要有資料的吧，如果你有，那我不多說什么，如果沒有，可以試一試我的這個：省市區三級聯動下拉串列json資料檔案

html部分：

<select name="pro" id="prolevel">
	<option>省份</option>
</select>
<select name="city" id="citylevel">
	<option>城市</option>
</select>
<select name="area" id="arealevel">
	<option>地區</option>
</select>
<br>
<label>你的選擇：</label>
<input id="show" readonly="readonly" />

css部分：

* {
	padding: 0;
	margin: 0;
}

select {
	width: 150px;
	font-size: 18px;
}

input {
	line-height: 22px;
	font-size: 18px;
	margin-top: 10px;
}

javaScript部分：

var data = "";
var xhr = new XMLHttpRequest();
xhr.open('GET', "data.json", false);
xhr.onloadend = function() {
	data = JSON.parse(xhr.responseText);

}
xhr.send(null);

// 獲取串列物件
var prolevel = document.getElementById("prolevel");
var citylevel = document.getElementById("citylevel");
var arealevel = document.getElementById("arealevel");
// 添加資料
var pro = Object.keys(data);
for (let i = 0; i < pro.length; i++) {
	prolevel.options[prolevel.length] = new Option(pro[i]);
}
prolevel.addEventListener("change", function() {
	// 覆寫原有資料
	citylevel.length = 1;
	arealevel.length = 1;
	var citys = Object.keys(data[this.value]);
	for (let i = 0; i < citys.length; i++) {
		citylevel.options[citylevel.length] = new Option(citys[i]);
	}
});
citylevel.addEventListener("change", function() {
	// 覆寫原有資料
	arealevel.length = 1;
	var areas = data[prolevel.value][this.value];
	for (let i = 0; i < areas.length; i++) {
		arealevel.options[arealevel.length] = new Option(areas[i]);
	}
});

arealevel.addEventListener("change", function() {
	document.getElementById("show").value = prolevel.value + citylevel.value + arealevel.value;
});

效果如下：
在這里插入圖片描述

?測

實作對陣列 [0, 9, 12, 1, 6, 3, 7, 11] 的冒泡排序

function sort() {
	var arr = [0, 9, 12, 1, 6, 3, 7, 11];
	for (let i = 0; i < arr.length; i++) {
		for (let j = 0; j < arr.length - 1; j++) {
			if (arr[j] > arr[j + 1]) {
				let temp = arr[j];
				arr[j] = arr[j + 1];
				arr[j + 1] = temp;
			}
		}
	}
	// 列印
	for (let i = 0; i < arr.length; i++) {
		console.log(arr[i])
	}
}

解釋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()

function remove() {
	var arr = [8, 7, 2, 1, 5, 0, 1, 9, 2];
	var array = [];
	for (var i = 0; i < arr.length; i++) {
		if (array.indexOf(arr[i]) === -1) {
			array.push(arr[i])
		}
	}
	// 列印
	for (let i = 0; i < array.length; i++) {
		console.log(array[i])
	}
}

使用非遞回方式對陣列[8, 7, 12, 1, 5, 0, 6, 9, 2]執行折半查

function toFind() {
	var arr = [8, 7, 12, 1, 5, 0, 6, 9, 2];
	arr.sort(function(a, b) {
		return a - b;
	});
	var find = 5;
	let low = 0,
		high = arr.length - 1,
		mid = 0;
	while (low <= high) {
		mid = (low + high) / 2;
		if (find == arr[mid]) {
			return mid;
		} else if (find < arr[mid]) {
			high = mid - 1;
		} else {
			low = mid + 1;
		}
	}
	return -1;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/278094.html

標籤：其他

上一篇：關于element ui

下一篇：20210419HW實習一面

C1認證：JavaScript編程

目錄

任務一

生成廣告圖片

思路一

思路二：

水平等間距布局

思路一：

圖片輪播

思路一：

思路二：

任務二

拓展

?測