08js-函数时间差

最新推荐文章于 2023-10-25 11:40:42 发布

weixin_41968495

最新推荐文章于 2023-10-25 11:40:42 发布

阅读量171

点赞数

分类专栏：原生js 文章标签： js select 时间差

本文链接：https://blog.csdn.net/weixin_41968495/article/details/81590415

版权

原生js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css：

<body>
<select id="year-select" οnchange="timeChange()"></select>
<select id="month-select" οnchange="timeChange()"></select>
<select id="day-select" οnchange="timeChange()"></select>
<select id="hour-select" οnchange="timeChange()"></select>
<select id="minite-select" οnchange="timeChange()"></select>
<select id="second-select" οnchange="timeChange()"></select>
<p id="result-wrapper">现在距离 2001年1月1日星期X HH:MM:SS 还有 X 天 X 小时 X 分 X 秒</p>
</body>

当变更任何一个select选择时，更新 result-wrapper 的内容
当所选时间早于现在时间时，文案为现在距离 "所选时间" 已经过去 xxxx
当所选时间晚于现在时间时，文案为现在距离 "所选时间" 还有 xxxx
注意当前时间经过所选时间时候的文案变化
注意选择不同月份的时候，日期的可选范围不一样，比如1月可以选31天，11月只有30天，注意闰年
同样，需要注意，通过优雅的函数封装，使得代码更加可读且可维护

思路：在原生js中，用select选择的onchange函数实现，我的理解是onchange就是刷新函数，当我选择不同的年份，月份时候，我要在刷新函数里面去获得被选择的值。这里给每个select都绑定该函数。

年份，月份，这些是提前生成好的固定的数。年份我可以自选，月份只有1-12月。主要难点在天数，让它根据年和月份来变换。

首先获取到选择框元素：

var year=document.getElementById('year-select');
var month=document.getElementById('month-select');
var day=document.getElementById('day-select');
var hour=document.getElementById('hour-select');
var minite=document.getElementById('minite-select');
var second=document.getElementById('second-select');

生成年份和月份的函数（这里主要学到了怎么select动态生成options并给它赋值）：

function createYearOp() {
    var date = new Date();
    for(var i=2000;i<date.getFullYear()+1;i++){
        var opt=document.createElement('option');
        opt.value=i;
        opt.innerText=i;
        year.appendChild(opt);
    }
}
createYearOp();

function createMonthOp() {
    for(var i=1;i<13;i++){
        var opt=document.createElement('option');
        opt.value=i;
        opt.innerText=i;
        month.appendChild(opt);
    }
}
createMonthOp();

生成天数的函数（有传参，配合后面判断闰年的函数）：

function createDayOp(days) {
    for(var i=1;i<days;i++){
        var opt=document.createElement('option');
        opt.value=i;
        opt.innerText=i;
        day.appendChild(opt);
    }

}
createDayOp(32);//这里默认它生成一个月31天

生成时、分、秒的函数：

function createHms(hms) {
    for(var i=0;i<60;i++){
        if(i<10){//使时间格式化00:00:00
            i="0"+i;
        }
        var opt=document.createElement('option');
        opt.value=i;
        opt.innerText=i;
        hms.appendChild(opt);
    }

}
createHms(hour);
createHms(minite);
createHms(second);

此时生成了默认的时间（但互相之间没有建立联系），所以为了建立联系，取得此时我选择的各个时间值，封装成函数（这里主要学到了怎么取得select被选择的当前值，用obj.options[obj.selectedIndex]）：

function select(obj) {//返回当前被选择的对象
    var Index=obj.selectedIndex;
    var Value=obj.options[Index].value;
    return Value;
}

主要函数onchange建立年月日之间的联系（还有比较函数也在里面，因为要实时刷新）：

