c1能力认证任务04-计算机程序逻辑

最新推荐文章于 2022-02-17 13:51:11 发布
最新推荐文章于 2022-02-17 13:51:11 发布
阅读量154 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frankfurter2016/article/details/119600343
版权

任务一：生成图片广告
首先，能够用HTML+CSS+JavaScript在页面正中生成一幅广告图片。
其次，用JavaScript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局。
最后，用JavaScript代码实现多张广告图片轮播效果：在页面正中间每隔3秒切换不同的广告图片，多张图片轮流显示。

任务二：程序逻辑训练
在code.org上完成系列任务如下，加深对代码逻辑和程序语法的理解。
变量，条件和函数相关任务（https://studio.code.org/s/csp4-2020）
列表、循环和遍历相关任务（https://studio.code.org/s/csp5-2020）
计算机程序算法相关的任务（https://studio.code.org/s/csp6-2020）
可选任务：参数、返回值和库（https://studio.code.org/s/csp7-2020）

拓展：实现多级联动菜单
用HTML+CSS+JavaScript实现网页上常见的“省市区多级联动下拉菜单”（理解树型数据结构）
选择直辖市的过程。
选择省份的过程。
任务提示
不必完全参照上图中的下拉列表，数据可以自己造
淡黄色表示鼠标悬浮状态的背景，可自行设定颜色
熟练掌握2~3种常见的计算机算法（例如冒跑排序：https://algorithm-visualizer.org/brute-force/bubble-sort）
使用算法可视化网站运行一种你不熟悉的排序或者查找算法
尝试把它用JavaScript代码再写一遍并能成功执行
将代码运行后的效果和网站上运行的效果进行对照，看看结果是否一致
重复以上步骤，直到能够熟练掌握2~3种算法为止。

自测

  • 实现对数组[0,912,1,6,3,7,11]的冒泡排序。
  • 解释JavaScript中的堆和栈数据结构的区别。
  • a=1，b=2，使用至少三种方法交换变量a和b的值。
  • 使用for循环求出0~300之间的奇数之和。
  • 去除数组[8,7,2,1,5,0,1,9,2]中重复的值，相同的值只保留一个。
  • 使用非递归方式对数组[8,7,12,1,5,0,6,9,2]执行折半查找。

分割线任务开始
任务一：生成图片广告
首先，能够用HTML+CSS+JavaScript在页面正中生成一幅广告图片。
代码如下：

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #ggs{
            width: 400px;
        }
        .mydiv{
			/*sticky粘性定位*/
            position: sticky;
            top: 200px;
            margin-left: 35%;
        }
    </style>
</head>
<body>
    <div class="mydiv">
        <img id="ggs" src="D:\C站能力认证\任务04\轮播图-宠物\VCG21gic19991576.webp">
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

其次，用JavaScript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #ggs{
            width: 400px;
        }
        .mydiv{
			/*sticky粘性定位*/
            position: sticky;
            top: 200px;
            margin-left: 35%;
        }
    </style>
</head>
<body>
    <div class="mydiv">
        <img id="ggs" src="D:\C站能力认证\任务04\轮播图-宠物\VCG21gic19991576.webp">
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

最后，用JavaScript代码实现多张广告图片轮播效果：在页面正中间每隔3秒切换不同的广告图片，多张图片轮流显示。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            position: static;
        }
        #ggs{
            width: 400px;
        }
        .mydiv{
            position: sticky;
            top: 200px;
            margin-left: 35%;
        }
    </style>
