JS-WebAPIS(四)

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

日期对象(常用)

• 实例化

  • 在代码中发现了 new 关键字时,一般将这个操作称为实例化
  • 创建一个时间对象并获取时间
  • 获得当前时间

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

  • 获得指定时间 

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

• 时间对象方法

使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

• 时间戳

使用场景: 如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成

什么是时间戳

  • 是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式

算法:

  • 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
  • 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
  • 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
  • 1000ms 转换为就是 0小时0分1秒

三种方式获取时间戳:

  • 使用 getTime() 方法

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

  • 简写 +new Date()

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

  • 使用 Date.now() 

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

案例:倒计时案例

 需求:计算到下课还有多少时间
分析:
①:用将来时间减去现在时间就是剩余的时间
②:核心: 使用将来的时间戳减去现在的时间戳
③:把剩余的时间转换为 天 时 分 秒

注意:
1. 通过时间戳得到是毫秒,需要转换为秒在计算
2. 转换公式:

  • d = parseInt(总秒数/ 60/60 /24); // 计算天数
  • h = parseInt(总秒数/ 60/60 %24) // 计算小时
  • m = parseInt(总秒数 /60 %60 ); // 计算分数
  • s = parseInt(总秒数%60); // 计算当前秒数

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

<!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>
    .box {
      width: 250px;
      height: 300px;
      background-color: rgb(143, 5, 5);
      margin: 100px auto;
      text-align: center;
      color: #fff;
      border: 1px solid transparent;
    }

    .box p:nth-of-type(1){
      margin: 20px;
    }
    .box p:nth-of-type(2){
      margin-top: 80px;
      font-size: 20px;
    }

    .box h3 {
      font-size: 30px;
    }

    .datetime span {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      background: rgba(0, 0, 0, .7);
    }

  </style>
</head>
<body>
  <div class="box">
    <p>今天是2024年2月22日</p>
    <h3>过年倒计时</h3>
    <div class="datetime">
      <span class="day">22</span>天<span class="h">22</span>: <span class="m">22</span>: <span class="s">22</span>
    </div>
    <p>2024.2.9过年</p>
  </div>

  <script>

    /* 
    知识点复习:
    1 时间对象Date()的使用 --获取当前时间
    2 定时器-间歇函数     --间隔一秒调用函数,刷新时间
    3 获取dom元素
    4 复习Math内置对象
    */

  //页面初始化第一次
  getCountTime()
  //调用定时器不断刷新时间
  setInterval(getCountTime,1000)


  function getCountTime(){
    //实例化时间对象
    const date = new Date()
    // const today = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
    const p1 = document.querySelector('.box p:nth-of-type(1)')
    p1.innerHTML = `今天是${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`
    const day = new Date('2024.2.9') - date
    // let a = new Date(`${date}`)
    // console.log(Math.ceil(day/24/60/60/1000))
    // console.log(a.getDate())
    // console.log(a.getHours())
    // console.log(a.getMinutes())
    // console.log(a.getSeconds())
    document.querySelector('.day').innerHTML = Math.floor(day/24/60/60/1000)
    document.querySelector('.h').innerHTML = Math.floor(day/60/60/1000%24)
    document.querySelector('.m').innerHTML = Math.floor(day/60/1000%60)
    document.querySelector('.s').innerHTML = Math.floor(day/1000%60)

    //修改盒子颜色
    // console.log(getRandomColor(false))
    document.querySelector('.box').style.backgroundColor = getRandomColor(false)
  }

  function getRandomColor(flag = true){
      //如果flag=true  则返回#ffffff形式的
      if(flag){
        let arr = ['1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
        
        let result ='#'
        for(let i = 1;i<=6;i++){
          let random = Math.floor(Math.random()*arr.length)
          result+=arr[random]
        }

        return result
      }else{
      //如果flag=false   则返回rag(255,255,255)形式的
      let r = Math.floor(Math.random()*256)
      let g = Math.floor(Math.random()*256)
      let b = Math.floor(Math.random()*256)
      return `rgb(${r},${g},${b})`
      }
    }
    

  </script>
</body>
</html>

 文章来源地址https://www.toymoban.com/news/detail-807264.html


节点操作(常用)

• DOM 节点

DOM树里每一个内容都称之为节点

  • 节点类型()

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

 总结:

1. 什么是DOM 节点?

  •  DOM树里每一个内容都称之为节点

2. DOM节点的分类?

  •  元素节点 比如 div标签
  •  属性节点 比如 class属性
  •  文本节点 比如标签里面的文字

3. 我们重点记住那个节点?

  •  元素节点
  •  可以更好的让我们理清标签元素之间的关系

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

• 查找节点

父节点查找:

  • parentNode 属性
  • 返回最近一级的父节点 找不到返回为null

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

子节点查找: 

  • childNodes

获得所有子节点、包括文本节点(空格、换行)、注释节点等

  • children 属性 (重点)
  1. 仅获得所有元素节点(只获取html标签)
  2. 返回的还是一个伪数组

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

兄弟节点查找: 

1. 下一个兄弟节点

  • nextElementSibling 属性

2. 上一个兄弟节点

  • previousElementSibling 属性

• 增加节点(重点)

场景:

JS-WebAPIS(四),js,javascript,开发语言,ecmascript 

1.创建节点

  • 创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
  • 创建元素节点方法:

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

 2.追加节点

  • 要想在界面看到,还得插入到某个父元素中
  • 插入到父元素的最后一个子元素:

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

  • 插入到父元素中某个子元素的前面 

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

JS-WebAPIS(四),js,javascript,开发语言,ecmascript 

• 删除节点

  • 若一个节点在页面中已不需要时,可以删除它
  • 在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除
  • 语法

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

注:

  •  如不存在父子关系则删除不成功
  • 删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点 

M端事件(移动端)

移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。

  • 触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
  • touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔 )对屏幕或者触控板操作。
  • 常见的触屏事件如下:

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

