JavaWeb(4)——HTML、CSS、JS 快速入门

这篇具有很好参考价值的文章主要介绍了JavaWeb(4)——HTML、CSS、JS 快速入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、JavaScript 数组

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

 数组筛选(查找,将原来数组中的某些数据去除)
<!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 = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
    // 1. 声明新的空的数组
    let newArr = []
    // 2. 遍历旧数组
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] >= 10) {
        // 3. 满足条件 追加给新的数组
        newArr.push(arr[i])
      }
    }
    // 4. 输出新的数组
    console.log(newArr)
  </script>
</body>

</html>

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

数组筛选(查找,数组中的最大和最小值)
<!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 = [2, 6, 1, 7, 400, 55, 88, 100]
    // max里面要存的是最大值
    let max = arr[0]
    // min 要存放的是最小值
    let min = arr[0]
    // 遍历数组
    for (let i = 1; i < arr.length; i++) {
      // 如果max 比 数组元素里面的值小,我们就需要把这元素赋值给 max
      // if (max < arr[i]) max = arr[i]
      max < arr[i] ? max = arr[i] : max
      // 如果min 比 数组元素大, 我们就需要把数组元素给min
      // if (min > arr[i]) {
      //   min = arr[i]
      // }
      min > arr[i] ? min = arr[i] : min
    }
    // 输出 max
    console.log(`最大值是: ${max}`)
    console.log(`最小值是: ${min}`)
  </script>
</body>
</html>

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

数组修改(数组中每个元素末尾都加新元素)
<!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 = []
    // console.log(arr)
    // // console.log(arr[0])  // undefined
    // arr[0] = 1
    // arr[1] = 5
    // console.log(arr)
    let arr = ['pink', 'red', 'green']
    // 修改
    // arr[0] = 'hotpink'
    // console.log(arr)
    // 给所有的数组元素后面加个老师  修改
    for (let i = 0; i < arr.length; i++) {
      // console.log(arr[i])
      arr[i] = arr[i] + '老师'
    }
    console.log(arr)

  </script>
</body>

</html>

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

 数组修改(数组中每个元素开头都加新元素)

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

<!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 = ['pink', 'hotpink']
    // 新增  push 推末尾
    // console.log(arr.push('deeppink'))  // 3
    // arr.push('deeppinnk', 'linghtpink')
    // console.log(arr)
    // 开头追加
    arr.unshift('red')
    console.log(arr)
  </script>
</body>

</html>
 数组删除指定元素

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

<!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 = ['red', 'green', 'blue']
    // console.log(arr.pop()) // blue
    // 1.pop() 删除最后一个元素
    // arr.pop()
    // arr.pop()
    // console.log(arr)
    // 2. shift() 删除第一个元素
    // arr.shift()
    // console.log(arr)
    // 3. splice 删除指定元素  splice(起始位置-索引号, 删除几个)
    arr.splice(1, 1)  // 是从索引号1的位置开始删, 只删除1个
    // arr.splice(1) // 从green 删除到最后
    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>
</head>

<body>
  <script>
    // let arr = [5, 4, 3, 2, 1]
    let arr = [2, 4, 3, 5, 1]
    // 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]) {
    //       // 交换2个变量
    //       let temp = arr[j]
    //       arr[j] = arr[j + 1]
    //       arr[j + 1] = temp
    //     }
    //   }
    // }
    // arr.sort()  // 排序
    // sort 升序排列
    // arr.sort(function (a, b) {
    //   return a - b
    // })
    // sort() 降序
    arr.sort(function (a, b) {
      return b - a
    })
    console.log(arr)

    // let num1 = 10
    // let num2 = 20
    // let temp = num1
    // num1 = num2
    // num2 = temp 
  </script>
</body>

</html>

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

