案例21-日期推算

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

    <h1>日期推算</h1>

    <input type="text">年

    <input type="text">月

    <input type="text">日

    <p>相差的天数<input type="text" value="100"></p>

    <button>计算</button>

    <hr>

    计算结果 <span>2019-4-10</span>

    <script>

        /*

            初始化 年月日

                1. 创建日期对象

                2. 取出 年 月 日 进行赋值给value

        */

        //如果不给参数,那么这里就是系统的当前时间

        var date =  new Date();

        var input = document.querySelectorAll('input');

        var btn = document.querySelector('button');

        var span = document.querySelector('span');


        //初始化年月日,默认设置为今天

        init();

        function init(){

            input[0].value = date.getFullYear();

            input[1].value = date.getMonth() + 1;

            input[2].value = date.getDate();

        }

        btn.onclick = function(){

            var txtYear = input[0].value;

            var txtMonth = input[1].value - 1;

            var txtDate = input[2].value;

            var discount = input[3].value;

            // console.log(txtYear, txtMonth, txtDate, discount);


            var dis = 1000 * 60 * 60 * 24 * discount;

            date.setFullYear(txtYear);

            date.setMonth(txtMonth);

            date.setDate(txtDate);

            // console.log(date);

            date.setMilliseconds(dis);

            // console.log(date);

            /*

                1s = 1000ms

                1分钟 = 60 * 1000

                一小时 = 60 * 1000 * 60

                一天 = 24 * 60 * 60 * 1000

            */

            console.log(date);

            span.innerHTML = date.getFullYear() + '年' + (date.getMonth() + 1 ) + '月' + date.getDate() + '日';

        }

    </script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在项目开发过程中,常遇到一样的方法,这时候就可以封装起来 PS:其实也过了好久,这里都已经不是最新的了 'use ...
    MsgSS阅读 740评论 0 0
  • JavaScript 1. type 类型判断 isString (o) {//是否字符串 returnObjec...
    Mr_ZhangH阅读 678评论 0 1
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,124评论 0 2
  • 1. 介绍:阐述 Date 对象。 Date对象,是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方...
    花差花差小宝阅读 642评论 0 1
  • 一路走来,很多人有过很多梦想,下过很多决心……在分差路的路口,越来越多的人,走着走着迷失了自我,每天叫醒他们的不再...
    简画儿阅读 51评论 0 2

友情链接更多精彩内容