JS插件(swiper)

  • 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
  • 学习插件的基本过程
  • 熟悉官网,了解这个插件可以完成什么需求           https://www.swiper.com.cn/
  • 看在线演示,找到符合自己需求的demo                https://www.swiper.com.cn/demo/index.html
  • 查看基本使用流程                                                https://www.swiper.com.cn/usage/index.html
  • 查看APi文档,去配置自己的插件                           https://www.swiper.com.cn/api/index.html
  • 注意: 多个swiper同时使用的时候, 类名需要注意区分

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

在官网下载后,从这个package夹中找到css和js文件,引入到项目中就可以用了,具体看文档

综合案例

学生信息表案例

说明:

本次案例,我们尽量减少dom操作,采取操作数据的形式

增加和删除都是针对于数组的操作,然后根据数组数据渲染页面

核心思路:
①: 声明一个空的数组
②: 点击录入,根据相关数据,生成对象,追加到数组里面
③: 根据数组数据渲染页面-表格的 行
④: 点击删除按钮,删除的是对应数组里面的数据
⑤: 再次根据数组的数据,渲染页面

JS-WebAPIS(四),js,javascript,开发语言,ecmascript

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名:<input type="text" class="uname" name="uname" required />
    年龄:<input type="text" class="age" name="age" required />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资:<input type="text" class="salary" name="salary" required />
    就业城市:<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
    </tbody>
  </table>
  <script>

    /* 
    本案例使用到的知识点
    1 dom对象的获取
    2 数组操作
    3 事件流-阻止默认行为
    4 对象的操作
    5 事件绑定
    6 事件对象 e的用法
    7 对象的自定义属性
    */

    const add = document.querySelector('.add')
    const info = document.querySelector('.info')
    const tbody = document.querySelector('tbody')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const arr = []  //初始化数组用于存储数据
    const items = document.querySelectorAll('[name]')


    //1 为表单设置提交事件  //事件类型是提交事件
    info.addEventListener('submit', function (e) {

      //1.1 阻止表单默认行为,不然点击后会将内容提交给自己(这里的对象需要填写表单)
      e.preventDefault()
      console.log(11)

      //1.2初始化对象
      const obj = {
        stuId: arr.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }

      //3 对表单元素进行验证
      for (let i = 0; i < items.length; i++) {
        if (items[i].value === '') {
          alert('内容不能为空!')
          //结束函数
          return
        }
      }

      //1.3将对象追加到数组种
      arr.push(obj)
      //重置表单
      this.reset()
      // console.log(arr)

      //1.4显然表单
      render()
    })


    function render() {
      //每次调用清空原来tbody种的元素
      tbody.innerHTML = ''
      for (let i = 0; i < arr.length; i++) {
        //创建tr
        const tr = document.createElement('tr')
        tr.innerHTML = `
          <td>${arr[i].stuId}</td>
          <td>${arr[i].uname}</td>
          <td>${arr[i].age}</td>
          <td>${arr[i].gender}</td>
          <td>${arr[i].salary}</td>
          <td>${arr[i].city}</td>
          <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
      `
        //将填入追加到tbody种
        tbody.appendChild(tr)
      }
    }


    //2点击a元素删除数组对象  --使用事件委托
    tbody.addEventListener('click', function (e) {
      //2.1只有点击a,才做操作
      if (e.target.tagName === 'A') {
        // console.log(111)
        //2.2获取a种的自定义属性值
        //  console.log(e.target.dataset.id)
        //根据自定义属性的值删除数组元素
        arr.splice(e.target.dataset.id, 1)
        //2.3删除操作后重新渲染
        render()
      }
    })
  </script>

