任务一：生成图片广告
在页面正中生成图片
代码：
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);
水平等间距布局
部分代码：
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;
}
轮播图
HTML代码：
<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代码：
@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代码（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);
});
拓展：多级联动
HTML代码：
<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代码：
/*根据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];
}
省市区JS代码：
var provice = [{
name: "北京市",
city: [{
name: "北京市",
districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区",
"大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"
]
}]
},
{
name: "天津市",
city: [{
name: "天津市",
districtAndCounty: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区",
"武清区", "宝坻区", "蓟县", "宁河县", "芦台镇", "静海县", "静海镇"
]
}]
}];
二分查找
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;
}
快速排序
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))
}
冒泡排序
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;
}
自测
1、冒泡排序
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、JS中堆栈的区别？
栈内存存储着基本数据类型的值和引用数据类型的地址；
堆内存储着引用数据类型的值。
3、a=1，b=2，将两个变量的值交换
// 中间变量替换
var c = a;
a = b;
b = c;
// 两数之和计算
a += b;
b = a - b;
a = a - b;
// 解构赋值
[a, b] = [b, a];
4、0-300的奇数和
var number = 0;
for (let i = 0; i <= 300; i++) {
if (i % 2 == 1)
number += i;
}
console.log(number);
5、数组去重（每次循环，判断当前值的索引在数组中是否是最后一次出现，是就添加，不是就等是最后一次的时候添加）
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、使用非递归方式对数组进行折半查找
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));