C1之路 | 训练任务04-JavaScript
Posted 只想婧婧的小菜鸡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了C1之路 | 训练任务04-JavaScript相关的知识，希望对你有一定的参考价值。
文章目录
任务一：生成图片广告
1. 在页面正中生成一幅图片广告
为了训练一下自己的 css水平，没用图片
<!DOCTYPE html>
<html>
<head>
<title>#</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.a{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
height: 400px;
background-color: yellow;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<div class="a">
这是广告
</div>
</body>
</html>
2. 用JS数组放置多张图片，同时动态计算不同广告位之间的布局，实现水平等间距布局
<!DOCTYPE html>
<html>
<head>
<title>#</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.a{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
height: 400px;
background-color: yellow;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<div id="a">
</div>
<script>
create();
function create(){
var imgs = ["1.png","2.png","3.png"]
for(var i = 0;i< imgs.length;i++){
var img = document.createElement("img");
img.setAttribute("src",imgs[i]);
img.style.marginLeft='30px';
document.getElementById('a').appendChild(img);
}
}
</script>
</body>
</html>
轮播
<!DOCTYPE html>
<html>
<head>
<title>#</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#im{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
height: 400px;
background-color: yellow;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<div id="a">
<img id="im">
</div>
<script>
a = 0;
imgs = ["1.png","2.png","3.png"]
img = document.getElementById("im")
img.setAttribute("src",imgs[a]);
a++;
img.style.marginLeft='40px';
var int=self.setInterval("create()",3000);
function create(){
img.setAttribute("src",imgs[a]);
if(a == imgs.length - 1){
a = 0
}else{
a++;
}
}
</script>
</body>
</html>
拓展
<html>
<head>
<meta charset=UTF-8">
<title>#</title>
<script type="text/javascript">
var cityList = new Array();
var quList = new Array();
cityList['北京'] = ['北京'];
cityList['山东'] = ['菏泽市', '曹县1', '曹县2', '临沂市'];
cityList['上海'] = ['浦东', '浦东2', '浦东3'];
cityList['甘肃'] = ['兰州市', '武威市', '酒泉市'];
quList['北京'] = ['a区', 'b区', '3区', '4区'];
quList['杭州市'] = ['5区', 'c区', '7区', '8区'];
quList['温州市'] = ['9区', '10区', 'd区', '12区'];
quList['西安'] = ['13区', '14区', '15区', '16区'];
quList['宝鸡'] = ['17区', '18区', '19区', '3区'];
quList['兰州市'] = ['21区', 'f区', '23区', '24区'];
window.onload = allData;
function allData() {
var shengfen = document.getElementById('shengfen');
for (var sf in cityList) {
shengfen.add(new Option(sf, sf));
}
}
function changeCity() {
var chengshi = document.getElementById('chengshi');
var sheng = document.getElementById('shengfen').value;
chengshi.options.length = 1;
for (var cs in cityList[sheng]) {
chengshi.add(new Option(cityList[sheng][cs], cityList[sheng][cs]));
}
}
function changequ() {
var shiqu = document.getElementById('shiqu');
var cheng = document.getElementById('chengshi').value;
shiqu.options.length = 1;
for (var sh in quList[cheng]) {
shiqu.add(new Option(quList[cheng][sh], quList[cheng][sh]));
}
}
</script>
</head>
<body>
<br />
<select id="shengfen" style="width:200px " onchange="changeCity()">
<option >--选择省份--</option>
</select>
<select id="chengshi" style="width:200px " onchange="changequ()">
<option >--选择城市--</option>
</select>
<select id="shiqu" style="width:200px">
<option>--选择区县--</option>
</select>
</body>
</html>
自测
1.实现对数组[0,9,12,1,6,3,7,11]的冒泡排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>冒泡排序</title>
</head>
<body>
<script>
var array = [0, 9, 12, 1, 6, 3, 7,11];
for (var i = 0; i < array.length - 1; i++) {
for (var j = i + 1; j < array.length; j++) {
if (array[j] < array[i]) {
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
}
alert(array)
</script>
</body>
</html>
2.解释JavaScript在的堆和栈数据结构的区别
答:
栈是一种具有后进先出性质的数据结构
堆是一种经过排序的树形数据结构
3,a=1,b=2,用三种方法交换ab的值
1.设中间变量temp,
temp=a,a=b,b=temp;
2.交换ab两个值的地址,
3.a+1,b-1
4.使用for循环找出0-300的奇数和.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var sum = 0;
for (var i = 0; i <= 300; i++) {
if (i % 2 == 1)
sum += i;
}
alert(sum);
</script>
</body>
</html>
5.取出数组[8,7,2,1,5,0,1,9,2]中重复的值,相同的值只保留一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [8, 7, 2, 1, 5, 0, 1, 9, 2];
var set = new Set();
arr.forEach((item) => set.add(item));
var a = Array.from(set);
console.log(a);
</script>
</body>
</html>
6.使用非递归方式对数组[8,7,12,1,5,0,6,9,2]执行折半查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function binary_search(arr, key) {
var low = 0;
var high = arr.length;
while (low <= high) {
var mid = parseInt((low + high) / 2);
if (arr[mid] == key) {
return mid以上是关于C1之路 | 训练任务04-JavaScript的主要内容，如果未能解决你的问题，请参考以下文章