</body>

</html>

 

 

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

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

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

相关文章

  • 前端框架前置课Node.js学习(1) fs,path,模块化,CommonJS标准,ECMAScript标准,包

    目录 什么是Node.js 定义 作用: 什么是前端工程化 Node.js为何能执行Js fs模块-读写文件 模块 语法: 1.加载fs模块对象 2.写入文件内容 3.读取文件内容 Path模块-路径处理 为什么要使用path模块 语法 URL中的端口号 http模块-创建Web服务 需求 步骤: 案例:浏览时钟 步骤: 什么是模块化 定

    2024年01月16日
    浏览(109)
  • Node.js - fs模块、path模块、http模块、Node.js模块化(ECMAScript标准的导出和导入)、包、npm包的管理和安装依赖、nodemon

    什么是 Node.js,有什么用,为何能独立执行 JS 代码,演示安装和执行 JS 文件内代码? Node.js 是一个独立的 JavaScript 运行环境,能独立执行 JS 代码,因为这个特点,它可以用来 编写服务器后端的应用程序 在** 传统Web开发中,浏览器就是JavaScript的运行时环境 **, 因为它提供了

    2024年02月02日
    浏览(55)
  • [从零开发JS应用] 如何在VScode中配置Javascript环境,常见的调试方法有哪些?

    记录环境配置:本文配置的环境主要针对单独JS文件的断点调试,主要是为了调试LeetCode里面的代码。 首先在官网下载对应的版本:https://nodejs.org/en/ 开始安装,可以自定义选择安装路径。 这里 选择Add Path ,系统变量会自动设置,但是用户变量并没有自动设置,需要的话可以

    2024年02月04日
    浏览(53)
  • PDF.js - 免费开源的 JavaScript 读取、显示 PDF 文档的工具库,由 Mozilla 开发并且持续维护

    最近新项目需要处理 PDF,研究了 PDf.js 之后觉得很不错,于是写篇文章推荐给大家。 PDF.js 的功能和它的名字一样简单,是一个使用 HTML5 技术来让前端网页支持读取、解析和显示 PDF 文档的 JS 工具库。这个项目由大名鼎鼎的 Mozilla 组织开发并且更新维护着,没错,就是那个开

    2024年01月21日
    浏览(50)
  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(54)
  • 前端jd要求:了解一门后端开发语言优先 解决方案之Node.js

    作为前端开发者,了解一门后端开发语言可以为我们提供更多的职业机会和技术优势。在当今的技术领域中,前后端分离的开发模式已经成为主流,前端和后端的协作和沟通变得越来越紧密。因此,作为前端开发者,学习一门后端语言已经成为提高自己技能的重要途径。 以下

    2024年02月12日
    浏览(49)
  • 除了three.js,还有许多其他前端开发语言和库可以用于创建3D可视化大屏

    hello老铁们...本人熟悉html5,vue对bootsrap,uniapp,layui,element,vite,antd,echarts,jq响应式尤其擅长,ui设计等技能,如果ui前端工作中有遇到烦恼可私信关注评论我们共同交流进步!谢谢       随着前端技术的飞速发展,3D可视化已经成为许多应用场景中不可或缺的一部分。在

    2024年03月15日
    浏览(67)
  • 3分钟搞懂:JavaScript 和 ECMAScript

    ECMAScript 是 JavaScript 语言的 国际标准 ,JavaScript 是 ECMAScript 的 一种实现 (Adobe ActionScript 和 JScript 同样实现了 ECMAScript)。 ECMAScript 是欧洲计算机制造商协会 ECMA(European Computer Manufacturers Association)发布的浏览器脚本语言标准。它是 262 号标准文件,又叫 ECMA-262。 ECMAScript 定义

    2023年04月22日
    浏览(45)
  • 前端学习笔记:JavaScript基础语法(ECMAScript)

    此博客参考b站:【黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76vd_source=06e5549bf018e111f4275c259292d0da 这份笔记适用于已经学过一门编程语言(最好是C语言)的同学,如果你没有

    2024年02月16日
    浏览(46)
  • 【Anime.js】——JavaScript动画库:Anime.js——学习笔记

    目录 一、搭建开发环境  二、基本功能和使用 开始制作动画 动画属性 三、anime.stagger——交错动画 四、timeline——时间轴  五、控制、回调与助手 一、控制  二、回调 三、助手 六、easings——动画运动曲线 七、SVG动画 官网定义: anime.js 是一个简便的JS动画库,用法简单而

    2024年02月01日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包