任务1 生成图片广告
1.生成广告图片,并自动居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片广告</title>
<style type="text/css">
#box {
width:800px;
height:500px;
position: absolute;
left:50%;
top:50%;
border:2px solid;
}
.img{
width: 800px;
height: 500px;
}
</style>
<script type="text/javascript">
window.onload = function() {
function box() {
var mBox = document.getElementById('box');
var L1 = mBox.offsetWidth;
//打印日志
console.log("L1 ="+L1);
var H1 = mBox.offsetHeight;
console.log("H1 = "+H1);
//打印日志
var Left = (document.documentElement.clientWidth - L1) / 2;
var top = (document.documentElement.clientHeight - H1) / 2;
//打印日志
console.log("左边距 = "+Left+" 上边距 = "+top);
mBox.style.left = Left + 'px';
mBox.style.top = top + 'px';
}
box();
//当浏览器页面发生改变时,DIV随着页面的改变居中。
window.onresize = function() {
box();
}
}
</script>
</head>
<body>
<div id="box">
<img class="img" src="img/1.jpeg" alt="ad_pic"/>
</div>
</body>
</html>
效果图:
2.使用JS数组在页面上放置多张图片,同时动态计算不同广告位之间的间距,实现动态布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片广告</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#box{
max-height: 60px;
}
.img{
width:180px;
height:160px;
margin-top:20px;
margin-left:0px;
float:left;
}
</style>
<script type="text/javascript">
window.onload = function() {
function box() {
//动态排列内容
var window_width = document.documentElement.clientWidth;
var div_s = document.getElementsByClassName("img");
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";
}
}
box();
//当浏览器页面发生改变时,DIV随着页面的改变居中。
window.onresize = function() {
box();
}
}
</script>
</head>
<body>
<div id="box">
<div id="box1">
<img class="img" src="img/1.jpeg" alt="ad_pic"/>
</div>
<div id="box2">
<img class="img" src="img/2.jpeg" alt="ad_pic"/>
</div>
<div id="box3">
<img class="img" src="img/3.jpeg" alt="ad_pic"/>
</div>
<div id="box4">
<img class="img" src="img/4.jpeg" alt="ad_pic"/>
</div>
<div id="box5">
<img class="img" src="img/5.jpeg" alt="ad_pic"/>
</div>
</div>
</body>
</html>
效果图:
3.实现每3秒切换不同图片,轮换显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片广告</title>
<style type="text/css">
#box {
width:800px;
height:500px;
position: absolute;
left:50%;
top:50%;
border:2px solid;
}
.img{
width: 800px;
height: 500px;
}
</style>
<script type="text/javascript">
window.onload = function() {
function box() {
var mBox = document.getElementById('box');
var L1 = mBox.offsetWidth;
//打印日志
console.log("L1 ="+L1);
var H1 = mBox.offsetHeight;
console.log("H1 = "+H1);
//打印日志
var Left = (document.documentElement.clientWidth - L1) / 2;
var top = (document.documentElement.clientHeight - H1) / 2;
//打印日志
console.log("左边距 = "+Left+" 上边距 = "+top);
mBox.style.left = Left + 'px';
mBox.style.top = top + 'px';
}
box();
//当浏览器页面发生改变时,DIV随着页面的改变居中。
window.onresize = function() {
box();
}
}
</script>
</head>
<body>
<div id="box">
<img id="img" src="img/1.jpeg" alt="ad_pic"/>
</div>
<script type="text/javascript">
//设置轮播图
var number= 1;
//设置:图片显示函数
function setcount(){
number ++ ;
if(number >5){
number = 1;
}
var img = document.getElementById("img");
img.src = "img/"+number+".jpeg";
console.log("已调用 = ");
}
//设置:每3s调用一次(图片显示函数)
var time = setInterval("setcount()", 3000);
</script>
</body>
</html>
任务1 程序逻辑训练
略
拓展 实现多级联动菜单
待完成
自测
1.实现对[0,9,12,1,6,3,7,11]的冒泡排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS数组排序</title>
<script type="text/javascript">
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 - i; 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])
}
</script>
</head>
<body>
<div>
JS数组排序
</div>
</body>
</html>
2.解释JavaScript中的堆和栈数据结构的区别
栈内存是自动分配相对固定大小的内存空间,并由系统自动释放:,方便操作和管理;
堆内存是动态分配内存,内存大小不一,也不会自动释放,方便开辟新的内存空间。
3.a=1,b=2,使用至少三种方法交换变量a和b的值
方法一:
<!--定义临时变量 temp -->
<script type="text/javascript">
var a = 1;
var b = 2;
var temp;
temp = a;
a = b;
b = temp;
console.log("a="+a);
console.log("b="+b);
</script>
方法二:
<!--通过和运算存储和值,再通过减运算实现互换 -->
<script type="text/javascript">
var a = 1;
var b = 2;
a = a + b;
b = a - b;
a = a - b;
console.log("a="+a);
console.log("b="+b);
</script>
方法三:
<!--异或运算 -->
<script type="text/javascript">
var a = 1;
var b = 2;
var temp;
a ^=b;
b ^=a;
a ^=b;
console.log("a="+a);
console.log("b="+b);
</script>
4.使用for循环求出0~300之间的奇数之和
<!--除以2余数不为 0 即可判断为奇数 -->
<script type="text/javascript">
var sum = 0;
for (let i = 0; i < 300; i++) {
if (i % 2 != 0) {
sum += i;
console.log("i为偶数时的值为:"+i);
}
}
console.log("求和的值为:"+sum);
</script>
5.去除数组[8,7,2,1,5,0,1,9,2]中重复的值,相同的值只保留一个
<script type="text/javascript">
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])
}
</script>
6.使用非递归方式对数组[8,7,12,1,5,0,6,9,2]执行折半查找
<script type="text/javascript">
function search(arr,num) {
var l=arr.length;
var left=0;
var right=l-1;
var center=Math.floor((left+right)/2);
while(left<=l-1&&right>=0){
if (arr[center]==num) return center;
if (left==right) return "不存在";
if (arr[center]>num) {
right=center-1;
center=Math.floor((left+right)/2);
}else if (arr[center]<num) {
left=center+1;
center=Math.floor((left+right)/2);
}
}
}
var a = [8,7,12,1,5,0,6,9,2];
console.log(search(a,5));
</script>