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

最新推荐文章于 2023-06-28 18:14:54 发布

等到天蓝再看海0369

最新推荐文章于 2023-06-28 18:14:54 发布

阅读量102

点赞数

分类专栏： C1认证

本文链接：https://blog.csdn.net/qq_25930375/article/details/118970758

版权

C1认证专栏收录该内容

4 篇文章 0 订阅

订阅专栏

任务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>