C1任务04-计算机程序逻辑

最新推荐文章于 2021-07-18 04:48:27 发布

怒割小白菜

最新推荐文章于 2021-07-18 04:48:27 发布

阅读量199

点赞数

分类专栏： C1能力认证

本文链接：https://blog.csdn.net/m0_54846347/article/details/117202363

版权

C1能力认证专栏收录该内容

4 篇文章 0 订阅

订阅专栏

任务一：生成广告图片

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();

怒割小白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
C1任务04-计算机程序逻辑

任务一：生成广告图片1.在页面正中生成一幅广告图片(1) 首先，用HTML + CSS实现，<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>一张广告图片居中(css)</title> <style type="text/css"> #box {
复制链接

扫一扫

专栏目录