提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

认证计算机 任务 能力
2023-09-11 14:22:44 时间

任务一：生成图片广告

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

在这里插入图片描述
代码块：
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%);
}
实现效果如下：

在这里插入图片描述

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

代码块：
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;
}
实现效果如下：

在这里插入图片描述

· 最后，用Javascript代码实现多张广告图片轮播效果：在页面正中每隔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实现网页上常见的【省市区多级联动下拉菜单】（理解树型数据结构）

在这里插入图片描述
在这里插入图片描述
代码块：
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

var province = document.getElementById("prov");
var city = document.getElementById("cit");
var district = document.getElementById("dist");

var arrayProvince = ["北京市", "天津市", "河北省"];
var arrayCity = [ ["市辖区"], ["市辖区"], ["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"]];
var arrayDistrict = [
    [['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '顺义区', '通州区', '大兴区', '房山区', '门头沟区', '昌平区', '平谷区', '密云区', '怀柔区', '延庆区']],
    [['和平区', ' 河东区', ' 河西区', ' 南开区', ' 河北区', ' 红桥区', ' 滨海新区', ' 东丽区', ' 西青区', ' 津南区', ' 北辰区', ' 武清区', ' 宝坻区', ' 宁河区', ' 静海区', ' 蓟州区']],
    [
        ['长安区', '桥西区', '新华区', '井陉矿区', '裕华区', '藁城区', '鹿泉区', '栾城区', '晋州市', '新乐市', '辛集市', '井陉县', '正定县', '行唐县', '灵寿县', '高邑县', '深泽县', '赞皇县', '无极县', '平山县', '元氏县', '赵县'],
        ['路北区', '路南区', '古冶区', '开平区', '丰南区', '丰润区', '曹妃甸区', '遵化市', '迁安市', '滦州市', '滦南县', '乐亭县', '迁西县', '玉田县'],
        ['海港区', '山海关区', '北戴河区', '抚宁区', '青龙满族自治县', '昌黎县', '卢龙县'],
        ['邯山区', '丛台区', '复兴区', '峰峰矿区', '肥乡区', '永年区', '武安市', '临漳县', '成安县', '大名县', '涉县', '磁县', '邱县', '鸡泽县', '广平县', '馆陶县', '曲周县', '魏县'],
        ['襄都区', '信都区', '任泽区', '南和区', '南宫市', '沙河市', '临城县', '内丘县', '柏乡县', '隆尧县', '巨鹿县', '新河县', '广宗县', '平乡县', '威县', '清河县', '临西县', '宁晋县'],
        ['竞秀区', '莲池区', '满城区', '清苑区', '徐水区', '安国市', '高碑店市', '涿州市', '定州市', '涞水县', '阜平县', '定兴县', '唐县', '高阳县', '容城县', '涞源县', '望都县', '安新县', '易县', '曲阳县', '蠡县', '顺平县', '博野县', '雄县'],
        ['桥东区', '桥西区', '宣化区', '下花园区', '崇礼区', '万全区', '张北县', '康保县', '沽源县', '尚义县', '蔚县', '阳原县', '怀安县', '涿鹿县', '赤城县', '怀来县'],
        ['双桥区', '双滦区', '鹰手营子矿区', '平泉市', '承德县', '兴隆县', '滦平县', '隆化县', '丰宁满族自治县', '宽城满族自治县', '围场满族蒙古族自治县'],
        ['运河区', '新华区', '泊头市', '黄骅市', '河间市', '任丘市', '沧县', '青县', '东光县', '海兴县', '盐山县', '肃宁县', '南皮县', '吴桥县', '献县', '孟村回族自治县'],
        ['广阳区', '安次区', '霸州市', '三河市', '固安县', '永清县', '香河县', '大城县', '文安县', '大厂回族自治县'],
        ['桃城区', '冀州区', '深州市', '枣强县', '武邑县', '武强县', '饶阳县', '安平县', '故城县', '阜城县', '景县']
    ]
];

var allArray;
function inputArr(arr, event) {
    for (var i=0; i<arr.length; i++) {
        var option = new Option(arr[i], i);
        event.appendChild(option);
    }
}

inputArr(arrayProvince, province);

province.onchange = function() {
    city.options.length = 1;
    district.options.length = 1;
    var index = this.value;
    var arrayCityNext = arrayCity[index];
    allArray = arrayDistrict[index];
    inputArr(arrayCityNext, city);
}

city.onchange = function() {
    district.options.length = 1;
    var index = this.value;
    var arrayDistrictNext = allArray[index];
    inputArr(arrayDistrictNext, district);
}

相关文章