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

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

目录

一、JavaScript 对象 

二、JavaScriptBOM对象和DOM对象 

三、JavaScript 事件监听

事件绑定

常见事件

案例练习 

四、JavaScript 内存分配机制

五、JavaScript 函数作用域

 六、JavaScript 函数构造器


一、JavaScript 对象 

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

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

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

         所以说对象的赋值(也可以用这种方式查询)有两种方式,一个是 . 另一个是[ ] ,[ ] 里面要放字符串。

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

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

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

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

二、JavaScriptBOM对象和DOM对象 

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

关于BOM主要对 Window 和 location 进行说明: 

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

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

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

三、JavaScript 事件监听

事件绑定

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

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

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

常见事件

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

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

<!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>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
    function on(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/on.gif";
    }

    function off(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/off.gif";
    }



    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
    function lower(){//小写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为小写
        input.value = input.value.toLowerCase();
    }

    function upper(){//大写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为大写
        input.value = input.value.toUpperCase();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }

    }
    
    function reverse(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置未选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = false;
        }
    }



</script>
</html>

案例练习 

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

<!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>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了?</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
    ]
    // 1. 获取元素 
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    let i = 0  // 信号量 控制图片的张数
    // 2. 开启定时器
    // console.log(sliderData[i])  拿到对应的对象啦
    setInterval(function () {
      i++
      // 无缝衔接位置  一共八张图片,到了最后一张就是 8, 数组的长度就是 8
      if (i >= sliderData.length) {
        i = 0
      }
      // console.log(i)
      // console.log(sliderData[i])
      // 更换图片路径  
      img.src = sliderData[i].url
      // 把字写到 p里面
      p.innerHTML = sliderData[i].title
      // 小圆点
      // 先删除以前的active
      document.querySelector('.slider-indicator .active').classList.remove('active')
      // 只让当前li添加active
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)

  </script>
</body>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户!在您注册过程中,您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议,请您务必仔细阅读、充分理解协议中的条款内容后再点击同意(尤其是以粗体或下划线标识的条款,因为这些条款可能会明确您应履行的义务或对您的权利有所限制)。
        【请您注意】如果您不同意以下协议全部或任何条款约定,请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息,阅读并点击同意上述协议且完成全部注册流程后,即表示您已充分阅读、理解并接受协议的全部内容,并表明您同意我们可以依据协议内容来处理您的个人信息,并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方(详情查看
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(5)</button>
    <script>
        // 1. 获取元素
        const btn = document.querySelector('.btn')
        // console.log(btn.innerHTML)  butto按钮特殊用innerHTML
        // 2. 倒计时
        let i = 5
        // 2.1 开启定时器
        let n = setInterval(function () {
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i === 0) {
                clearInterval(n)  // 关闭定时器
                // 定时器停了,我就可以开按钮
                btn.disabled = false
                btn.innerHTML = '同意'
            }
        }, 1000)

    </script>
</body>

</html>

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

四、JavaScript 内存分配机制

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

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

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

五、JavaScript 函数作用域

        (了解作用域对程序执行的影响及作用域链的查找机制,使用闭包函数创建隔离作用域避免全局变量污染。)  作用域(scope)规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问, 作用域分为: 局部作用域 和 全局作用域。

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

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

还有一个例子,这个题是很经典的面试题,首先创建下一个html 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
<ul id=”test”>
  <li>这是第一条</li>
  <li>这是第二条</li>
  <li>这是第三条</li>
</ul>
<script>
  var liList=document.getElementsByTagName('li');
  for(var i=0;i<liList.length;i++)
  {
    liList[i].onclick=function(){
      console.log(i);
    }
  };
</script>
</body>
</html>

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

        在JavaScript中,var 关键字用于声明变量。使用 var 声明的变量是函数作用域(function scope)的,而不是块作用域(block scope)。这就是为什么在你的代码中,for 循环结束后,i 的值仍然可以在点击事件处理程序中访问到。

        由于使用了全局作用域的 var 声明方式,当循环结束后,i 被赋值为 liList.length,而当点击事件触发时,访问的是 i 的最终值,即 liList.length。这就导致了点击任何 li 时都会输出最终的 i 的值。

        如果你想要点击每个 li 时输出对应的索引值,可以使用闭包来解决这个问题。或将 var 关键字改为 let 关键字,let 声明的变量具有块作用域,在每次迭代中创建一个新的变量,并且会绑定到该迭代的当前循环值。

for(let i=0;i<liList.length;i++)

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

        使用 let 声明变量后,每个点击事件处理程序都会创建自己的作用域,从而正确地输出对应的索引值。 

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

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

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

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

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

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

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

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

标记清除法核心思路是:从根部扫描对象,能查找到的就是使用的,查找不到的就要回收 。

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

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

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

这就是一个最简单的闭包

翻译为自然语言如下:

  • 定义普通函数A
  • 在A中定义普通函数B
  • 在A中返回B
  • 执行A,并把A执行结果赋值给变量C
  • 执行C

当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包。

 总结一下闭包:

1、闭包是  = 内层函数 + 外层函数的变量

2、闭包的作用: 封闭数据,实现数据私有,外部也可以访问函数内部的变量 ; 闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来

3、闭包可能引起的问题? 内存泄漏 。

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

         了解什么是变量提升 。说明: JS初学者经常花很多时间才能习惯变量提升,还经常出现一些意想不到的bug,正因为如此,ES6 引入了块级作用域, 用 let 或者 const声明变量,让代码写法更加规范和人性化。

<!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>
    // 1. 把所有var声明的变量提升到 当前作用域的最前面
    // 2. 只提升声明, 不提升赋值
    var num
    console.log(num + '件')
    num = 10
    console.log(num)

    function fn() {
      console.log(num)
      var num = 10
    }
    fn()
  </script>
</body>

</html>

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

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

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

<!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 fun
    // 1. 会把所有函数声明提升到当前作用域的最前面
    // 2. 只提升函数声明,不提升函数调用
    fn()
    function fn() {
      console.log('函数提升')
    }
    var fun1
    var fun1 = function () {
      console.log('函数表达式')
    }
    fun1()
    // 函数表达式 必须先声明和赋值, 后调用 否则 报错
  </script>
</body>
</html>

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

函数参数的使用细节,能够提升函数应用的灵活度。

 1. 动态参数 2. 剩余参 

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

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

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

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

<!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 getSum(a, b, ...arr) {
      console.log(arr)  // 使用的时候不需要写 ...
    }
    getSum(2, 3)
    getSum(1, 2, 3, 4, 5)
  </script>
</body>

</html>

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

        这段代码定义了一个名为 getSum 的函数。该函数接受两个参数 ab,以及可变数量的参数 arr(使用了剩余参数语法 ...)。在函数体内部,通过 console.log(arr) 打印出传入的可变参数 arr

        在调用 getSum 函数时,可以传入任意数量的参数,并且这些参数会被收集到 arr 数组中。例如,getSum(2, 3) 会将空数组打印在控制台上,因为没有传入可变参数;而 getSum(1, 2, 3, 4, 5) 则会将 [3, 4, 5] 数组打印在控制台上,因为传入了 3、4、5 这三个可变参数。

        使用剩余参数语法 ... 可以让函数接受不定数量的参数,并将这些参数作为数组的形式在函数内部使用。这样可以方便地处理需要传入不确定数量参数的情况。

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

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

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

         展开运算符主要的作用是:

1、可以把数组展开,可以利用求数组最大值以及合并数组等操作

2. 展开运算符和剩余参数有什么区别?  展开运算符主要是 数组展开  剩余参数 在函数内部使用

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

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

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

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

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

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

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

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

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

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

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

<!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>
    const fn = function () {
      console.log(123)
    }
    //1. 箭头函数 基本语法
    const fn1 = () => {
      console.log(123)
    }
    fn1()
    const fn2 = (x) => {
      console.log(x)
    }
    fn2(1)
    //2. 只有一个形参的时候,可以省略小括号
    const fn3 = x => {
      console.log(x)
    }
    fn3(1)
    // 3. 只有一行代码的时候,我们可以省略大括号
    const fn4 = x => console.log(x)
    fn4(1)
    //4. 只有一行代码的时候,可以省略return
    const fn5 = x => x + x
    console.log(fn5(1))
    //5. 箭头函数可以直接返回一个对象
    const fn6 = (uname) => ({ uname: uname })
    console.log(fn6('刘德华'))
  </script>
</body>

</html>

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

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

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

         解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值。 分为: 数组解构 对象解构。

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

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

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

立即执行函数

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

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

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

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

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

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

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

 . 变量的数量大于单元值数量时,多余的变量将被赋值为? undefined 2. 变量的数量小于单元值数量时,可以通过什么剩余获取所有的值?  剩余参数... 获取剩余单元值,但只能置于最末位

 对象解构

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

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

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

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

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

<!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>
    // 1. 这是后台传递过来的数据
    const msg = {
      "code": 200,
      "msg": "获取新闻列表成功",
      "data": [
        {
          "id": 1,
          "title": "5G商用自己,三大运用商收入下降",
          "count": 58
        },
        {
          "id": 2,
          "title": "国际媒体头条速览",
          "count": 56
        },
        {
          "id": 3,
          "title": "乌克兰和俄罗斯持续冲突",
          "count": 1669
        },

      ]
    }

    // 需求1: 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面
    // const { data } = msg
    // console.log(data)
    // 需求2: 上面msg是后台传递过来的数据,我们需要把data选出当做参数传递给 函数
    // const { data } = msg
    // msg 虽然很多属性,但是我们利用解构只要 data值
    function render({ data }) {
      // const { data } = arr
      // 我们只要 data 数据
      // 内部处理
      console.log(data)

    }
    render(msg)

    // 需求3, 为了防止msg里面的data名字混淆,要求渲染函数里面的数据名改为 myData
    function render({ data: myData }) {
      // 要求将 获取过来的 data数据 更名为 myData
      // 内部处理
      console.log(myData)

    }
    render(msg)

  </script>
</body>

</html>

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

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

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

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

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

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

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

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

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

<!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>商品渲染</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      width: 240px;
      margin-left: 10px;
      padding: 20px 30px;
      transition: all .5s;
      margin-bottom: 20px;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -4px, 0);
      cursor: pointer;
    }

    .item img {
      width: 100%;
    }

    .item .name {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }

    .item .price {
      font-size: 22px;
      color: firebrick;
    }

    .item .price::before {
      content: "¥";
      font-size: 14px;
    }

    .filter {
      display: flex;
      width: 990px;
      margin: 0 auto;
      padding: 50px 30px;
    }

    .filter a {
      padding: 10px 20px;
      background: #f5f5f5;
      color: #666;
      text-decoration: none;
      margin-right: 20px;
    }

    .filter a:active,
    .filter a:focus {
      background: #05943c;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="filter">
    <a data-index="1" href="javascript:;">0-100元</a>
    <a data-index="2" href="javascript:;">100-300元</a>
    <a data-index="3" href="javascript:;">300元以上</a>
    <a href="javascript:;">全部区间</a>
  </div>
  <div class="list">
    <!-- <div class="item">
      <img src="" alt="">
      <p class="name"></p>
      <p class="price"></p>
    </div> -->
  </div>
  <script>
    // 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '109.00',
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '100.00',
        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ]

    // 1. 渲染函数  封装
    function render(arr) {
      // 声明空字符串
      let str = ''
      // 遍历数组 
      arr.forEach(item => {
        // 解构
        const { name, picture, price } = item
        str += `
         <div class="item">
          <img src=${picture} alt="">
          <p class="name">${name}</p>
          <p class="price">${price}</p>
        </div> 
        `
      })
      // 追加给list 
      document.querySelector('.list').innerHTML = str
    }
    render(goodsList)  // 页面一打开就需要渲染

    // 2. 过滤筛选  
    document.querySelector('.filter').addEventListener('click', e => {
      // e.target.dataset.index   e.target.tagName
      const { tagName, dataset } = e.target
      // 判断 
      if (tagName === 'A') {
        // console.log(11) 
        // arr 返回的新数组
        let arr = goodsList
        if (dataset.index === '1') {
          arr = goodsList.filter(item => item.price > 0 && item.price <= 100)
        } else if (dataset.index === '2') {
          arr = goodsList.filter(item => item.price >= 100 && item.price <= 300)
        } else if (dataset.index === '3') {
          arr = goodsList.filter(item => item.price >= 300)
        }
        // 渲染函数
        render(arr)
      }
    })
  </script>
