js小案例-时间差的计算

小案例--计算时间差
 
点击按钮的时候,计算两个时间的差值,主要是将日期转化为毫秒,方法有3种,这里用Date.parse,推荐使用这个
 
* 时间和时间的相减:时间的相关计算,都要先转成纪元时间(把一个时间转成毫秒数),再相减,再把结果转成指定的格式
* getTime() 获取纪元时间,
* Date.parse(“2015-08-24”)//返回指定日期距1970-1-1零时的毫秒数
* Date.now();//返回执行这行代码时(现在)距1970-1-1零时的毫秒数
<!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>Document</title>
</head>

<body>
    <input type="date" id="num"><input type="date" id="num1">
    <input type="submit" value="时间差" id="btn">
    <span id="res"></span>
</body>
<script>
    (function () {
        var num = document.getElementById('num');
        var num1 = document.getElementById('num1');
        var btn = document.getElementById('btn');
        var res = document.getElementById('res');
        btn.onclick = function () {
            var num2 = num.value;//获取表单里的日期2019-12-08
            var num3 = num1.value;
            var startnum = Date.parse(num2);//将日期转化为毫秒
            var endnum = Date.parse(num3);
            var tdoa = (endnum - startnum) / 1000 / 60 / 60 / 24;//相减再转化为天数
            res.innerHTML = num2 + '到' + num3 + '相差' + tdoa + '天';

        }
    })();
</script>

</html>

 

转载于:https://www.cnblogs.com/muyun123/p/11424617.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 JavaScript 实现的简单的轮播图案例: ```html <!DOCTYPE html> <html> <head> <title>JavaScript 案例:轮播图</title> <style> #slideshow { position: relative; width: 600px; height: 400px; margin: 0 auto; overflow: hidden; } #slideshow img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } #slideshow img.active { opacity: 1; } #slideshow button { position: absolute; top: 50%; transform: translateY(-50%); background-color: #fff; border: none; padding: 10px; cursor: pointer; font-size: 24px; } #slideshow button.prev { left: 0; } #slideshow button.next { right: 0; } </style> <script> var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]; var index = 0; var slideshow = document.getElementById("slideshow"); var prevButton = document.createElement("button"); var nextButton = document.createElement("button"); function init() { prevButton.innerHTML = "❮"; prevButton.classList.add("prev"); prevButton.addEventListener("click", prevSlide); nextButton.innerHTML = "❯"; nextButton.classList.add("next"); nextButton.addEventListener("click", nextSlide); slideshow.appendChild(prevButton); slideshow.appendChild(nextButton); showSlide(); setInterval(nextSlide, 5000); } function showSlide() { var img = document.createElement("img"); img.src = images[index]; img.classList.add("active"); slideshow.appendChild(img); } function hideSlide() { var activeImg = slideshow.querySelector(".active"); activeImg.classList.remove("active"); slideshow.removeChild(activeImg); } function prevSlide() { hideSlide(); index--; if (index < 0) { index = images.length - 1; } showSlide(); } function nextSlide() { hideSlide(); index++; if (index >= images.length) { index = 0; } showSlide(); } window.addEventListener("load", init); </script> </head> <body> <h1>轮播图</h1> <div id="slideshow"></div> </body> </html> ``` 在这个案例中,我们使用了 JavaScript 来实现一个基本的轮播图。在 HTML 中,我们定义了一个包含图片的 div 元素,并使用 CSS 来设置其样式。在 JavaScript 中,我们定义了一个 images 数组来存储图片的文件名,一个 index 变量来记录当前显示的图片的索引,以及 prevButton 和 nextButton 两个按钮元素来控制切换图片。在 init 函数中,我们初始化轮播图,并设置了自动切换的定时器。在 showSlide 函数中,我们创建一个 img 元素,并将其添加到轮播图中。在 hideSlide 函数中,我们移除当前显示的图片。在 prevSlide 函数和 nextSlide 函数中,我们分别实现了向前和向后切换图片的逻辑。最后,我们在 window 的 load 事件中调用 init 函数来初始化轮播图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值