C站能力认证任务关卡1-4 计算机程序逻辑

- 日理万妓 2022-10-16 15:22 156阅读 0赞

#### 任务一：生成图片广告 ####

##### · 首先，能够用HTML+CSS+Javascript在页面正中生成一幅广告图片，如下： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70]  
代码块：  
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="style.css" /> //css文件与html在同一文件夹内
    <title>无标题文档</title>
    </head>
    
    <body>
        <div class="img-body">
            //图片是当前exercise html文件夹内的图片，可根据自己实际情况调整
            <img src="./exercise html/123.jpg" alt="nuclear station" width="746" height="497" />     </div> 
    </body>
    </html>

CSS

@charset "utf-8";
    /* CSS Document */
    
    .img-body {
        
        position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    }

##### 实现效果如下： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center]

##### · 其次，用Javascript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局，如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 1] #####

代码块：  
HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" />
        <title>Title</title>
    </head>
    <body>
    <div class="clearfix" id="demo"></div>
    <script>
        var pics=["./exercise html/123.jpg", "./exercise html/124.jpg", "./exercise html/125.jpg", "./exercise html/126.jpg", "./exercise html/127.jpg"];
        var i;
        var text = "";
        var len = pics.length;
        for(i=0; i<len; i++){
          
            text += '<img class="box" src="' + pics[i] + '"width="310" height="180">' + " ";
        }
        document.getElementById("demo").innerHTML = text;
    </script>
    </body>
    </html>

CSS

@charset "utf-8";
    /* CSS Document */
    * {
        
    	box-sizing: border-box;
    }
    
    .box {
        
    	float: left;
    	width: 20%;
    	height: 200px;
    	padding: 5px;
    }
    
    .clearfix::after {
        
    	content: "";
    	clear: both;
    	display: table;
    }

##### 实现效果如下： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 2]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 3]

###### 1. 利用Javascript实现：（题目要求） ######

代码块：  
HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" />
        <title></title>
    </head>
    <body>
    
    <div id="demo"></div>
    
    </body>
    
    <script>
        var text = "";
        var pics = ["./exercise html/123.jpg", "./exercise html/124.jpg", "./exercise html/125.jpg", "./exercise html/126.jpg", "./exercise html/127.jpg"]
        var i = 0;
        var id = setInterval(frame, 3000);
        function frame() {
          
            if (i == 5) {
          
                i = 0;
            } else {
          
                text = '<img src="' + pics[i++] + '" width="600" height="400">';
                document.getElementById("demo").innerHTML = text;
            }
        }
    </script>
    
    </html>

CSS

@charset "utf-8";
    /* CSS Document */
    
    div {
        
    	margin: 0;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	transition-timing-function: linear;
    }

###### 2. 利用CSS实现： ######

代码块：  
HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" />
        <title></title>
    </head>
    <body>
    
    <div></div>
    
    </body>
    </html>

CSS

@charset "utf-8";
    /* CSS Document */
    
    div {
        
    	width: 600px;
    	height: 400px;
    	margin: 0;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	animation-name: example;
    	animation-duration: 21s;
    	animation-fill-mode: forwards;
    	animation-iteration-count: infinite;
    	background-repeat: no-repeat;
    }
    
    @keyframes example {
        
        0% {
         background-image: url("./exercise html/123.jpg");
    		background-size: 600px 400px;
    	}
    	14% {
        
    		background-image: url("./exercise html/124.jpg");
    		background-size: 600px 400px;
    	}
    	28% {
        
    		background-image: url("./exercise html/125.jpg");
    		background-size: 600px 400px;
    	}
    	42% {
        
    		background-image: url("./exercise html/126.jpg");
    		background-size: 600px 400px;
    	}
    	56% {
        
    		background-image: url("./exercise html/127.jpg");
    		background-size: 600px 400px;
    	}
    	70% {
        
    		background-image: url("./exercise html/456.jpg");
    		background-size: 600px 400px;
    	}
    	84% {
        
    		background-image: url("./exercise html/789.jpg");
    		background-size: 600px 400px;
    	}
    	100% {
        
    		background-image: url("./exercise html/123.jpg");
    		background-size: 600px 400px;
    	}
    }

##### 实现效果如下： #####

CSS实现图片轮播

#### 拓展：实现多级联动菜单 ####

##### · 用HTML+CSS+JavaScript实现网页上常见的【省市区多级联动下拉菜单】（理解树型数据结构） #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 2]  
代码块：  
HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="style.css" />
      <title></title>
    </head>
    <body>
    
    <div>
    
      <select id="prov">
        <option value="">- 省份 -</option>
      </select>
      <select id="cit">
        <option value="">- 市 -</option>
      </select>
      <select id="dist">
        <option value="">- 区 -</option>
      </select>
    
    </div>
    
    </body>
    
    <script type="text/javascript" src="menu.js"></script>
    
    </html>

CSS

@charset "utf-8";
    /* CSS Document */
    
    div {
        
    	position: absolute;
    	top: 10%;
    	left: 50%;
    	margin: 0;
    	transform: translate(-50%, -50%);
    }
    
    .box {
        
    	cursor: pointer;
    	width: 150px;
    	height: 30px;
    	border: 1px solid lightgrey;
    	font-size: 18px;
    	text-align: center;
    	text-align-last: center;
    	border-radius: 5px;
    }
    
    .box:hover {
        
    	border-color: lightblue;
    }
    
    select {
        
    	text-align: center;
    	text-align-last: center;
    	text-align-all: center;
    	margin: 0;
    	width: 200px;
    	height: 30px;
    	border-color: lightgrey;
    	border-radius: 5px;
    	font-size: 16px;
    	cursor: pointer;
    }
    
    select:hover {
        
    	border-color: skyblue;
    }
    
    option {
        
    	opacity: 1;
    }
    
    option:hover {
        
    	background-color: lightyellow;
    }
    
    .dropdown {
        
    	position: relative;
    	display: inline-block;
    }
    
    /* 下拉内容（默认隐藏） */
    .dropdown-content {
        
    	display: none;
    	position: absolute;
    	background-color: #f9f9f9;
    	min-width: 160px;
    	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    	z-index: 1;
    }
    
    /* 下拉链接 */
    .dropdown-content a {
        
    	color: black;
    	padding: 12px 16px;
    	text-decoration: none;
    	display: block;
    }
    
    /* 悬停时更改下拉链接的颜色 */
    .dropdown-content a:hover {
        background-color: #f1f1f1}
    
    /* 悬停时显示下拉菜单 */
    .dropdown:hover .dropdown-content {
        
    	display: block;
    }

JavaScript

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70]: /images/20221014/fe74e525df5c4050bb9f80ee219f7919.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/64f10cd203f3474c8cb8495675a466bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 1]: /images/20221014/625f1861a1ac4ee7aa178371a492183b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 2]: /images/20221014/b9470de4215047578d3031cc027e7471.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 3]: /images/20221014/c39a5d864c7443a8b4ecfb7097b356be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221014/2ac448a434d9416a9f8052ff681d0e26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221014/3e568a99e1ca4f3f813611c4c4b759da.png