JavaScript —— APIs(四)

一、日期对象

1.  实例化 new

括号里面为空,得到当前时刻的时间

括号里面为指定日期,得到对应日期的时间

注意:若括号里面只有年月日,没有时间,则得到的结果就没有时间;括号里面指定时间是多少,得到的时间就是多少

2.  日期对象方法

注意:月份一定要 +1 

注意:星期是从 0 开始,即周天是 0 ,周五是5,周六是6

【案例】

注意:添加定时器,可以实现时间不停的变动

注意:外面的是一开始页面刷新时不出现空白

           里面的是每隔一秒时间变一次

想要黄框中的时间每秒自动变化,则需要定时器中每次获取新的时间对象

获得日期的另一种方法

3.  时间戳 (可以实现倒计时)

①、获取时间戳的方式

注意:最后一种得不到指定时间的时间戳,前两种可以

获取指定时间的时间戳

②、根据日期获取星期几

③、【总结】

④、【倒计时案例】

<1> 得到剩余时间内的秒数

<2> 将秒转化为剩余的时分秒

转化公式

<3> 将对应的时分秒写到对应的盒子里面

以下两种方法都可以实现将时分秒写到对应的盒子里面

<4> 加入定时器,实现倒计时

<5> 【总代码】

二、节点操作

1.  DOM节点

2.  查找节点

①、父节点查找

②、子节点查找

③、兄弟关系查找

3.  增加节点

①、创建节点

②、追加节点

<1>  插入到这个父元素的最后一个子元素

父元素.appendchild(要插入的元素)

<2>  插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素,在哪个元素前面)

③、【案例】

<1>  有多少数据,就创建多少 li

<2>  把内容给 li

注意:不用需要复制 li 了,只复制里面的的 a 元素等就可以,再将数据变成活的

注意:要用innerHTML

           在改变图片数据时,记得要有空格

④、克隆节点

注意:

true深克隆,将克隆元素里面的所有东西都拿过来(例如:将li盒子拿过来,也将里面的文字样式拿过来)

false 浅克隆,只拿到li这个盒子

4.  删除节点

注意:display : none 页面中看不见元素,但是DOM节点中还有元素存在

           remove 页面中看不见元素 但是在DOM节点也不存在

注意:删除节点必须是父删子元素

三、M端事件

只能在移动端或者有触屏的地方才有效果

四、JS插件

在Swiper官网中,下载好文件后,打开package

将对应的JS和CSS文件放入到所写页面的文件夹中

在官网中找到自己想要的样式,找到其对应的编号,再引入两个文件

然后在新页面中打开所选东西,在查看源码,复制粘贴

注意:这里部分是定制部分,定制自己想要的效果

想要的效果的代码在Swiper官网中中的API文档中寻找

注意:定制部分一定要放到Swiper的下面

注意:每一个效果用逗号隔开

自动切换

五、【综合案例】

注意:autocomplete="off"    将以前输入的信息,再点击表单时,不显示出来

1.  录入模块

①、阻止默认提交

②、获取元素

③、创建新对象,并且追加到数组里面

④、提交后重置表单

⑤、渲染增加函数

注意:函数不调用,就不执行。

并且点击确认(追加内容时)的时候调用

实现一次性录入多条数据

先清空 tbody 以前的数据,防止一次性输入多组数据时,渲染出错

2.  删除模块

①、点击删除按钮的时候删除,点击其他按钮不删除

②、给每个 行都设置一个自定义属性,便于到时候每一组数据都有序号,知道删除哪个数据

注意:想要获得自定义属性得值,应该用 dataset.自定义属性名

③、删除完数组中的数据后,再重新渲染一下,让页面中表格中的数据被删除

3.  验证表单信息是否为空

①、获取所有带有name属性的元素

②、【总代码】

好啦!本次的分享就到这里啦!我们下次不见不散!!!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

身份证二要素核验介绍及使用方法

一、身份证二要素核验简介及重要性 身份证二要素核验是一种重要的身份验证技术&#xff0c;它在现代社会中发挥着至关重要的作用&#xff0c;特别是在涉及个人信息安全和隐私保护的领域。通过身份证二要素核验&#xff0c;我们可以有效地确认个人身份的真实性&#xff0c;从而…

爬虫学习笔记-数美验证

测试网址&#xff1a;智能验证码体验_图片验证码_数美科技数美科技智能验证码在线体验&#xff0c;智能识别风险用户级别&#xff0c;自行切换智能验证码难度及类型&#xff0c;提供滑动、拼图、点选、数字、动态等多种智能验证码服务&#xff0c;精准拦截机器行为。https://ww…

SOLIDWORKS Composer如何使用3D工具实现更真实的动画效果

当我们使用SOLIDWORKS composer创建动画时&#xff0c;往往会涉及到产品的安装与拆解&#xff0c;现实生活中我们在拆卸组装产品的时候&#xff0c;我们往往需要一些工具的协助&#xff0c;比如扳手、螺丝刀等等&#xff0c;那么我们如何在虚拟动画中也将这一过程以逼真的形式展…

新建云仓库

1.GitHub新建云仓库&#xff1a; LICENSE:开源许可证&#xff1b;README.md:仓库说明文件&#xff1b;开源项目&#xff1b;cocoaPodsName.podspec: CocoaPods项目的属性描述文件。 2.Coding新建云仓库&#xff1a; 备注&#xff1a; Coding新建项目&#xff1a;

STM32,复位和时钟控制

外部时钟 HSE 以后需要用到什么就这样直接拿去配就行了

左叶子之和(力扣404)

解题思路:用后序遍历找左孩子&#xff0c;需要注意的是左叶子需要通过其父节点来判断其是不是左叶子 具体代码&#xff1a; class Solution { public: int sumOfLeftLeaves(TreeNode * root) { if(rootNULL)return 0; if(root->leftNULL&&root->rightNULL)ret…