</body>

</html>

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

 六、JavaScript 函数构造器

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

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

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

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

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

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

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

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

 构造函数和原型里面的this指向谁 ? 实例化的对象

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

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

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

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

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

<!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 that
    function Star(uname) {
      that = this
      console.log(this)
      this.uname = uname
    }
    // 原型对象里面的函数this指向的还是 实例对象 ldh
    Star.prototype.sing = function () {
      that = this
      console.log('唱歌')
    }
    // 实例对象 ldh   
    // 构造函数里面的 this 就是  实例对象  ldh
    const ldh = new Star('刘德华')
    ldh.sing()
    console.log(that === ldh)
  </script>
</body>

</html>

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

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

<!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>
    // 构造函数  公共的属性和方法 封装到 Star 构造函数里面了
    // 1.公共的属性写到 构造函数里面
    function Star(uname, age) {
      this.uname = uname
      this.age = age
      // this.sing = function () {
      //   console.log('唱歌')
      // }
    }
    // 2. 公共的方法写到原型对象身上   节约了内存
    Star.prototype.sing = function () {
      console.log('唱歌')
    }
    const ldh = new Star('刘德华', 55)
    const zxy = new Star('张学友', 58)
    ldh.sing() //调用
    zxy.sing() //调用
    console.log(ldh === zxy)  // false
    console.log(ldh.sing === zxy.sing)

    console.dir(Star.prototype)
  </script>
