Aufgabe 1: Image-Anzeigen generieren
Erzeugen Sie ein Bild in der Mitte der Seite
Code:
var container = document.querySelector('.container');
var img = document.createElement("img");
img.src = "http://www.p5w.net/fund/jjxt/201408/W020140820588903446051.jpg";
img.style.position = "fixed";
img.style.top = "30%";
img.style.left = "34%";
container.appendChild(img);
horizontale äquidistante Anordnung
Teil des Codes:
var imgArr = document.getElementsByTagName("img");
var left = 0;
for (let item of imgArr) {
item.style.top = "20px";
item.style.left = left + 20 + "px";
left = item.width + 20 + left;
}
Karussell
HTML Quelltext:
<div class="banner">
<ul class="img">
<li><a href="#"><img src="1.jpg" ></a></li>
<li><a href="#"><img src="2.jpg" ></a></li>
<li><a href="#"><img src="3.jpg" ></a></li>
<li><a href="#"><img src="4.jpg" ></a></li>
</ul>
</div>
CSS-Code:
@charset "utf-8";
*{
margin: 0;
padding: 0;
list-style: none;
}
.banner{
margin: 100px auto;
border: 5px solid #000;
width: 550px;
height: 300px;
overflow: hidden;
position: relative;
}
.banner .img{
width: 5000px;
position: absolute;
left: 0;
top: 0;
}
.banner .img li{
float: left;}
JS-Code (jQuery):
$(function() {
var i = 0;
var clone = $(".banner .img li").first().clone();
$(".banner .img").append(clone);
var size = $(".banner .img li").size();
function move() {
if (i == size) {
$(".banner .img").css({
left: 0
});
i = 1;
}
if (i == -1) {
$(".banner .img").css({
left: -(size - 1) * 550
});
i = size - 2;
}
$(".banner .img").stop().animate({
left: -i * 550
}, 500);
if (i == size - 1) {
$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
} else {
$(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");
}
}
//自动轮播
var t = setInterval(function() {
i++;
move();
}, 3000);
});
Ausbau: mehrstufige Verknüpfung
HTML Quelltext:
<form action="#">
<select id="prov" onchange="showCity(this)">
<option>=请选择省份=</option>
</select>
<select id="city" onchange="showCountry(this)">
<option>=请选择城市=</option>
</select>
<select id="country" onchange="selecCountry(this)">
<option>=请选择县区=</option>
</select>
<label for="addr-show">您选择的是：
<input type="text" value="" id="addr-show" autocomplete="off">
</label>
<button type="button" class="btn met1" onclick="showAddr()" id="button-show">确定</button>
</form>
JS-Code:
/*根据id获取对象*/
function $(str) {
return document.getElementById(str);
}
var addrShow = $('addr-show');
var btn = document.getElementsByClassName('met1')[0];
var prov = $('prov');
var city = $('city');
var country = $('country');
/*用于保存当前所选的省市区*/
var current = {
prov: '',
city: '',
country: ''
};
/*自动加载省份列表*/
(function showProv() {
btn.disabled = true;
var len = provice.length;
for (var i = 0; i < len; i++) {
var provOpt = document.createElement('option');
provOpt.innerText = provice[i]['name'];
provOpt.value = i;
prov.appendChild(provOpt);
}
})();
/*根据所选的省份来显示城市列表*/
function showCity(obj) {
var val = obj.options[obj.selectedIndex].value;
if (val != current.prov) {
current.prov = val;
addrShow.value = '';
btn.disabled = true;
}
//console.log(val);
if (val != null) {
city.length = 1;
var cityLen = provice[val]["city"].length;
for (var j = 0; j < cityLen; j++) {
var cityOpt = document.createElement('option');
cityOpt.innerText = provice[val]["city"][j].name;
cityOpt.value = j;
city.appendChild(cityOpt);
}
}
}
/*根据所选的城市来显示县区列表*/
function showCountry(obj) {
var val = obj.options[obj.selectedIndex].value;
current.city = val;
if (val != null) {
country.length = 1; //清空之前的内容只留第一个默认选项
var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;
if (countryLen == 0) {
addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name;
return;
}
for (var n = 0; n < countryLen; n++) {
var countryOpt = document.createElement('option');
countryOpt.innerText = provice[current.prov]["city"][val].districtAndCounty[n];
countryOpt.value = n;
country.appendChild(countryOpt);
}
}
}
/*选择县区之后的处理函数*/
function selecCountry(obj) {
current.country = obj.options[obj.selectedIndex].value;
if ((current.city != null) && (current.country != null)) {
btn.disabled = false;
}
}
/*点击确定按钮显示用户所选的地址*/
function showAddr() {
addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name + '-' + provice[
current.prov]["city"][current.city].districtAndCounty[current.country];
}
Provinzialer JS-Code:
var provice = [{
name: "北京市",
city: [{
name: "北京市",
districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区",
"大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"
]
}]
},
{
name: "天津市",
city: [{
name: "天津市",
districtAndCounty: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区",
"武清区", "宝坻区", "蓟县", "宁河县", "芦台镇", "静海县", "静海镇"
]
}]
}];
binäre Suche
function binarySearch(arr, findVal) {
var start = 0;
var end = arr.length - 1;
while (start <= end) {
var mid = Math.floor((start + end) / 2);
if (arr[mid] === findVal) {
return mid;
}
if (arr[mid] > findVal) {
end = mid - 1;
} else {
start = mid + 1;
}
}
return false;
}
schnelle Sorte
function quickSort(arr) {
if (arr.length <= 1) {
return arr;
}
var mNumIndex = Math.floor(arr.length / 2);
var mNum = arr.splice([mNumIndex], 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < mNum) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([mNum], quickSort(right))
}
Blasensortierung
function bubbleSort(arr) {
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
Selbsttest
1. Blasensortierung
var arr = [0, 9, 12, 1, 6, 3, 7, 11];
function arrBubbleSort(arr) {
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - 1 - i; j++) {
let number = 0;
if (arr[j] > arr[j + 1]) {
number = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = number;
}
}
}
return arr;
}
arr = arrBubbleSort(arr);
console.log(arr);
2. Was ist der Unterschied zwischen dem Stapel in JS?
Der Stapelspeicher speichert den Wert des Basisdatentyps und die Adresse des Referenzdatentyps; der
Heap speichert den Wert des Referenzdatentyps.
3. a=1, b=2, tauschen Sie die Werte der beiden Variablen aus
// 中间变量替换
var c = a;
a = b;
b = c;
// 两数之和计算
a += b;
b = a - b;
a = a - b;
// 解构赋值
[a, b] = [b, a];
4. Ungerade Summe von 0-300
var number = 0;
for (let i = 0; i <= 300; i++) {
if (i % 2 == 1)
number += i;
}
console.log(number);
5. Array-Deduplizierung (Beurteilen Sie in jedem Zyklus, ob der Index des aktuellen Werts zum letzten Mal im Array angezeigt wird, fügen Sie ihn hinzu, wenn dies der Fall ist, oder fügen Sie ihn hinzu, wenn er zum letzten Mal angezeigt wird.)
var arr = [8, 7, 2, 1, 5, 0, 1, 9, 2];
function arrValueOfSingle(arr) {
let newArr = [];
for (let index in arr) {
if (arr.lastIndexOf(arr[index]) == index) {
newArr.push(arr[index]);
}
}
return newArr;
}
arr = arrValueOfSingle(arr);
console.log(arr);
6. Verwenden Sie eine nicht rekursive Methode, um das Array in zwei Hälften zu durchsuchen
function binarySearch(arr, element) {
if (!arr)
return -1;
var left = 0;
var right = arr.length - 1;
var mid;
while (left <= right) {
mid = Math.floor((left + right) / 2);
if (arr[mid] == element) {
return mid;
} else if (arr[mid] > element) {
right = mid - 1;
} else {
left = mid + 1;
}
}
return -1;
}
var arr = [17, 31, 45, 80, 67, 45, 56, 79];
console.log(binarySearch(arr, 45));