这段代码实现了一种冒泡排序算法:

  1. 首先,定义了一个数组 arr = [2, 4, 3, 5, 1],其中包含了待排序的元素。

  2. 然后,调用了数组的 sort() 方法来排序数组中的元素。sort() 方法接受一个回调函数作为参数,该回调函数用于指定排序的规则。

  3. 回调函数通过比较两个元素 a 和 b 的大小来确定它们在排序结果中的顺序。在这里,回调函数使用了一个简单的比较规则,即 b - a。如果 b 大于 a,则返回一个正数,表示 b 应该排在 a 前面;如果 b 小于 a,则返回一个负数,表示 b 应该排在 a 后面;如果 b 等于 a,则返回 0,表示它们的相对顺序不变。

  4. 冒泡排序的核心思想是,重复地遍历数组,每次比较相邻的两个元素,如果它们的相对顺序不符合要求(按照回调函数的规则),则交换它们的位置,直到整个数组按照要求排好序。

  5. 最后,将排序后的数组输出到控制台使用 console.log() 方法打印出来。在这个例子中,输出结果是 [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>
    <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>
        // 1. 四次弹框效果
        // 声明一个新的数组
        let arr = []
        for (let i = 1; i <= 4; i++) {
            // let num = prompt(`请输入第${i}季度的数据:`)
            // arr.push(num)
            arr.push(prompt(`请输入第${i}季度的数据:`))
            // push记得加小括号,不是等号赋值的形式
        }
        // console.log(arr)  ['123','135','345','234']
        // 盒子开头
        document.write(` <div class="box">`)

        // 盒子中间 利用循环的形式  跟数组有关系
        for (let i = 0; i < arr.length; i++) {
            document.write(`
              <div style="height: ${arr[i]}px;">
                <span>${arr[i]}</span>
                <h4>第${i + 1}季度</h4>
              </div>          
            `)
        }
        // 盒子结尾
        document.write(` </div>`)
    </script>
</body>

</html>

        首先,在 HTML 的 <head> 标签中定义了一些 CSS 样式,用于布局和美化页面。这些样式设置了一个名为 "box" 的容器,并定义了容器内部每个柱状图的样式。

* 选择器:

设置所有元素的 margin 和 padding 属性为 0,取消默认的边距和内边距。

.box 类选择器:定义一个名为 "box" 的容器的样式。具体含义如下:

display: flex;:将容器设置为弹性布局,使其内部元素可以灵活排列。
width: 700px;:设置容器的宽度为 700 像素。
height: 300px;:设置容器的高度为 300 像素。
border-left: 1px solid pink;:设置容器的左边框为粉色实线。
border-bottom: 1px solid pink;:设置容器的底边框为粉色实线。
margin: 50px auto;:将容器水平居中,并在上下方向上有 50px 的外边距。
justify-content: space-around;:在容器内部沿主轴方向(水平方向)均匀分布元素,两端留有空白间距。
align-items: flex-end;:在容器内部沿交叉轴方向(垂直方向)将元素对齐到底部。
text-align: center;:将容器内元素的文本内容居中对齐。

.box>div 是一个 CSS 选择器,表示选择 .box 容器内的直接子元素为 <div> 的元素。具体含义是选择容器 .box 内的直接子级 <div> 元素,并对其应用相应的样式规则。

在给定的样式代码中,.box>div 选择器被用来定义了 .box 容器内的子级 <div> 元素的样式。通过这个选择器可以对柱状图中的每个柱子进行样式设置,包括宽度、背景颜色等。

.box>div 类选择器:定义容器内 <div> 元素的样式。具体含义如下:

display: flex;:将 <div> 元素设置为弹性布局,使其内部元素可以灵活排列。
width: 50px;:设置 <div> 元素的宽度为 50 像素。
background-color: pink;:设置 <div> 元素的背景颜色为粉色。
.box div span 选择器:定义 <div> 元素内的 <span> 标签的样式。具体含义如下:

margin-top: -20px;:将 <span> 元素向上移动 20 像素,用于调整显示位置。
.box div h4 选择器:定义 <div> 元素内的 <h4> 标签的样式。具体含义如下:

margin-bottom: -35px;:将 <h4> 元素向上移动 35 像素,用于调整显示位置。
width: 70px;:设置 <h4> 元素的宽度为 70 像素。
margin-left: -10px;:将 <h4> 元素向左移动 10 像素,用于调整显示位置。

接下来,在 HTML 的 <body> 标签中,通过 JavaScript 代码实现了以下功能:
  1. 定义了一个空数组 arr,用于存储用户输入的四个季度的数据。

  2. 使用 for 循环遍历四次,每次弹出一个对话框(prompt),要求用户输入一个季度的数据,并将用户输入的数据添加到数组 arr 中。

  3. 使用 document.write() 方法输出 HTML 代码,开始构建包含柱状图的 <div> 容器。该容器的类名为 "box"。

  4. 使用 for 循环遍历数组 arr,在容器内部创建 <div> 元素来表示每个柱状图。根据用户输入的数据设置每个柱状图的高度(style="height: ${arr[i]}px;")。

  5. 在每个柱状图中,使用 <span> 标签显示对应季度的数据(${arr[i]}),使用 <h4> 标签显示季度的序号(第${i + 1}季度)。

  6. 最后,使用 document.write() 方法输出结束标记 </div>,完成整个柱状图的构建。

这段代码通过用户输入的数据动态生成了一个柱状图,并在页面上展示出来。每个柱状图的高度对应季度的数据值,通过这种方式可以直观地比较不同季度的数据大小。

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

二、JavaScript 函数

函数命名

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

 函数传参

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

 函数返回值

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

break结束的是循环,return结束的是函数 ,返回多个数据可以使用数组。

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

 JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

 函数作用域

作用域链:采取就近原则的方式来查找变量最终的值

匿名函数

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

 没有名字的函数, 无法直接使用。 使用方式:①  函数表达式   ;② 立即执行函数

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

 JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

<!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>
    // age = age + 1
    // 1. 用户输入
    let second = +prompt('请输入秒数:')
    // 2.封装函数
    function getTime(t) {
      // console.log(t)  // 总的秒数
      // 3. 转换
      // 小时:  h = parseInt(总秒数 / 60 / 60 % 24)
      // 分钟:  m = parseInt(总秒数 / 60 % 60)
      // 秒数: s = parseInt(总秒数 % 60) 
      let h = parseInt(t / 60 / 60 % 24)
      let m = parseInt(t / 60 % 60)
      let s = parseInt(t % 60)
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      // console.log(h, m, s)
      return `转换完毕之后是${h}小时${m}分${s}秒`
    }
    let str = getTime(second)
    document.write(str)
    console.log(h)
  </script>
</body>

</html>

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言 

这个跟之前讲的逻辑中断很像 ,如果当时函数调用的时候不传值进去。此时得到的就是0。

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

 JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

 三、关系运算符比较总结

 由于之后的代码中常常有写if判断的地方,所以需要对运算符的运算结果做一些总结。

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言 JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言

JavaWeb(4)——HTML、CSS、JS 快速入门,前端,前端,html5,css,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-584899.html

到了这里,关于JavaWeb(4)——HTML、CSS、JS 快速入门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端基础篇】HTML5 + CSS3 入门知识

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation) HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简

    2024年02月09日
    浏览(76)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(65)
  • web前端大作业_Html5+CSS3+JS原生项目_京东商城首页 详细代码

    index.html css index.css js index.js 效果图如下:            

    2024年02月11日
    浏览(59)
  • 编程笔记 html5&css&js 038 CSS背景

    背景在样式当中首当其冲,一开始我就讲这背景很重要,背景过亮伤眼是一个重要问题,合理配置背景色,改善感观效果,也是网页设计的一件重要的事。CSS 背景属性用于定义元素的背景效果。 这些属性都和背景有关。 background-color background-image background-repeat background-attach

    2024年01月16日
    浏览(57)
  • 编程笔记 html5&css&js 036 CSS概述

    CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率!在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重

    2024年01月22日
    浏览(53)
  • 编程笔记 html5&css&js 044 CSS显示

    CSS 布局 - display 属性。display 属性是用于控制布局的最重要的 CSS 属性。 display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。 块级元素总是从新行开始,并占据可用的全部宽度(

    2024年01月19日
    浏览(63)
  • 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端

    1.1什么是网页? 1.2什么是HTML? 2.1常用的浏览器 2.2浏览器内核  3.1为啥需要Web标准? 3.2Web标准的构成 : 4.1基本语法概述: 4.2标签关系: 5.1HTML网页:   6.1VSCode常用快捷键: 第二篇:前端VSCode常用插件-快捷键-以及常用技巧-pink老师 - 哔哩哔哩 快速复制一行:shift+alt+下/上箭

    2024年04月08日
    浏览(90)
  • 编程笔记 html5&css&js 035 HTML 地理定位

    地理定位有很多事情有关,购物时要知道你在哪吧,驾车时就更是了,所有浏览器还提供了定位的功能,可以在网页中使用。 HTML5 Geolocation(地理定位)用于定位用户的位置。 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则

    2024年02月02日
    浏览(48)
  • 编程笔记 html5&css&js 034 HTML MathML

    网页上什么都可以出现呀,数学公式是不是也需要显示出来呀?这东西就叫MathML。 HTML5 可以在文档中使用 MathML 元素,对应的标签是 math.../math 。 MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。 据

    2024年01月21日
    浏览(52)
  • 编程笔记 html5&css&js 032 HTML Canvas

    Canvas画布,就是可以用来画画的地方,不是用户在浏览器上画图,而是会javascript画图。这区别于直接载入一张图片,是可以根据需要进行绘制。 HTML canvas 元素用于通过脚本(通常是 JavaScript)动态地绘制图形。 canvas 元素只是图形的容器。您必须使用脚本来绘制实际的图形。

    2024年01月23日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包