</body>

</html>

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

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

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

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

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

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

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

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

<!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>
    // 继续抽取   公共的部分放到原型上
    // const Person1 = {
    //   eyes: 2,
    //   head: 1
    // }
    // const Person2 = {
    //   eyes: 2,
    //   head: 1
    // }
    // 构造函数  new 出来的对象 结构一样,但是对象不一样
    function Person() {
      this.eyes = 2
      this.head = 1
    }
    // console.log(new Person)
    // 女人  构造函数   继承  想要 继承 Person
    function Woman() {

    }
    // Woman 通过原型来继承 Person
    // 父构造函数(父类)   子构造函数(子类)
    // 子类的原型 =  new 父类  
    Woman.prototype = new Person()   // {eyes: 2, head: 1} 
    // 指回原来的构造函数
    Woman.prototype.constructor = Woman

    // 给女人添加一个方法  生孩子
    Woman.prototype.baby = function () {
      console.log('宝贝')
    }
    const red = new Woman()
    console.log(red)
    // console.log(Woman.prototype)
    // 男人 构造函数  继承  想要 继承 Person
    function Man() {

    }
    // 通过 原型继承 Person
    Man.prototype = new Person()
    Man.prototype.constructor = Man
    const pink = new Man()
    Man.prototype.smoking = function () {
      console.log('抽烟')
    }
    console.log(pink)
  </script>
