JS教程之如何从 JavaScript 日期中添加或删除日期

83 篇文章 24 订阅 ¥59.90 ¥99.00

当您在使用时间的项目上工作时,JavaScript 日期操作可能非常重要。简单.add()的.subtract()日期操作不是直接在 JavaScript 中实现的,但我们可以通过我们自己的实现来实现。

1. 初始化

请添加图片描述

当我们处于创建日期的预状态并且我们可以访问每种类型的日期参数时——我们可以修改传递的输入,日期也会相应地改变。

日期修改的一个例子——我们想在June 15, 2022. 我们只需将数字添加5到days参数中,更改将影响日期,即使数字超过一个月的边缘:

new Date(2022, 5, 15 + 5);

2.设置参数

另一种方法是使用相应的值设置参数。我们可以通过get添加/减去任意数量的日期类型并将新值设置为日期的日期类型的方法来获取该值。

这可能更有用,因为我们不需要一开始的初始化值,我们可以稍后修改它。

一个设置的例子——我们想从 中减去 4 个月June 15, 2022。我们通过以下方式进行设置参数的过程:

var date = new Date(2022, 5, 15);
date.setMonths(date.getMonths() - 4);

3. Milliseconds

另一种方法是以毫秒为单位设置日期,它可能是最不受欢迎的,因为您必须计算一个新日期,但它仍然可以工作。我们可以以毫秒为单位添加日期类型的数量,这涉及很多大整数。

以毫秒为

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的影片资讯的动态添加和按编号删除JavaScript 代码实现: HTML 代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>影片资讯</title> </head> <body> <h1>影片资讯</h1> <form id="form"> <label for="title">标题:</label> <input type="text" id="title" required> <br> <label for="director">导演:</label> <input type="text" id="director" required> <br> <label for="releaseDate">上映日期:</label> <input type="date" id="releaseDate" required> <br> <button type="submit">添加影片</button> </form> <ul id="movies"></ul> <script src="script.js"></script> </body> </html> ``` JavaScript 代码: ```js const form = document.getElementById('form'); const movieList = document.getElementById('movies'); let movies = []; // 添加影片 form.addEventListener('submit', (event) => { event.preventDefault(); const title = event.target.title.value; const director = event.target.director.value; const releaseDate = event.target.releaseDate.value; const movie = { title, director, releaseDate }; movies.push(movie); renderMovies(); form.reset(); }); // 删除影片 movieList.addEventListener('click', (event) => { if (event.target.tagName.toLowerCase() === 'button') { const index = parseInt(event.target.dataset.index); movies.splice(index, 1); renderMovies(); } }); // 渲染影片列表 function renderMovies() { movieList.innerHTML = ''; movies.forEach((movie, index) => { const li = document.createElement('li'); li.innerHTML = ` <h2>${movie.title}</h2> <p>导演:${movie.director}</p> <p>上映日期:${movie.releaseDate}</p> <button data-index="${index}">删除</button> `; movieList.appendChild(li); }); } ``` 代码解析: 1. 首先获取 HTML 的表单元素 `form` 和影片列表元素 `movieList`,以及创建一个空数组 `movies` 用来存储影片资讯。 2. 监听表单的提交事件,当表单提交时,获取表单输入的标题、导演和上映日期,然后创建一个包含这些信息的对象 `movie`,将其添加到 `movies` 数组,最后调用 `renderMovies` 函数渲染影片列表,并清空表单。 3. 监听影片列表的点击事件,当用户点击某个影片的删除按钮时,获取该影片在数组的索引 `index`,使用 `splice` 方法将其从数组删除,然后重新渲染影片列表。 4. 定义 `renderMovies` 函数,该函数首先清空影片列表,然后遍历 `movies` 数组,为每个影片创建一个 `li` 元素,并将其添加到影片列表。每个 `li` 元素包括影片的标题、导演、上映日期和一个删除按钮,该按钮的 `data-index` 属性设置为该影片在数组的索引。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知识大胖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值