纳米尺度下的单粒子追踪,厦门大学方宁团队用 AI 奏响「细胞里的摇滚」

在微观世界里&#xff0c;每一个细胞都是一个繁忙的城市&#xff0c;而分子们则是这个城市中的居民。想象一下&#xff0c;如果我们能够追踪这些居民的每一个动作&#xff0c;或许便能够揭开生命奥秘的一角。这就是科学家们在活细胞中进行 3D 单粒子跟踪 (single particle trac…

lua整合redis

文章目录 lua基础只适合lua连接操作redis1.下载lua依赖2.导包,连接3.常用的命令1.set,get,push命令 2.自增管道命令命令集合4.使用redis操作lua1.实现秒杀功能synchronized关键字 分布式锁 lua 基础只适合 1.编译 -- 编译 luac a.lua -- 运行 lua a.lua2.命名规范 -- 多行注…

数字化转型成功的企业到底是什么样的?

数字化转型成功的企业通常具备以下特征&#xff1a; 1、以客户为中心的业务模式&#xff1a;成功的数字化转型企业将客户放在业务模式的核心位置&#xff0c;通过提供个性化的服务和产品来满足客户需求。这种以客户为中心的模式能够带来更好的客户体验和忠诚度。 2、强大的数…

Power BI 如何解决月份排序错误/乱序问题(自定义顺序/正确排序)

问题描述 在创建图标时&#xff0c;月份标签没有按照正确的顺序排列。 解决方案&#xff1a; Sort by Column 单击选中排序错误的列&#xff08;MMM&#xff09;根据列排序 (sort by Column)选择需要根据哪一列排序。 这里选择的是Month列&#xff0c;这一列有月份的序号1-…

Golang——GMP原理与调度

一. Golang调度器的由来 1.1 单进程时代不需要调度器 我们知道&#xff0c;一切软件都跑在操作系统上&#xff0c;真正用来干活(计算)的是CPU。早期的操作系统每一个程序就是一个进程&#xff0c;直到一个程序运行完&#xff0c;才能进行下一个进程&#xff0c;就是"单进程…

CSS盒子模型与常见问题

CSS盒子模型 显示模式转换显示模式 盒子模型边框线内边距padding 多值写法 尺寸计算与内减法模式外边距 清除默认样式元素溢出外边距问题合并现象塌陷现象 行内元素 – 内外边距问题 显示模式 显示模式&#xff1a;标签&#xff08;元素&#xff09;的显示方式作用&#xff1a;…

C++中的数制转换工具

一、引言 在编程和日常计算中&#xff0c;我们经常需要在不同的数制之间进行转换。二进制、十进制和十六进制是最常用的数制。二进制是计算机内部处理数据的基础&#xff0c;十进制是我们日常生活中最常用的数制&#xff0c;而十六进制则在编程和硬件相关领域中广泛使用。 二…

不要摆摊,不要开早餐店,原因如下

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 我最近开通了视频号会员专区嘛&#xff0c;专区有个问答功能可以提问&#xff0c;有个会员问了我问题&#xff0c;其中一条问答分享给大家&#xff1a; 松哥&#xff0c;突然想去兼职&#xff0c;早上卖点杂粮煎饼果…

小塔 | 时尚领域RFID应用,别人早你一步!

优衣库&#xff0c;作为知名服装品牌零售商&#xff0c;近年来在数字化转型的道路上取得了显著的成果。其中&#xff0c;RFID技术的应用成为了优衣库提升运营效率、优化客户体验以及实现精准营销的重要工具。 RFID助力时尚门店品牌升级 优衣库深知RFID技术的潜力&#xff0c;将…

web--跨域,cors,jsonp,域名接管劫持

同源策略 可以放在csrf cosp 解决同源策略 它会将会从xiaodi这个网站中去获取资源&#xff0c;然后发送给localhost这个网站 就获取到了资源 jsonp 就是这个网站的回调信息有个人的数据 就看callback有没有回调信息 域名接管 当右边两个域名过期&#xff0c;就可以注册它的域名…

Git 安装及配置教程(Windows)【安装】

文章目录 一、 下载1. 官网下载2. 其它渠道 二、 安装三、 配置四、 更新 软件 / 环境安装及配置目录 一、 下载 1. 官网下载 安装地址&#xff1a;https://git-scm.com/download 2. 其它渠道 &#xff08;1&#xff09;百度网盘&#xff08;2.44.0 版本&#xff09; 链接…

使用FPGA实现逐级进位加法器

介绍 逐级进位加法器就是将上一位的输出作为下一位的进位输入&#xff0c;依次这样相加。下面以一个8位逐级进位加法器给大家展示。 我增加了电路结构&#xff0c;应该很容易理解吧。 下面我也列举了一位加法器&#xff0c;可以看下。 电路结构 设计文件 1位加法器 librar…

【Python爬虫】爬取淘宝商品数据——新手教程

大数据时代&#xff0c; 数据收集不仅是科学研究的基石&#xff0c; 更是企业决策的关键。 然而&#xff0c;如何高效地收集数据 成了摆在我们面前的一项重要任务。 本文将为你揭示&#xff0c; 一系列实时数据采集方法&#xff0c; 助你在信息洪流中&#xff0c; 找到…

SpringCloud基础 Consul的引入

前言 首先是为什么引入consul这个组件 我们知道微服务分为很多个模块,这里模块中相互调用,我使用硬编码的模式是不好的 比如微服务模块需要更新的时候,我们使用硬编码的方式可能需要修改很多个地方 但是使用consul之后,就引入了注册中心,我们只需要将对应的服务注册为节点 这样…