</body>

</html>

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

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

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

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

<!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 Pig(uname, age) {
      this.uname = uname
      this.age = age
    }

    // console.log(new Pig('佩奇', 6))
    // console.log(new Pig('乔治', 3))
    const p = new Pig('佩奇', 6)
    console.log(p)

    //  const pepa = { uname: '佩奇', age: 6 }

    // const obj = new Object()

    function Goods(name, price, count) {
      this.name = name
      this.price = price
      this.count = count
      this.sayhi = function () { }
    }
    const mi = new Goods('小米', 1999, 20)
    console.log(mi)
    const hw = new Goods('华为', 3999, 59)
    console.log(hw)
    console.log(mi === hw)
    mi.name = 'vivo'
    console.log(mi)
    console.log(hw)
    // const date = new Date('2022-4-8')
    // console.log(date)

    // 静态成员 
    Goods.num = 10
    console.log(Goods.num)
    Goods.sayhi = function () { }
  </script>
</body>

</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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>
    const arr = [1, 2, 3]
    const re = arr.map(item => item + 10)
    console.log(arr)  // 原来的数组
    console.log(re)  // 新数组
  </script>
</body>

</html>

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

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

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

<!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>
    const arr = [{
      name: '张三',
      salary: 10000
    }, {
      name: '李四',
      salary: 10000
    }, {
      name: '王五',
      salary: 20000
    },
    ]
    // 涨薪的钱数  10000 * 0.3 
    // const money = arr.reduce(function (prev, item) {
    //   return prev + item.salary * 0.3
    // }, 0)
    const money = arr.reduce((prev, item) => prev + item.salary * 0.3, 0)
    console.log(money)
  </script>
</body>

</html>

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

<!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>
    const arr1 = ['red', 'blue', 'green']
    const re = arr1.find(function (item) {
      return item === 'blue'
    })
    console.log(re)

    const arr = [
      {
        name: '小米',
        price: 1999
      },
      {
        name: '华为',
        price: 3999
      },
    ]
    // 找小米 这个对象,并且返回这个对象
    const mi = arr.find(function (item) {
      // console.log(item)  //
      // console.log(item.name)  //
      console.log(111)
      return item.name === '华为'
    })
    //1. find 查找
    const mi1 = arr.find(item => item.name === '小米')
    console.log(mi1)
    //2. every 每一个是否都符合条件,如果都符合返回 true ,否则返回false
    const arr2 = [10, 20, 30]
    const flag = arr2.every(item => item >= 20)
    console.log(flag)
  </script>