function timeChange() {
    var date = new Date();
      y=select(year);
      m=select(month);
      d=select(day);
      h=select(hour);
      w=getWeekday(date.getDay());
      t=select(minite);
      s=select(second);
      if(m==1||m==3||m==5||m==7||m==8||m==10||m==12){//这里就是建立月份与天数的关系
        createDayOp(32);
    }else if(m==2){//如果月份为2的话
        if((y%4==0)&&(y%100!=0)){//先判断年份是否为闰年
            createDayOp(30);
        }else {createDayOp(29);}
    }else {
        createDayOp(31);
    }
    show(y,m,d,w,h,t,s);//与当前时间比较函数
}

function getWeekday(w){//星期比较特殊，转换为中文
    var weekday=new Array(7);
    weekday[0]="星期日";
    weekday[1]="星期一";
    weekday[2]="星期二";
    weekday[3]="星期三";
    weekday[4]="星期四";
    weekday[5]="星期五";
    weekday[6]="星期六";
    return weekday[w];
}

被封装的比较函数：

function show(y,m,d,w,h,t,s){
    var date = new Date();//得到当前时间
    var date1=new Date(y+"/"+m+"/"+d+"  "+h+":"+t+":"+s);//将字符串转换为时间
    var second=date1.getTime()-date.getTime();//得到两个时间的相差毫秒数
    if(second<0) {
        second = -second;
        var time1=transfer(second);//将毫秒数转换成几天几时几秒
        document.getElementById('result-wrapper').innerHTML = "现在距离" + y + "年 " + m + "月" + d + "日 " + w + "  " + h + ":" + t + ":" + s + "已经过去了" + time1;
    }else {
       var time2=transfer(second);
        document.getElementById('result-wrapper').innerHTML = "现在距离" + y + "年 " + m + "月" + d + "日 " + w + "  " + h + ":" + t + ":" + s + "还有" +time2;

    }
}

毫秒数转换成几天几时几秒的函数：

function transfer(second) {
    var days = Math.floor(second / (24 * 3600 * 1000));
    var leave1 = second % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
    var hours = Math.floor(leave1 / (3600 * 1000))
    //计算相差分钟数
    var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
    var minutes = Math.floor(leave2 / (60 * 1000))
    //计算相差秒数
    var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
    var seconds = Math.round(leave3 / 1000)
    var time=days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒";
    return time;
}

今天碰到的问题：

1.思路问题：刚开始以为在各自的创造年，月，日的函数中先取得先前的值就行，忽略了两个问题，函数里的参数传不出来，而且无法更新所选取的值，后面在网上搜到了onchange函数，可以在点击选择框之后更新。由此我将取值还有一些动态的改变都放在该函数。

2.新知识的记录：

关于select：

2.1 select动态生成options：

var sel=document.getElementById('select');

var opt=document.createElement('option');

opt.value=XX;

opt.innerText=XX;

sel.appendchild(opt);

2.2 select的onchange函数可以是刷新函数

2.3如何取得被选中的select的选项的值：

var Index=obj.selectedIndex;

var Value=obj.options[Index].value;

关于时间：

2.1闰年就是被4整除但不被100整除的年份

2.2格式化时间：

if(i<10){

i="0"+i;}

2.3如何将字符串转换为时间：

var date1=new Date(y+"/"+m+"/"+d+" "+h+":"+t+":"+s);

2.4计算两个时间相差的毫秒数并转换为天，时，分，秒：

var date3=date1.getTime()-date2.getTime();

var days=Math.round(date3/24*3600*1000);//天

var leave1=date3%24*3600*1000;

var hours=leave1/3600*1000;//小时

var leave2=leave1%3600*1000;

var minutes=leave2/60*1000;//分钟

var leave3=leave2%60*1000;

var second=leave3/1000;//秒

weixin_41968495

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
08js-函数时间差

css：&lt;body&gt;&lt;select id="year-select" onchange="timeChange()"&gt;&lt;/select&gt;&lt;select id="month-select" onchange="timeChange()"&gt;&lt;/select&gt;&lt;sel
复制链接

扫一扫