JS-WebAPIS(四)

日期对象(常用)

• 实例化

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

  • 获得当前时间

  • 获得指定时间 

• 时间对象方法

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

• 时间戳

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

什么是时间戳

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

算法:

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

三种方式获取时间戳:

  • 使用 getTime() 方法

  • 简写 +new Date()

  • 使用 Date.now() 

案例:倒计时案例

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

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

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

<!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>

 


节点操作(常用)

• DOM 节点

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

  • 节点类型()

 总结:

1. 什么是DOM 节点?

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

2. DOM节点的分类?

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

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

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

• 查找节点

父节点查找:

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

子节点查找: 

  • childNodes

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

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

兄弟节点查找: 

1. 下一个兄弟节点

  • nextElementSibling 属性

2. 上一个兄弟节点

  • previousElementSibling 属性

• 增加节点(重点)

场景:

 

1.创建节点

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

 2.追加节点

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

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

 

• 删除节点

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

注:

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

M端事件(移动端)

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

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

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同时使用的时候, 类名需要注意区分

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

综合案例

学生信息表案例

说明:

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

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

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

<!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++) {//创建trconst 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>

 

 

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

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

相关文章

【2023我的编程之旅】七次不同的计算机二级考试经历分享

目录 我报考过的科目 第一次报考MS Office 第二次报考Web语言&#xff0c;C语言&#xff0c;C语言 第三次报考C语言&#xff0c;C语言&#xff0c;Java语言 分享一些备考二级的方法 一些需要注意的细节 结语 2023年的CSDN征文活动已经进入了尾声&#xff0c;在这最后我…

Excel·VBA合并工作簿2

其他合并工作簿的方法&#xff0c;见之前的文章《ExcelVBA合并工作簿》 目录 8&#xff0c;合并文件夹下所有工作簿中所有工作表&#xff0c;按表头汇总举例 8&#xff0c;合并文件夹下所有工作簿中所有工作表&#xff0c;按表头汇总 与之前的文章《ExcelVBA合并工作簿&#x…

006.Oracle事务处理

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

vue2 点击按钮下载文件保存到本地(后台返回的zip压缩流)

// import ./mock/index.js; // 该项目所有请求使用mockjs模拟 去掉mock页面url下载 console.log(res, res)//token 是使页面不用去登录了if (res.file) {window.location.href Vue.prototype.$config.VUE_APP_BASE_IDSWAPI Vue.prototype.$config.VUE_APP_IDSW /service/mode…

【Linux上创建一个LVM卷组,将多个物理卷添加到卷组中使用】

Linux上创建一个LVM卷组&#xff0c;将多个物理卷添加到卷组中使用 目录1.列出当前系统中所有的块设备信息&#xff0c;包括磁盘、分区、逻辑卷等2.对磁盘进行分区操作3.创建了一个名为 vg_data 的卷组4.将物理卷添加到已经存在的卷组5.在卷组中创建一个逻辑卷6.查看已创建的 L…

CodeWave智能开发平台--03--目标:应用创建--10初级采购管理系统总结

摘要 本文是网易数帆CodeWave智能开发平台系列的第14篇&#xff0c;主要介绍了基于CodeWave平台文档的新手入门进行学习&#xff0c;实现一个完整的应用&#xff0c;本文主要完成10初级采购管理系统总结 CodeWave智能开发平台的14次接触 CodeWave参考资源 网易数帆CodeWave…

【C++】string的基本使用

从这篇博客开始&#xff0c;我们的C部分就进入到了STL&#xff0c;STL的出现可以说是C发展历史上非常关键的一步&#xff0c;自此C和C语言有了较为明显的差别。那么什么是STL呢&#xff1f; 后来不断的演化&#xff0c;发展成了知名的两个版本&#xff0c;一个叫做P.J.版本&am…

【鸿蒙4.0】详解harmonyos开发语言ArkTS

文章目录 一.什么是ArkTS&#xff1f;1.ArkTS的背景2.了解js&#xff0c;ts&#xff0c;ArkTS的演变js(Javascript)Javascript的简介Javascript的特点 ts(Typescript)ArkTS 二. ArkTS的特点 一.什么是ArkTS&#xff1f; 1.ArkTS的背景 如官方文档所描述&#xff0c;ArkTS是基…

Ubuntu使用docker-compose安装mysql8或mysql5.7

ubuntu环境搭建专栏&#x1f517;点击跳转 Ubuntu系统环境搭建&#xff08;十四&#xff09;——使用docker-compose安装mysql8或mysql5.7 文章目录 Ubuntu系统环境搭建&#xff08;十四&#xff09;——使用docker-compose安装mysql8或mysql5.7MySQL81.新建文件夹2.创建docke…

【问题记录】Linux下克隆git项目到本地

1.出现远端克隆git上代码失败 &#xff08;1&#xff09;公钥有问题 linux下git生成公钥失败 解决方法&#xff1a; 删除.ssh下全部的文件&#xff0c;并重新设置用户名和邮箱再重新生成ssh公钥 &#xff08;2&#xff09;在询问是不是要把远端地址加入到konw_host中&#x…

【高等数学之牛莱公式】

一、深入挖掘定积分 二、变限积分 三、变限积分的"天然"连续性 四、微积分基本定理 五、定积分基本方法 5.1、换元法 5.2、分部积分法 六、定积分经典结论 七、区间再现公式 八、三角函数积分变换公式 九、周期函数积分变换公式 十、分段函数求定积分

python requests模块

目录 一&#xff1a;介绍 二&#xff1a;发送get请求 三&#xff1a;发送post请求 四&#xff1a;发送put请求 五&#xff1a;发送delele请求 六&#xff1a;响应信息 一&#xff1a;介绍 requests 是 Python 中的一个非常流行的 HTTP 客户端库&#xff0c;用于发送 HTTP…

Python 爬虫 之 抖音视频采集

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 知识点: 动态数据抓包 requests发送请求 开发环境: python 3.8 运行代码 pycharm 2022.3 辅助敲代码 requests pip install requests 如何安装python第三方模块: win R 输入 cmd 点击确定, 输入安装命令 pip install …

论文阅读笔记AI篇 —— Transformer模型理论+实战 (四)

论文阅读笔记AI篇 —— Transformer模型理论实战 &#xff08;四&#xff09; 一、理论1.1 理论研读1.2 什么是AI Agent? 二、实战2.1 先导知识2.1.1 tensor的创建与使用2.1.2 PyTorch的模块2.1.2.1 torch.nn.Module类的继承与使用2.1.2.2 torch.nn.Linear类 2.2 Transformer代…

k8s源码阅读:Informer源码解析

写在之前 Kubernetes的Informer机制是一种用于监控资源对象变化的机制。它提供了一种简化开发者编写控制器的方式&#xff0c;允许控制器能够及时感知并响应 Kubernetes 集群中资源对象的变化。Informer通过与Kubernetes API服务器进行交互&#xff0c;通过监听API服务器上资源…

Idea 开发环境不断切换git代码分支导致冲掉别人代码

问题分析 使用git reflog查看执行命令&#xff0c;以下是发生事故的切换和提交动作 46f72622e1 HEAD{41}: commit: feat: 【Sales - 6.3】小程序端不登录也可以录入客户线索 c5e7d9f6e1 HEAD{42}: fetch origin feature/20240102_Sales6.3_xingang:feature/20240102_Sales6.3…

零基础小白刚刚入门Python的注意点总结~

文章目录 一、注意你的Python版本1.print()函数2.raw_input()与input()3.比较符号&#xff0c;使用!替换<>4.repr函数5.exec()函数 二、新手常遇到的问题1、如何写多行程序&#xff1f;2、如何执行.py文件&#xff1f;3、and&#xff0c;or&#xff0c;not4、True和False…

代码随想录算法训练营Day24 | 122.买卖股票的最佳时期、55.跳跃游戏、45.跳跃游戏||

LeetCode 122 买卖股票的最佳时期 本题思路&#xff1a;记录每天的利润值&#xff0c;第一天的为 0 &#xff0c;第二天的当天的减去前一天的。然后遍历相加为正的利润值。最后得到的结果就是最大利润。 class Solution {public int maxProfit(int[] prices) {int res 0;for(…

使用Nginx和Fancyindex组合搭建文件下载站点详细教程

目录 简介 TIPS 1.下载Nginx 2. 安装Fancyindex和Nginx-Fancyindex-Theme模块 2.1 安装编译工具和依赖 2.2 下载Fancyindex和Nginx-Fancyindex-Theme 2.3 编译Nginx并包括Fancyindex 3. 配置Nginx 4.体验 4.1light主题 4.2dark主题 后记 简介 当使用Nginx和Fancyinde…

Unity3D学习之Unity基础

文章目录 1. 第一部分&#xff1a;MONO中的重要内容2. 延时函数2.1 什么是延时函数2.2 延时函数的使用2.2.1 延时重复函数2.2.2 取消延迟函数2.2.3 判断是否有延迟函数开启2.2.4 延迟函数和依附对象的关系 3 协同程序3.1 Unity中的多线程3.2 协同程序3.3 协程的使用3.3.1 关闭协…