</body>

</html>

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

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

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

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

<!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>
  <div></div>
  <script>
    const spec = { size: '40cm*40cm', color: '黑色' }
    //1. 所有的属性值回去过来  数组
    console.log(Object.values(spec))
    // 2. 转换为字符串   数组join('/') 把数组根据分隔符转换为字符串
    console.log(Object.values(spec).join('/'))
    document.querySelector('div').innerHTML = Object.values(spec).join('/')
  </script>
</body>

</html>

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

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

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

<!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>
    //1. split 把字符串 转换为 数组  和 join() 相反
    const str = 'pink,red'
    const arr = str.split(',')
    console.log(arr)
    const str1 = '2022-4-8'
    const arr1 = str1.split('-')
    console.log(arr1)
    // 2. 字符串的截取   substring(开始的索引号[, 结束的索引号])
    // 2.1 如果省略 结束的索引号,默认取到最后
    // 2.2 结束的索引号不包含想要截取的部分
    const str2 = '今天又要做核酸了'
    console.log(str2.substring(5, 7))
    // 3. startsWith 判断是不是以某个字符开头
    const str3 = 'pink老师上课中'
    console.log(str3.startsWith('pink'))
    // 4. includes 判断某个字符是不是包含在一个字符串里面
    const str4 = '我是pink老师'
    console.log(str4.includes('pink')) // true
  </script>
</body>

</html>

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

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

  

JavaWeb(5)——HTML、CSS、JS 快速入门,前端,html,css,javascript,前端,开发语言,html5文章来源地址https://www.toymoban.com/news/detail-567198.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-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 100px auto 0;
    }

    .item {
      padding: 15px;
      transition: all .5s;
      display: flex;
      border-top: 1px solid #e4e4e4;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      cursor: pointer;
      background-color: #f5f5f5;
    }

    .item img {
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }

    .item .name {
      font-size: 18px;
      margin-right: 10px;
      color: #333;
      flex: 2;
    }

    .item .name .tag {
      display: block;
      padding: 2px;
      font-size: 12px;
      color: #999;
    }

    .item .price,
    .item .sub-total {
      font-size: 18px;
      color: firebrick;
      flex: 1;
    }

    .item .price::before,
    .item .sub-total::before,
    .amount::before {
      content: "¥";
      font-size: 12px;
    }

    .item .spec {
      flex: 2;
      color: #888;
      font-size: 14px;
    }

    .item .count {
      flex: 1;
      color: #aaa;
    }

    .total {
      width: 990px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      border-top: 1px solid #e4e4e4;
      padding: 20px;
    }

    .total .amount {
      font-size: 18px;
      color: firebrick;
      font-weight: bold;
      margin-right: 50px;
    }
  </style>
</head>

<body>
  <div class="list">
    <!-- <div class="item">
      <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
      <p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
      <p class="spec">白色/10寸</p>
      <p class="price">289.90</p>
      <p class="count">x2</p>
      <p class="sub-total">579.80</p>
    </div> -->
  </div>
  <div class="total">
    <div>合计:<span class="amount">1000.00</span></div>
  </div>
  <script>
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: 289.9,
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
        count: 2,
        spec: { color: '白色' }
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: 109.8,
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
        count: 3,
        spec: { size: '40cm*40cm', color: '黑色' }
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: 488,
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
        count: 1,
        spec: { color: '青色', sum: '一大四小' }
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: 139,
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
        count: 1,
        spec: { size: '小号', color: '紫色' },
        gift: '50g茶叶,清洗球,宝马, 奔驰'
      }
    ]

    // 1. 根据数据渲染页面
    document.querySelector('.list').innerHTML = goodsList.map(item => {
      // console.log(item)  // 每一条对象
      // 对象解构  item.price item.count
      const { picture, name, count, price, spec, gift } = item
      // 规格文字模块处理
      const text = Object.values(spec).join('/')
      // 计算小计模块 单价 * 数量  保留两位小数 
      // 注意精度问题,因为保留两位小数,所以乘以 100  最后除以100
      const subTotal = ((price * 100 * count) / 100).toFixed(2)
      // 处理赠品模块 '50g茶叶,清洗球'
      const str = gift ? gift.split(',').map(item => `<span class="tag">【赠品】${item}</span> `).join('') : ''
      return `
        <div class="item">
          <img src=${picture} alt="">
          <p class="name">${name} ${str} </p>
          <p class="spec">${text} </p>
          <p class="price">${price.toFixed(2)}</p>
          <p class="count">x${count}</p>
          <p class="sub-total">${subTotal}</p>
        </div>
      `
    }).join('')

    // 3. 合计模块
    const total = goodsList.reduce((prev, item) => prev + (item.price * 100 * item.count) / 100, 0)
    // console.log(total)
    document.querySelector('.amount').innerHTML = total.toFixed(2)
  </script>
