【web APIs】4、(学习笔记)有案例!

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、日期对象
      • 实例化
      • 方法
  • 二、时间戳
    • 三、DOM 节点
      • 插入节点
      • 删除节点
      • 查找节点
        • 父子关系
        • 兄弟关系
  • 四、案例举例
    • 1.显示格式化时间
    • 2.倒计时
    • 3.学成在线首页
    • 4.学生就业信息表


前言

  • 能够插入、删除和替换元素节点
  • 能够依据元素节点关系查找节点

一、日期对象

ECMAScript 中内置了获取系统时间的对象 Date,使用 Date 时与之前学习的内置对象 console 和 Math 不同,它需要借助 new 关键字才能使用。

实例化

  // 1. 实例化// const date = new Date(); // 系统默认时间const date = new Date('2020-05-01') // 指定时间// date 变量即所谓的时间对象console.log(typeof date)

方法

 // 1. 实例化
const date = new Date();
// 2. 调用时间对象方法
// 通过方法分别获取年、月、日,时、分、秒
const year = date.getFullYear(); // 四位年份
const month = date.getMonth(); // 0 ~ 11

1.getFullYear 获取四位年份

2.getMonth 获取月份,取值为 0 ~ 11

3.getDate 获取月份中的每一天,不同月份取值也不相同

4.getDay 获取星期,取值为 0 ~ 6

5.getHours 获取小时,取值为 0 ~ 23

6.getMinutes 获取分钟,取值为 0 ~ 59

7.getSeconds 获取秒,取值为 0 ~ 59

二、时间戳

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

注:ECMAScript 中时间戳是以毫秒计的。

    // 1. 实例化const date = new Date()// 2. 获取时间戳console.log(date.getTime())
// 还有一种获取时间戳的方法console.log(+new Date())// 还有一种获取时间戳的方法console.log(Date.now())

获取时间戳的方法,分别为 getTime 和 Date.now 和 +new Date()

三、DOM 节点

回顾之前 DOM 的操作都是针对元素节点的属性或文本的,除此之外也有专门针对元素节点本身的操作,如插入、复制、删除、替换等。

插入节点

在已有的 DOM 节点中插入新的 DOM 节点时,需要关注两个关键因素:首先要得到新的 DOM 节点,其次在哪个位置插入这个节点。

如下代码演示:

<body><h3>插入节点</h3><p>在现有 dom 结构基础上插入新的元素节点</p><hr><!-- 普通盒子 --><div class="box"></div><!-- 点击按钮向 box 盒子插入节点 --><button class="btn">插入节点</button><script>// 点击按钮,在网页中插入节点const btn = document.querySelector('.btn')btn.addEventListener('click', function () {// 1. 获得一个 DOM 元素节点const p = document.createElement('p')p.innerText = '创建的新的p标签'p.className = 'info'// 复制原有的 DOM 节点const p2 = document.querySelector('p').cloneNode(true)p2.style.color = 'red'// 2. 插入盒子 box 盒子document.querySelector('.box').appendChild(p)document.querySelector('.box').appendChild(p2)})</script>
</body>

结论:

  • createElement 动态创建任意 DOM 节点

  • cloneNode 复制现有的 DOM 节点,传入参数 true 会复制所有子节点

  • appendChild 在末尾(结束标签前)插入节点

  • insertBefore 在父节点中任意子节点之前插入新节点

删除节点

删除现有的 DOM 节点,也需要关注两个因素:首先由父节点删除子节点,其次是要删除哪个子节点。

