由于最近的事情比较多，过多的描述我就略过了，这回直接进入正题。
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;
}
计算属性computed： 支持缓存，只有依赖数据发生改变，才会重新进行计算 不支持...
一、正则表达式概述 二、正则表达式在VBScript中的应用 三、正则表达式在VavaScr...
【排序算法】之lowb三人组冒泡、插入、选择 什么是lowb三人组 冒泡排序bubble so...
vbs:把一段文字中指定字符颜色变成红色的正则 functionc(Tstr,Word) Dimre Setre...
歌词编辑器 歌词编辑器 第一步：选择要播放的歌曲并播放 第二步：填写全部的歌词...
一石激起千层浪，继中国区浩浩荡荡的大裁员告一段落之后，甲骨文并未因此收起手...
前言 相信大家都知道在IDE中代码的智能提示几乎都是标配，虽然一些文本编辑器也...
本文将研究 ES6 的 for ... of 循环。 旧方法 在过去，有两种方法可以遍历 javas...
ADO对象： Connection Command Recordset Record Stream ASP支持的对象很多，可...
微信文件传输助手是微信电脑版与手机微信之间相互传输图片等文件的好工具，但很...