</body>

</html>

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

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

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

相关文章

  • [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript

    目录 一 特色  二  收获​编辑  三 什么是web? 四 网站的工作流程  五 web网站的开发模式​编辑  六 web开发课程学习安排  七、初始web前端  八 HTML、CSS 8.1 什么是HTNLCSS(w3cschool) 8.2 HTML快速入门 8.3 VS Code开发工具 8.3.1  插件  8.3.2 主题(改变颜色) 8.3.3 设置 8.4 基础标签样

    2024年02月12日
    浏览(44)
  • 前端 富文本编辑器原理——从javascript、html、css开始入门

    大家好,我是yma16,本文分享关于前端 富文本编辑器原理——从javascript、html、css开始。 富文本编辑器 富文本编辑器是指具有格式化文本和图像编辑功能的文本编辑器 参考文档:https://w3c.github.io/selection-api/#abstract 全局属性 contenteditable 是一个枚举属性,表示元素是否可被用

    2024年02月08日
    浏览(50)
  • javaweb个人主页设计(html+css+js)

    目录 1 前言和要求 1.1 前言 1.2 设计要求 2 预览 2.1 主页页面 2.2 个人简介 2.3 个人爱好 2.4 个人成绩有代码,但是图片已省略,可以根据自己情况添加 2.5 收藏夹 3 代码实现  3.1 主页 3.2 个人简介 3.3 个人爱好 3.4 个人成绩(根据自己的情况添加) 3.5 收藏夹 4 可能要用的图片,

    2024年02月09日
    浏览(89)
  • 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(65)
  • 前端全集Ⅰ---- HTML/CSS/JavaScript

    Web:全球广域网,也称万维网,能够通过浏览器访问的网站 Web网站的工作流程:(前后端分离模式) 网页有哪些组成? 文字、图片、视频、音频、超链接 前端代码通过浏览器的解析和渲染变成用户看到的页面,对网页进行解析渲染的部分就是浏览器的内核 Web标准 不同的浏

    2024年02月15日
    浏览(76)
  • 前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

    他们这样形容我 是暴雨浇不灭的火                                                       —— 24.4.18 学习目标         理解                 HTML的概念                 HTML的分类                 HTML的关系                 HTML的语义化         应用

    2024年04月23日
    浏览(58)
  • 前端= 结构(HTML)+ 样式(CSS)+ 行为(JavaScript)

    前端开发确实涵盖了行为(JavaScript)、样式(CSS)和结构(HTML)这三个主要方面。这三个方面在前端开发中密切协作,共同构建用户界面和用户体验。 结构(Structure):HTML 是用于定义页面结构的标记语言。通过使用 HTML 标签,可以创建网页的基本骨架,包括标题、段落、

    2024年02月13日
    浏览(63)
  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

    2024年02月19日
    浏览(56)
  • 前端随笔:HTML/CSS/JavaScript和Vue

    最近因为工作需要,需要接触一些前端的东西。之前虽然大体上了解过 HTML 、 CSS 和 JavaScript ,也知道 HTML 定义了内容、 CSS 定义了样式、 JavaScript 定义了行为,但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用 Vue ,并且想到未来的工作中使用 Vue 能够更

    2024年02月16日
    浏览(44)
  • 前端:运用HTML+CSS+JavaScript实现拼图游戏

    前一段时间突然来了一个想法,就是运用前端知识实现一个拼图游戏,但是不知道具体怎样实现。今天,想到既然实现不了现实中我们看到的那种拼块,那么就用正方形来代替吧! 效果如下: 想到就是当小的图片块放到合适的位置上时,表示拼图完成。 1. 前端布局 运用cs

    2024年02月08日
    浏览(62)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包