Day03-循环和数组

纯纯不会写代码

已于 2023-02-02 16:29:09 修改

阅读量56

点赞数

分类专栏： JavaScript基础文章标签： html css 前端

于 2022-10-23 17:38:26 首次发布

本文链接：https://blog.csdn.net/weixin_45831040/article/details/127477121

版权

JavaScript基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Day03-循环和数组

一、循环-for
二、数组
三、综合案例-根据数据生成柱形图

一、循环-for

continue和break的区别

continue：结束本次循环，继续下次循环

break：跳出所在的循环

练习：九九乘法表

<!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>
    <style>
        div {
            display: inline-block;
            height: 25px;
            width: 100px;
            line-height: 25px;
            margin: 5px;
            background-color: pink;
            border: 1px solid hotpink;
            color: deeppink;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        for(let i = 1; i <= 9; i++) {
            for(let j = 1; j <= i; j++) {
                document.write(`
                <div>${j} × ${i} = ${j*i}</div>
                `)
            }
            document.write(`<br>`)
        }
    </script>
</body>
</html>

在这里插入图片描述

二、数组

2.1 数组的基本使用

声明语法
在这里插入图片描述

取值语法

长度：数组中数据的个数，通过数组的length属性获得

2.2 操作数组

数组本质是数据集合, 操作数据无非就是 增删改查 语法：
在这里插入图片描述
数组增加新的数据

数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

在这里插入图片描述

arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

数组删除元素

数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值

在这里插入图片描述

数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
在这里插入图片描述

数组. splice() 方法 删除指定元素

start 起始位置:指定修改的开始位置（从0计数）

deleteCount:表示要移除的数组元素的个数，如果省略则默认从指定的起始位置删除
到最后

2.3 冒泡排序

冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]。

<!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>
        let arr = [5,6,1,8,7]
        console.log(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]) {
                    temp = arr[j]
                    arr[j] = arr[j+1]
                    arr[j+1] = temp
                }
            }
        }
        console.log(arr)
    </script>
</body>
</html>

在这里插入图片描述

三、综合案例-根据数据生成柱形图

求：用户输入四个季度的数据，可以生成柱形图

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            flex-direction: column;
            justify-content: space-between;
        }

        .box div span {

            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>
</head>

<body>
    <script>
        let arr = []
        for(let i = 0; i < 4 ;i++){
            arr[i] = prompt(`请输入第${i+1}季度的数据`)
        }
        document.write(`<div class="box">`)
        for(let j = 0; j < 4; j++){
            document.write(`
            <div style="height: ${arr[j]}px;">
            <span>${arr[j]}</span>
            <h4>第${j+1}季度</h4>
            </div>
            `)
        }
        document.write(` </div>`)
    </script>
</body>

</html>

在这里插入图片描述

纯纯不会写代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Day03-循环和数组

它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]。deleteCount:表示要移除的数组元素的个数，如果省略则默认从指定的起始位置删除。将一个或多个元素添加到数组的末尾，并返回该数组的新长度。将一个或多个元素添加到数组的开头，并返回该数组的新长度。：数组中数据的个数，通过数组的length属性获得。
复制链接

扫一扫