CSDN C1认证任务四 ------- 计算机程序逻辑

最新推荐文章于 2022-06-21 10:58:46 发布

在森林中麋了鹿

最新推荐文章于 2022-06-21 10:58:46 发布

阅读量182

点赞数

分类专栏：杂谈文章标签： js

本文链接：https://blog.csdn.net/m0_51111980/article/details/117426681

版权

杂谈专栏收录该内容

15 篇文章 4 订阅

订阅专栏

一、任务一：实现轮播图

效果图：

鼠标点击时切换

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style>
        #box {
            height: 250px;
            width: 600px;
            border: 1px solid white;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        #imgbox {
            height: 250px;
            width: 1800px;
            position: absolute;
        }

        #imgbox>img {
            height: 250px;
            width: 600px;
            float: left;
        }

        ul {
            width: 200px;
            height: 20px;
            list-style: none;
            position: absolute;
            left: 0;
            right: 0;
            top: 220px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
        }

        li {
            width: 10px;
            height: 10px;
            float: left;
            background: none;
            border: 1px solid white;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="imgbox">
            <img src="1.jpg" />
            <img src="2.jpg" />
            <img src="3.jpg" />
        </div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var imgbox = document.getElementById("imgbox");
        var li = document.getElementsByTagName("li");
       
        //点击控制
        li[0].style.background = "white"; 
        li[0].onmouseenter = function () { 
            this.style.background = "white"; 
            imgbox.style.left = "0"; 
            li[1].style.background = "";
            li[2].style.background = "";
        }
        li[1].onmouseenter = function () {
            this.style.background = "white";
            imgbox.style.left = "-600px";
            li[0].style.background = "";
            li[2].style.background = "";
        }
        li[2].onmouseenter = function () {

            this.style.background = "white";
            imgbox.style.left = "-1200px";
            li[1].style.background = "";
            li[0].style.background = "";
        }
    </script>
</body>

</html>

二、任务二：实现省市区联动菜单栏

效果图：

在这里插入图片描述

代码：

<!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8">
          <title>省市联动</title>
          <script>
              var provinceArr=new Array(5);
              provinceArr[0]=new Array("福州市","泉州市","厦门市","福安市","南安市");
              provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市");
             provinceArr[2]=new Array("石家庄市","唐山","秦皇岛","邯郸");
             provinceArr[3]=new Array("西安市","宝鸡市","延安");
             provinceArr[4]=new Array("菏泽市","济南市","青岛");
             function provinceChange(province){
                 //console.log(provinceArr[province.value]);                 var city=document.getElementById("city");
                if(province.value=="-1"){
                     city.innerHTML='<option  value=\'-1\'>--请选择--</option>';
                     return;
                     
                 }
                 
                 var cityArr=provinceArr[province.value];
                 city.options.length=0;
                 for(var i=0;i<cityArr.length;i++){
                     var cityOption=document.createElement("option");//获取元素标签option
                     cityOption.innerText=cityArr[i];//把数组里面城市的信息显示到id为city的下拉列表中
                     city.appendChild(cityOption);
                 }
             }
             
         </script>
     </head>
     <body>
         
         <select οnchange="provinceChange(this)">
             <!--显示省份-->
             <option  value="-1">--请选择--</option>
             <option value="0">福建省</option>
             <option value="1"> 河南省</option>
             <option value="2">河北省</option>
             <option value="3">陕西省</option>
             <option value="4">山东省</option>
             
        </select>         <select id="city">
             <!--显示市-->
             <option  value="-1">--请选择--</option>
         </select>
     </body>
 </html>

三、自测

1 .实现对数组 [ 0,9,12,1,6,3,7,11 ] 的冒泡排序

代码 :

var arr = [0, 9, 12, 1, 6, 3, 7, 11];

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

arr = arrBubbleSort(arr);
console.log(arr);

2 . 解释JS中堆栈的区别

堆（heap）用于复杂数据类型（引用类型）分配空间，例如数组对象、object对象；它是运行时动态分配内存的，因此存取速度较慢。

栈（stack）中主要存放一些基本类型的变量和对象的引用，(包含池，池存放常量),其优势是存取速度比堆要快，并且栈内的数据可以共享，但缺点是存在栈中的数据大小与生存期必须是确定的，缺乏灵活性。

3 . 交换 a 和 b 的值

代码 :

// 中间变量替换
var c = a;
a = b;
b = c;

// 两数之和计算
a += b;
b = a - b;
a = a - b;

// 解构赋值
[a, b] = [b, a];

4 .用for循环求出0-300的奇数和

代码：

var number = 0;
for (let i = 0; i <= 300; i++) {
	if (i % 2 == 1)
		number += i;
	}
console.log(number);

5 .去重

代码：

var arr = [8, 7, 2, 1, 5, 0, 1, 9, 2];

function arrValueOfSingle(arr) {
	let newArr = [];
	for (let index in arr) {
		if (arr.lastIndexOf(arr[index]) == index) {
			newArr.push(arr[index]);
		}
	}
	return newArr;
}

arr = arrValueOfSingle(arr);
console.log(arr);

6 . 二分查找

代码：

var arr[9] = {8, 7, 12, 1, 5, 0, 6, 9, 2};
var x = 4;
var l = 0, var r = 8;
arr.sort()
while (l <= r) {
  var mid = ( l + r ) / 2;
  if (mid >= x) r = mid;
  else  l = mid + 1;
}