<body><!-- 点击按钮删除节点 --><button>删除节点</button><ul><li>HTML</li><li>CSS</li><li>Web APIs</li></ul><script>const btn = document.querySelector('button')btn.addEventListener('click', function () {// 获取 ul 父节点let ul = document.querySelector('ul')// 待删除的子节点let lis = document.querySelectorAll('li')// 删除节点ul.removeChild(lis[0])})</script>
</body>

结论:removeChild 删除节点时一定是由父子关系。

查找节点

DOM 树中的任意节点都不是孤立存在的,它们要么是父子关系,要么是兄弟关系,不仅如此,我们可以依据节点之间的关系查找节点。

父子关系
  • childNodes 获取全部的子节点,回车换行会被认为是空白文本节点
  • children 只获取元素类型节点
  • parentNode 获取父节点,以相对位置查找节点,实际应用中非常灵活。
兄弟关系
  • previousSibling 获取前一个节点,以相对位置查找节点,实际应用中非常灵活。
  • nextSibling 获取后一个节点,以相对位置查找节点,实际应用中非常灵活。

四、案例举例

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>div {width: 300px;height: 40px;border: 1px solid pink;text-align: center;line-height: 40px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')function getMyDate() {const date = new Date()let h = date.getHours()let m = date.getMinutes()let s = date.getSeconds()h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sreturn `今天是: ${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}${h}:${m}:${s}`}div.innerHTML = getMyDate()setInterval(function () {div.innerHTML = getMyDate()}, 1000)</script>
</body></html>

2.倒计时

秒数转化为*时 *分 *秒
00:00:00的表示形式
实时更新并显示时间

<script>const countdown = document.querySelector('.countdown')countdown.style.backgroundColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`const next = document.querySelector('.next')next.innerHTML = `今天是${new Date().getFullYear()}${new Date().getMonth() + 1}${new Date().getDate()}`function tran() {//(约定时间-当前时间)/1000const now = +new Date()   //当前const last = +new Date('2024-02-27 23:30:00')const re = (last - now) / 1000//秒转化为**时**分**秒let m = parseInt(re / 60 % 60)            //parseIntlet h = Math.floor(re / 60 / 60 % 24)let s = parseInt(re % 60)//判断是否大于10h = h >= 10 ? h : '0' + hm = m >= 10 ? m : '0' + ms = s >= 10 ? s : '0' + sdocument.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#second').innerHTML = s}tran()setInterval(tran, 1000)    //这里tran不需要括号</script>

3.学成在线首页

内容替换,createElement,appendChild的使用

<!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/style.css"><style></style>
</head><body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><!-- <a href="#"><img src=${data[i].src} alt=""><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a> --></ul></div></div><script>// 1. 重构  let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2 大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'Android APP 实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI 源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},]const ul = document.querySelector('.box-bd ul')            //('父节点类名  ul')for (let i = 0; i < data.length; i++) {const li = document.createElement('li')li.innerHTML = `<a href="#"><img src=${data[i].src} alt=""><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a>`ul.appendChild(li)}</script>
</body></html>

4.学生就业信息表

<!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" />年龄:<input type="text" class="age" name="age" />性别:<select name="gender" class="gender"><option value=""></option><option value=""></option></select>薪资:<input type="text" class="salary" name="salary" />就业城市:<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.获取元素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 info = document.querySelector('.info')const items = document.querySelectorAll('[name]')let arr = []//form提交事件(数据更新渲染函数)info.addEventListener('submit', function (e) {//阻止默认行为e.preventDefault()//判断内容是否为空for (let i = 0; i < items.length; i++) {if (items[i].value === '') {      //return alert('输入不能为空')}}//数据替换const data = {stuId: arr.length + 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value,}arr.push(data)//新数据渲染到下面表格render()//清空text填写原有数据this.reset()})function render() {// 先清空tbody 以前的行 ,把最新数组里面的数据渲染完毕 tbody.innerHTML = ''// 遍历arr数组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>`// 追加元素  父元素.appendChild(子元素)tbody.appendChild(tr)}}//del删除事件(借助自定义属性)const tbody = document.querySelector('tbody')tbody.addEventListener('click', function (e) {if (e.target.tagName === 'A') {arr.splice(e.target.dataset.id, 1)         //arr  render里面的new_data是添加在tbody里面localStorage.removeItem('data', JSON.stringify(arr[e.target.dataset.id]))render()       }})</script></body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/710075.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一图总结:华为销售体系(铁三角组织LTC流程)

《华为铁三角工作法》阅读了多遍&#xff0c;花了些时间整理了一张图对本书的框架性总结&#xff0c;从流程&#xff08;LTC&#xff09;、组织&#xff08;铁三角&#xff09;、激励和管理三个大方面概览华为销售体系。 核心是一靠流程&#xff0c;二靠团队&#xff0c;而前提…

阿里云服务器大降价20%,简单拥有五年三台2h4gECS,组建公网集群

要在阿里云ECS上组建集群&#xff0c;您可以按照以下步骤进行操作&#xff1a; 创建ECS实例&#xff1a;登录阿里云控制台&#xff0c;选择ECS实例&#xff0c;点击“创建实例”按钮。根据实际需求选择实例的配置参数&#xff0c;例如实例规格、操作系统、网络等。根据需要选择…

如何使用视频号下载提取器提取视频,推荐2种方法使用!

视频号下载提取视频号视频&#xff0c;推荐大家2个方法&#xff01; 前者简单&#xff0c;后者较为复杂&#xff0c;不过都可以提取视频号视频&#xff0c;大家可根据实际情况来使用。 01 视频号下载工具提取器&#xff1f; 1&#xff1a;通过搜一搜的这款搜索引擎找到自己…

【InternLM 实战营笔记】大模型评测

随着人工智能技术的快速发展&#xff0c; 大规模预训练自然语言模型成为了研究热点和关注焦点。OpenAI于2018年提出了第一代GPT模型&#xff0c;开辟了自然语言模型生成式预训练的路线。沿着这条路线&#xff0c;随后又陆续发布了GPT-2和GPT-3模型。与此同时&#xff0c;谷歌也…

【Go语言】Go语言中的数组

Go语言中的数组 1 数组的初始化和定义 在 Go 语言中&#xff0c;数组是固定长度的、同一类型的数据集合。数组中包含的每个数据项被称为数组元素&#xff0c;一个数组包含的元素个数被称为数组的长度。 在 Go 语言中&#xff0c;你可以通过 [] 来标识数组类型&#xff0c;但…

Docker知识基础

目录 为什么要用到容器&#xff1f; docker是什么&#xff1f; 容器与虚拟机的区别&#xff1f; docker的三个核心概念&#xff1a; docker容器操作 docker网络模式 bridge host container none 自定义网络 CPU限制 内存限制 磁盘IO限制 …

嵌入式学习-qt-Day4

嵌入式学习-qt-Day4 一、思维导图 二、作业 1.设计一个界面&#xff1a;显示系统时间&#xff1b;可以设置闹钟&#xff0c;在设置的时间到达后&#xff0c;显示五次字符串&#xff0c;并且语音播报。 Wight.h #ifndef WIDGET_H #define WIDGET_H #include <QWidget>…

为什么useState在setValue调用后,获取值是上一次的值?

背景 在工作中&#xff0c;发现select的change事件处理完成后&#xff0c;在使用数据时&#xff0c;发现获取的数据是上一次变更的数据。 原因 当useState钩子调用后获取的值仍然是上一次的值&#xff0c;而不是最新更新的值&#xff0c;这通常是因为状态更新在React中是异步…

《Vite 基础知识》Vitepress 技术文档站点搭建与配置

前言 简介 VitePress 是一个静态站点生成器 (SSG)&#xff0c;专为构建快速、以内容为中心的站点而设计。 简而言之&#xff0c;可构建你自己的 技术文档站点&#xff1b; 环境要求 Node.js 18 及以上版本。我使用 v20.11.0 创建 第一步&#xff1a; 全局安装 npm i vitep…

乘积尾零(蓝桥杯)

文章目录 乘积尾零题目描述代码 乘积尾零 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 如下的 10 行数据&#xff0c;每行有 10 个整数&#xff0c;请你求出它们的乘积的末尾有多少个零&#xff1f; 5650 454…

gdb调试技巧

gdb调试教程 前言gdb的调试命令显示需要调试的代码&#xff1a;l&#xff08; list &#xff09;启动调试&#xff1a;r (run)断点&#xff1a;b&#xff08;Breakpoint&#xff09;设置断点查看断点&#xff1a;info b删除断点&#xff1a;d打开断点 / 关闭断点 逐语句进行调试…

node 之 http模块

1.什么是http模块 在网络节点中&#xff0c;负责消费资源的电脑叫做客户端&#xff1b;负责对外提供网络资源的电脑&#xff0c;叫做服务器 http模块是node.js官方提供的&#xff0c;用来创建web服务器的模块&#xff0c;通过http模块提供的http.createServer()方法&#xff0c…

力扣哈希表篇

以下解题思路来自代码随想录以及力扣官方 文章目录 242.有效的字母异位词349.两个数组的交集202.快乐数1.两数之和15.三数之和 242.有效的字母异位词 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是s 的字母异位词。 输入: s "anagram", t &qu…

数仓开发环境链接

这里写目录标题 1开发工具链接大数据组件1.1 启动hiveserver21.2配置DataGrip连接1.3测试使用 2 环境问题排查思路 1开发工具链接大数据组件 1.1 启动hiveserver2 数仓开发工具datagrip 需要用到JDBC协议链接到Hive&#xff0c;需要启动hiveserver2。 cd /opt/module/hive h…

Vue项目中,src目录下的vue.app文件介绍

在 Vue 项目中&#xff0c;src 文件夹通常包含了项目的核心代码。在这个文件夹下&#xff0c;App.vue 是一个特殊的文件&#xff0c;它代表了整个 Vue 应用的根组件。 App.vue 是一个单文件组件&#xff08;Single File Component, 简称 SFC&#xff09;&#xff0c;它允许你将…

c语言day4 运算符 表达式 三大控制结构

1&#xff1a; 2&#xff1a; 输入一个年月日 计算这是这一年的第几天 17 int year,month,day;18 printf("请输入年份 月份 日期");19 scanf("%d %d %d",&year,&month,&day);20 int feb28;21 if(year%40&&year%1…

周鸿祎首堂免费课与千万网友分享“AGI趋势”

“我讲课不割韭菜&#xff0c;宗旨是免费、分享、科普、交流。AI时代技术发展迅速&#xff0c;AI知识普及尤为重要。”2月29日&#xff0c;360公司创始人周鸿祎免费课正式开启&#xff0c;全网多平台直播了AI系列第一讲“预见AGI”&#xff0c;千万网友观看。免费课上&#xff…

BUUCTF crypto做题记录(11)新手向

一、[HDCTF2019]bbbbbbrsa 题目所给的信息我汇总到以下代码中 from base64 import b64encode as b32encode from gmpy2 import invert,gcd,iroot from Crypto.Util.number import * from binascii import a2b_hex,b2a_hex import randomflag "************************…

[Flutter]倒计时和计时器

1.延迟执行 Future.delayed 使用Future.delayed可以在延迟一定时间后执行代码。这是实现延迟执行最简单的方式之一。 Future.delayed(Duration(seconds: 1), () {// 这里的代码会在1秒后执行print(This message is displayed after 1 second.); }); Timer Timer类提供了更…

20240227-Python Tkinter学习笔记

文章目录 Label标签Label标签和Button按钮Listbox列表Radiobutton单选按钮Scale滑动条Checkbutton多选框Canvas画布Menubar 菜单Frame框架Messagebox弹窗pack/grid/place 布局方式登录注册案例 Label标签 import tkinter as tk # 导入tkinter模块&#xff0c;并简写为tk# 创建…