C1任务04-计算机程序逻辑
作者：互联网
任务一：生成广告图片
1.在页面正中生成一幅广告图片
(1) 首先，用HTML + CSS实现，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一张广告图片居中(css)</title>
<style type="text/css">
#box {
width:800px;
height:500px;
position: absolute;
left:50%;
top:50%;
margin-left:-380px;
margin-top:-270px;
border:2px solid;
}
.img{
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div id="box">
<img class="img" src="images/1.jpg" alt="ad_pic"/>
</div>
</body>
</html>
(2) 尝试用JavaScript让图片居中
可以发现用JavaScript计算得出的距离更加精准。
window.onload = function() {
function box() {
var mBox = document.getElementById('box');
var L1 = mBox.offsetWidth;
var H1 = mBox.offsetHeight;
var Left = (document.documentElement.clientWidth - L1) / 2;
var top = (document.documentElement.clientHeight - H1) / 2;
mBox.style.left = Left + 'px';
mBox.style.top = top + 'px';
}
box();
//当浏览器页面发生改变时，DIV随着页面的改变居中。
window.onresize = function() {
box();
}
}
- 多张广告图片水平等距布局
js代码：
window.onload = function() {
function box() {
var mBox = document.getElementById('div1');
var mBox2 = document.getElementById('div2');
var mBox3 = document.getElementById('div3');
var mBox4 = document.getElementById('div4');
var mBox5 = document.getElementById('div5');
var L1 = mBox.offsetWidth;
var Left = (document.documentElement.clientWidth - L1 * 5) / 6;
var Left2 = (document.documentElement.clientWidth - L1 * 5) / 6 * 2 + L1;
var Left3 = (document.documentElement.clientWidth - L1 * 5) / 6 * 3 + L1 * 2 ;
var Left4 = (document.documentElement.clientWidth - L1 * 5) / 6 * 4 + L1 * 3 ;
var Left5 = (document.documentElement.clientWidth - L1 * 5) / 6 * 5 + L1 * 4 ;
mBox.style.left = Left + 'px';
mBox2.style.left = Left2 + 'px';
mBox3.style.left = Left3 + 'px';
mBox4.style.left = Left4 + 'px';
mBox5.style.left = Left5 + 'px';
}
box();
//当浏览器页面发生改变时，DIV随着页面的改变居中。
window.onresize = function() {
box();
}
}
- 多张图片定时轮换显示
js代码：
window.onload = function() {
function box() {
var mBox = document.getElementById('box');
var L1 = mBox.offsetWidth;
var H1 = mBox.offsetHeight;
var Left = (document.documentElement.clientWidth - L1) / 2;
var top = (document.documentElement.clientHeight - H1) / 2;
mBox.style.left = Left + 'px';
mBox.style.top = top + 'px';
}
box();
//当浏览器页面发生改变时，DIV随着页面的改变居中。
window.onresize = function() {
box();
}
}
var index= 2;
var path = "images/";
//设置：图片显示函数
function setcount(){
var pathString = path + index + ".jpg";
document.getElementById("img").setAttribute("src",pathString);
index++;
if(index == 6){
index = 1;
}
}
//设置：每3s调用一次（图片显示函数）
var time = setInterval("setcount()", 3000);
4.多级菜单联动
自测
1.冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>冒泡排序</title>
</head>
<body>
<p id="demo"></p>
<script>
//思路：先比较一轮一次，然后用for循环比较一轮多次，然后再加for循环比较多轮多次
//从大到小排序
var array=[0,9,12,1,6,3,7,11];
//比较轮数
for ( var i=0;i<array.length-1;i++){
//每轮比较次数，次数=长度-1-此时的轮数
for (var j=0;j<array.length-1-i;j++) {
if (array[j] > array[j + 1]) {
var temp = array[j];
array[j] = array[j + 1];
array[j + 1] = temp;
} //end if
}//end for 次数
} //end for 轮数
console.log(array);
document.getElementById("demo").innerHTML = array
</script>
</body>
</html>
2.堆栈
栈，线性结构，后进先出，便于管理。堆，一个混沌，杂乱无章，方便存储和开辟内存空间。
3.a=1，b=2，三种方法交换ab
// 交换a和b的值
var a = 1;
var b = 2;
//方式1 引入中间变量
// var temp = a;
// a = b;
// b = temp;
// console.log('互换后a的值为：' + a);//2
// console.log('互换后b的值为：' + b);//1
//方式2 只能互换整数
// a = a + b;
// b = a - b;
// a = a - b;
// console.log('互换后a的值为：' + a);//2
// console.log('互换后b的值为：' + b);//1
//方式3 按位XOR运算 只能互换整数
// a = a ^ b;
// b = a ^ b;
// a = a ^ b;
// console.log('互换后a的值为：' + a); //2
// console.log('互换后b的值为：' + b); //1
//方式4 解构
[a, b] = [b, a];
console.log('互换后a的值为：' + a); //2
console.log('互换后b的值为：' + b); //1
4.求奇数和
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var sum=0;
for(var i=1;i<300;i+=2)
{
sum+=i;
}
document.write("300以内所有奇数和为："+sum);
</script>
</head>
<body>
</body>
</html>
5.js去重
Array.prototype.distinct = function(){
var arr = this,
result = [],
i,
j,
len = arr.length;
for(i = 0; i < len; i++){
for(j = i + 1; j < len; j++){
if(arr[i] === arr[j]){
j = ++i;
}
}
result.push(arr[i]);
}
return result;
}
var arra = [8,7,2,1,5,0,1,9,2];
arra.distinct();
标签：box,function,程序逻辑,04,L1,var,C1,document,mBox 来源： https://blog.csdn.net/m0_54846347/article/details/117202363