</head>
<body>
    <script>
        window.onload = function(){
            let ggs = document.getElementById("ggs");
            var imgs = ["file:///D:/C%E7%AB%99%E8%83%BD%E5%8A%9B%E8%AE%A4%E8%AF%81/%E4%BB%BB%E5%8A%A104/%E8%BD%AE%E6%92%AD%E5%9B%BE-%E5%AE%A0%E7%89%A9/VCG41157532246.webp",
                        "file:///D:/C%E7%AB%99%E8%83%BD%E5%8A%9B%E8%AE%A4%E8%AF%81/%E4%BB%BB%E5%8A%A104/%E8%BD%AE%E6%92%AD%E5%9B%BE-%E5%AE%A0%E7%89%A9/VCG41157684448.webp",
                        "file:///D:/C%E7%AB%99%E8%83%BD%E5%8A%9B%E8%AE%A4%E8%AF%81/%E4%BB%BB%E5%8A%A104/%E8%BD%AE%E6%92%AD%E5%9B%BE-%E5%AE%A0%E7%89%A9/VCG211273959837.webp",
                        "file:///D:/C%E7%AB%99%E8%83%BD%E5%8A%9B%E8%AE%A4%E8%AF%81/%E4%BB%BB%E5%8A%A104/%E8%BD%AE%E6%92%AD%E5%9B%BE-%E5%AE%A0%E7%89%A9/VCG211330587343.webp"];
                        
            var imgsLen = imgs.length;
            let flag = 0;
            function gg(imgs,imgsLen){
                if(flag > imgsLen - 1){
                    flag = 0;
                }
                ggs.src = imgs[flag++];
            }
            var timer = setInterval(function(){
                gg(imgs,imgsLen);
            },1500);
        }
    </script>
    <div class="mydiv">
        <img id="ggs" >
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

任务二：程序逻辑训练
在code.org上完成系列任务如下，加深对代码逻辑和程序语法的理解。
该网站网速不好，暂时略过。

