zoukankan      html  css  js  c++  java
  • JS日期联动及时间差计算

     题目:

      要求:在页面中显示当前日期,输入的日期、并显示两个日期相差天数、以及这两个日期分别是星期几

     结果展示:

     项目代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
    </head>
    <!-- 在页面中显示当前日期,输入的日期、并显示两个日期相差天数、以及这两个日期分别是星期几 -->
    <body onload="load()">
    <input type="text" id="time" style=" 300px;height: 45px;font-size: 18px;text-align: center;"><br><br>
    <form name="selectDate" action="">
    <select onchange="updateDay(selectDate.yyyy.value,selectDate.mm.value),getWeek(selectDate.yyyy.value,selectDate.mm.value,selectDate.dd.value)" name="yyyy" id="yyyy" style=" 80px;height: 30px;font-size: 18px;text-align: center;"></select><select onchange="updateDay(selectDate.yyyy.value,selectDate.mm.value),getWeek(selectDate.yyyy.value,selectDate.mm.value,selectDate.dd.value)" name="mm" id="mm" style=" 80px;height: 30px;font-size: 18px;text-align: center;"></select><select onchange="getWeek(selectDate.yyyy.value,selectDate.mm.value,selectDate.dd.value)" name="dd" id="dd" style=" 80px;height: 30px;font-size: 18px;text-align: center;"></select><span id="week"></span>
    </form>
    <hr>
    <button onclick="clas()">计算时间差</button>
    <input type="text" readonly="readonly" id="dateDiff">
    </body>
    <script>
    var time = document.getElementById('time');
    var newWeek = document.getElementById("week");
    var dateDiff = document.getElementById("dateDiff");
    function fun(){    
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth()+1;
        var day = now.getDate();
        var hours = now.getHours();
        var min = now.getMinutes();
        var sec = now.getSeconds();
        var week = now.getDay();
        time.value = year+""+month+""+day+""+hours+":"+min+":"+sec+"  星期"+a[week];
    }
    var a = ["","","","","","",""];
    //定时任务
    setInterval(function(){
        fun();
    },1000)
    
    //自定义日期
    function setDate(yyyy,mm){
        var sDate = new Date(yyyy,mm,0);
        console.log(sDate)
        return sDate;
    }
    
    var mList = [1,3,5,7,8,10,12];
    //根据年月更新日期
    function updateDay(yyyy,mm){
        var date = new Date();
        newDate = setDate(yyyy,mm);
        while(document.all.dd.childNodes.length>0){
            document.all.dd.removeChild(document.all.dd.childNodes[0]);
        }
        for (var i = 1; i <= newDate.getDate(); i++) {
            option = document.createElement("option");
            option.value = i;
            option.appendChild(document.createTextNode(i));
            document.all.dd.appendChild(option);
            if (date.getDate() == i) {
                option.selected = true;
            }
        }
    }
    
    //初始化工作
    function load(){
        //初始化年
        var date = new Date();
        var year = date.getFullYear();
        var y = 0;
        var m = 0;
        for (var i = year-10; i < year+15; i++) {
            option = document.createElement("option");
            option.value = i;
            option.appendChild(document.createTextNode(i));
            document.all.yyyy.appendChild(option);
            if (i == year) {
                option.selected = true;
                y = i;
            }
        }
        //初始化月
        for (var i = 1; i <= 12; i++) {
            option = document.createElement("option");
            option.value = i;
            option.appendChild(document.createTextNode(i));
            document.all.mm.appendChild(option);
            if (i == date.getMonth()+1) {
                option.selected = true;
                m = i;
            }
        }
        //初始化月
        var dd = ymChange(y,m);
        for (var i = 1; i <= dd; i++) {
            option = document.createElement("option");
            option.value = i;
            option.appendChild(document.createTextNode(i));
            document.all.dd.appendChild(option);
            if (date.getDate() == i) {
                option.selected = true;
            }
        }
        //显示星期几
        newWeek.innerText = "   星期"+a[date.getDay()];
    }
    
    //判断平年闰年
    function isRunYear(yyyy){
        return ((yyyy%4==0&&yyyy%100!=0)||(yyyy%400==0));
    }
    
    //年和月发生变化
    function ymChange(yyyy,mm){
        if (isRunYear(yyyy)) {
            if (mm == 2) {
                return 29;
            }else if(mList.indexOf(mm) >= 0){
                return 31;
            }else{
                return 30;
            }
        }
        if (!isRunYear(yyyy)) {
            if (mm == 2) {
                return 28;
            }else if(mList.indexOf(mm) >= 0){
                return 31;
            }else{
                return 30;
            }
        }
    }
    
    //判断星期几
    function getWeek(yyyy,mm,dd){
        var newDate = new Date(yyyy,mm-1,dd);
        newWeek.innerText = "   星期"+a[newDate.getDay()];
    }
    
    //计算时间差
    function clas(){
        var yyyy = document.getElementById('yyyy').value;
        var mm = document.getElementById("mm").value;
        var dd = document.getElementById("dd").value;
        var nDate = new Date();
        var sDate = new Date(yyyy,mm-1,dd);
        var daysDiff = (sDate.getTime() - nDate.getTime())/(1000*60*60*24);
        dateDiff.value = Math.abs(Math.ceil(daysDiff));
    }
    </script>
    </html>
  • 相关阅读:
    Python3 list基本操作
    Oracle Sql关于case-when,if-then,decode
    Oracle12c解锁scott测试用户
    Java得到下一天日期
    SQLiteTest源代码
    实况照片的视频合并
    一个支持中文的日志类
    为对话框添加背景图片
    获取当前应用程序的文件名
    Win7系统x64正在准备再循环
  • 原文地址:https://www.cnblogs.com/IT_CH/p/12435439.html
Copyright © 2011-2022 走看看