拓展：实现多级联动菜单
用HTML+CSS+JavaScript实现网页上常见的“省市区多级联动下拉菜单”（理解树型数据结构）
选择直辖市的过程。
选择省份的过程。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .mydiv select{
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
    <script>
        window.onload = function() {
            let sheng_s = document.getElementById("sheng");
            let shi_s = document.getElementById("shi");
            let xian_s = document.getElementById("xian");
            let info = document.getElementById("info");

            let sheng = ["陕西省","甘肃省"];
            let shi = [
                ["西安市","咸阳市"],
                ["白银市","天水市"]
            ];
            let xian = [
                [
                    ["莲湖区","长安区"],
                    ["礼泉县","兴平县"]
                ],
                [
                    ["靖远县","景泰县"],
                    ["武山县","清水县"]
                ]
            ];

            //显示选择的省份信息
            let sheng_info_str = "";
			//显示选择的市信息
            let shi_info_str = "";
			//显示选择的县信息
            let xian_info_str = "";

            sheng_s.innerHTML = "<option value=''>---未选择---</option>";
            for (let sheng_i = 0; sheng_i < sheng.length; sheng_i++) {
                sheng_s.innerHTML += "<option value='"+sheng_i+"'>"+sheng[sheng_i]+"</option>";  
            }
            sheng_s.onchange = function(){
                //每次改变省选项，都将清空省市县信息
                sheng_info_str = "";
                shi_info_str = "";
                xian_info_str = "";

                sheng_info_str += sheng[sheng_s.value];
                shi_s.innerHTML = "";
                xian_s.innerHTML = "";
                shi_s.innerHTML = "<option value=''>---未选择---</option>";
                for (let shi_i = 0; shi_i < shi.length; shi_i++) {
                    shi_s.innerHTML += "<option value='"+shi_i+"'>"+shi[sheng_s.value][shi_i]+"</option>";
                }
                shi_s.onchange = function(){
                    //每次改变市选项，都将清空市县信息
                    shi_info_str = "";
                    xian_info_str = "";

                    shi_info_str += shi[sheng_s.value][shi_s.value];
                    xian_s.innerHTML = "";
                    xian_s.innerHTML = "<option value=''>---未选择---</option>";
                    for (let xian_i = 0; xian_i < xian.length; xian_i++) {
                        xian_s.innerHTML += "<option value='"+xian_i+"'>"+xian[sheng_s.value][shi_s.value][xian_i]+"</option>";
                    }
                    xian_s.onchange = function(){
                        //每次改变县选项，都将清空县信息
                        xian_info_str = "";
                        xian_info_str += xian[sheng_s.value][shi_s.value][xian_s.value];
                        info.innerText = "您的选择：" + sheng_info_str + " " + shi_info_str + " " + xian_info_str;
                    }
                }
            }
        }
    </script>
    <div class="mydiv">
        <span>省：</span>
        <select id="sheng">
        </select>

        <span>市：</span>
        <select id="shi">
        </select>

        <span>县：</span>
        <select id="xian">
        </select>

        <div id="info">您的选择：</div>
    </div>
</body>
</html>

**自测

  • 实现对数组[0,912,1,6,3,7,11]的冒泡排序。
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>排序</title>
</head>
<body>
    <script>
        let arr = [0,9,12,1,6,3,7,11];
        /**
         * 冒泡排序 
         * 最容易理解的排序算法
         * */
        //由小到大排序
        function small2big(arr){
            for(let i=0;i < arr.length-1;i++){
                for(let j=0;j < arr.length-i-1;j++){
                    if(arr[j]>arr[j+1]){
                        let temp = arr[j];
                        arr[j] = arr[j+1];
                        arr[j+1] = temp;
                    }
                }
            }
            return arr;
        }

        //由大到小排序
        function big2small(arr){
            for(let i=0;i < arr.length-1;i++){
                for(let j=0;j < arr.length-i-1;j++){
                    if(arr[j] < arr[j+1]){
                        let temp = arr[j];
                        arr[j] = arr[j+1];
                        arr[j+1] = temp;
                    }
                }
            }
            return arr;
        }
        console.log("由小到大排序："+small2big(arr));
        console.log("由大到小排序："+big2small(arr));

        /*
        * 快速排序
        *
        * 参数说明：
        *     arr -- 待排序的数组
        *     L -- 数组的左边界(例如，从起始位置开始排序，则l=0)
        *     R -- 数组的右边界(例如，排序截至到数组末尾，则r=a.length-1)
        */
        function quick_sort(arr, L, R){
            if (L < R){
                let i = L;
                let j = R;
                let x = arr[i];
                while (i < j){
                    while(i < j && arr[j] > x)
                        j--; // 从右向左找第一个小于x的数
                    if(i < j)
                        arr[i++] = arr[j];
                    while(i < j && arr[i] < x)
                        i++; // 从左向右找第一个大于x的数
                    if(i < j)
                        arr[j--] = arr[i];
                }
                arr[i] = x;
                quick_sort(arr, L, i-1); /* 递归调用 */
                quick_sort(arr, i+1, R); /* 递归调用 */
            }
            return arr;
        }
        
        console.log("快速排序："+quick_sort(arr,0,arr.length-1));

        /**
         * 插入排序
         * */
        function insertSort(arr) {
            let preIndex, current;
            for (let i = 1; i < arr.length; i++) {
                preIndex = i - 1;
                current = arr[i];
                while (preIndex >= 0 && current < arr[preIndex]) {
                    arr[preIndex + 1] = arr[preIndex];
                    preIndex--;
                }
                arr[preIndex + 1] = current;
            }
            return arr;
        }
        console.log("插入排序：" + insertSort(arr));
    </script>
</body>
</html>

  • 解释JavaScript中的堆和栈数据结构的区别。
    JS变量都存放在内存中，而内存给变量开辟了两块区域，分别为栈区域和堆区域
    栈像个容器，容量小速度快，栈内存的地址分配是连续的，所以在后续也不能对其进行进一步的扩充或者删除。
    堆像个房间，容量较大，堆内存存储变量时没有什么规律可言。

  • a=1，b=2，使用至少三种方法交换变量a和b的值。

<script type="text/javascript">
	var a = 1, b = 2;
	// 第一种方法 借助一个新的变量
	var c;
	c = a;
	a = b;
	b = c;
	// 第二种方法 算数运算
	a = b - a; // a = 1, b = 2
	b = b - a; // a = 1, b = 1 
	a = a + b; // a = 2, b = 1
	// 第三种方法 位运算
	a = a^b;
	b = a^b;
	a = a^b;		
</script>
  • 使用for循环求出0~300之间的奇数之和。
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>奇数之和</title>
</head>
<body>
    <script>
        let info = 0;
        let num = 0;
        for(let i = 0;i <= 300;i++){
            if(i % 2 === 1){
                info++;
                num += i;
            }
        }
        console.log("奇数个数为：" + info);
        console.log("奇数总和为：" + num);
    </script>
</body>
</html>
  • 去除数组[8,7,2,1,5,0,1,9,2]中重复的值，相同的值只保留一个。
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>去除重复</title>
</head>
<body>
    <script>
        let oldarr = [8, 7, 2, 1, 5, 0, 1, 9, 2];
        //原理就是拿新数组和旧数组进行比较，若新数组中没有当前就数组中的值，就将该值加入新数组
        function unique(oldarr) {
            let newarrs = [];
            for(var i = 0; i < oldarr.length; i++){
                //indexOf返回-1时，说明newarrs中没有与oldarr中相同的值
                if(newarrs.indexOf(oldarr[i]) == -1){
                    //为newarrs中加入元素
                    newarrs.push(oldarr[i]);
                }
            }
            return newarrs;
        }
        console.log("数组去重：" + unique(oldarr));
    </script>
</body>
</html>
  • 使用非递归方式对数组[8,7,12,1,5,0,6,9,2]执行折半查找。**
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>二分查找</title>
</head>
<body>
    <script>
        let arr = [8, 7, 12, 1, 5, 0, 6, 9, 2];

        function small2big(arr){
            for(let i=0;i < arr.length-1;i++){
                for(let j=0;j < arr.length-i-1;j++){
                    if(arr[j]>arr[j+1]){
                        let temp = arr[j];
                        arr[j] = arr[j+1];
                        arr[j+1] = temp;
                    }
                }
            }
            return arr;
        }

        function erfen(arr,num) {
            let len = arr.length;
            let tou = 0;
            let wei = len - 1;
            while(tou <= wei){
                let mid = Math.floor((tou + wei)/2);
                if(arr[mid] === num){
                    return mid;
                }
                else if(arr[mid] < num){
                    tou = mid + 1;
                }
                else if(arr[mid] > num){
                    wei = mid - 1;
                }
                else{
                    return;
                }
            }
        }
        console.log("排好序的数组：" + arr);
        //二分查找一定要先排序，查找数字7的索引
        console.log("数字7所在索引位置：" + erfen(small2big(arr),7));
    </script>
</body>
</html>
Friedy星期五
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Y10E_C1-gdi-64-D2.EXE
01-30
7480使用说明书cv_mfc7340_chn_usr_a.pdf
C1认证知识总结——计算机通识+Web基础+JS基础+Web进阶
07-16
csdn见习工程师认证，适合编程小白，零基础学编程。C1认证知识总结——计算机通识+Web基础+JS基础+Web进阶！！！收藏+加关注+评论1 免费获取
c1能力认证-任务03-web基础与布局
Friedy星期五的博客
08-10 154
任务一：使用富文本编辑器 首先，在开源富文本编辑器（https://summernote.org/）中随便输入一段文本。 然后，在源码模式下，查看内容是如何被转变为带标签的文本的，都带了哪些HTML标签。 最后，实现编辑器没有的功能，例如让表格隔行换色，加入JavaScript按钮，试着完成它。 任务二：“所见即所得”式开发 在code.org上一“所见即所得（WYSIWYG）”的方式完成HTML和CSS系列网页开发任务（https://studio.code.org/s/csd2-2019） 如果已注册账
C1认证复习材料（参照考纲,任务）
yuwoxinanA3的博客
02-17 2122
计算机通识 进制转化 我之前在复习数字逻辑电路时写过进制转化，这里不写了，直接给链接，有例题 数字电子技术复习第一章_yuwoxinanA3的博客-CSDN博客 看第1.2数制与编码 位运算 这个也直接给链接 位运算（&、|、^、~、>>、 | 菜鸟教程 储存单位换算 1 字节（Byte）= 8 位（bit） 1KB（Kilo Byte，千字节）= 1024B（Byte） 1MB（Mega Byte，兆字节）= 1024KB 1GB（Giga Byte..
C1能力认证训练题解析 _ 第三部分 _ JavaScript基础
热门推荐
商务合作 | 共同学习 | 携手共进
01-13 9万+
C1见习工程师能力认证训练题 _ 第三部分 _ JavaScript基础
C1基础认证 - 任务04 - 计算机程序逻辑
weixin_50722195的博客
06-20 100
任务一：生成图片广告
瑞萨C1MAx芯片应用手册-软件
01-17
The RH850G3MH features compatibility with the instruction set for all 32-bit RISC microcontrollers of the RH850G3M Series, but has even better performance
计算机的逻辑部件优秀文档.ppt
11-17
"计算机的逻辑部件优秀文档.ppt" 计算机的逻辑部件是计算机系统的核心组件之一，它们负责执行计算机的基本运算和逻辑操作。其中，逻辑部件是指计算机中负责执行逻辑运算和算术运算的电路单元。 2.4 计算机中常用的...
分布式电网动态电压恢复器模拟装置设计与实现.doc
最新发布
07-06
本装置采用DC-AC及AC-DC-AC双重结构，前级采用功率因数校正（PFC）电路完成AC-DC变换，改善输入端电网电能质量。后级采用单相全桥逆变加变压器输出的拓扑结构，输出功率50W。整个系统以TI公司的浮点数字信号控制器TMS320F28335为控制电路核心，采用规则采样法和DSP片内ePWM模块功能实现SPWM波，采用DSP片内12位A/D对各模拟信号进行采集检测，简化了系统设计和成本。本装置具有良好的数字显示功能，采用CPLD自行设计驱动的4.3英寸彩色液晶TFT-LCD非常直观地完成了输出信号波形、频谱特性的在线实时显示，以及输入电压、电流、功率，输出电压、电流、功率，效率，频率，相位差，失真度参数的正确显示。本装置具有开机自检、输入电压欠压及输出过流保护，在过流、欠压故障排除后能自动恢复。
【无人机通信】基于matlab Stackelberg算法无人机边缘计算抗干扰信道分配【含Matlab源码 4957期】.mp4
07-06
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
电网公司数字化转型规划与实践两个文件.pptx
07-05
电网公司数字化转型规划与实践两个文件.pptx
React Native Ruby 前后端分离系统案例介绍文档
07-06
React Native Ruby 前后端分离系统案例介绍文档
http请求方法.docx
07-06
HTTP（Hypertext Transfer Protocol）定义了一些常见的请求方法（也称为动词或谓词），用于指示对服务器执行的操作类型。以下是常见的 HTTP 请求方法： GET：从服务器获取资源。GET 方法的请求参数一般附在 URL 后面，通过问号传参形式传递。 POST：向服务器提交数据，常用于提交表单或上传文件等操作。POST 方法的请求参数一般包含在请求体中。 PUT：向服务器发送数据，用来创建或更新资源。通常用于更新整个资源，但不限于此。 DELETE：请求服务器删除指定的资源。 HEAD：类似于 GET 方法，但服务器只返回响应头部，不返回实际内容。主要用于获取资源的元信息。 PATCH：部分更新资源，用来对资源进行局部修改。 OPTIONS：获取目标资源所支持的通信选项，常用于跨域请求的预检。 TRACE：回显服务器收到的请求，主要用于测试或诊断。 CONNECT：HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。 这些方法定义了客户端与服务器之间的交互方式，每种方法都有特定的语义和使用场景。在实际开发中，选择合适的方法非常重
ROS的一些基本概念和语法介绍 ROS提供了丰富的工具和库，用于构建复杂的机器人应用.docx
07-06
ROS的一些基本概念和语法介绍。ROS提供了丰富的工具和库，用于构建复杂的机器人应用.docx
利达余压调试软件说明书
07-05
利达余压调试软件说明书，介绍利达旗下品牌的余压系统调试软件的使用方法
基于Vue的一个前后端分离系统的介绍及代码示例的介绍.docx
07-06
基于Vue的一个前后端分离系统的介绍及代码示例的介绍.docx
城乡规划相关-第八章城市生态与城市环境.pdf
07-06
城乡规划相关-第八章城市生态与城市环境.pdf，思维导图，适合打印，城乡规划考试必备
安卓古籍库v9.2.0纯净无广告
07-06
软件介绍 这是一款免费阅读的书籍app，有听书功能包含几乎所有古籍，喜欢古籍，喜欢学习各方面知识不可错过的软件，包含了古代各方面知识，古代科技，中医，科技，神话小说，道佛，诸子百家，二十六史记等等你能想到的里面几乎都有。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Friedy星期五

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值