JS [日期对象基础] | 刷题打卡

吐槽君 分类:javascript

日期对象基础--练手编程题(适合初学者)

题目描述

1. 计算某日期是当年的第几天,占那一年的几分之几

 需求:   
 1.用户输入日期;  如:2021-1-1     
 2.输出:这是2021年第31天,你已经度过了8.76%
 

2. 根据不同的时间段,做不同的问候

 需求:
  1.用户输入当前时间
  2.判断当前时间满足以下条件:   
  00:00 ~ 12:00 输出:早上好  
  12:00 ~ 14:00 输出:中午好   
  14:00 ~ 18:00 输出:下午好  
  18:00 ~ 23:00 输出:晚上好 
 

3. 计时器

 需求:计算出到截止时间还剩多少时间   
  1.用户输入截止时间;  如:2021-1-1 12:30:00     
  2.输出:当前距离2021-1-1 12:30:00还剩x天x时x分x秒
 

4. 加时器

需求: 给当前时间点击加上一小段固定的时间  
  1.用户点击;  如:点击加五分钟    
  2.输出:运算后的之后的时间  如:x天x时x+5分x秒
 

思路分析

计算某日期是当年的第几天,占那一年的几分之几

  • 获取当前年份的第一天,
  • 用输入的日期-当前年份的第一天=这一天是这一年的第几天,
  • 获取下一年的第一天,
  • 下一年的第一天-当前的第一天=今年有多少天
  • 最后:这一年的第几天除以今年有多少天*100%=度过了这一年的几分之几

示例

 // 判断某年某日过了那年的几天 过了几分之几
        var fn0 = time => {
            var nowtime = new Date(+time[0], +time[1], +time[2]);
            var year = nowtime.getFullYear();//获取当年
            var nowyear = new Date(year, 0, 0);
            var nextyear = new Date(year + 1, 0, 0);
            var day = (nowtime - nowyear) / (24 * 3600) / 1000;//天数
            var allday = (nextyear - nowyear) / (24 * 3600)     / 1000;//这一年有多少天
            alert(`这是${year}年的第${day}天\n目前已经过了${(day / allday) * 100}%`)
        }
        fn0(prompt("请输入年-月-日:").split("-"));

 

根据不同时间段,做不同的问候

  • 获取用户输入的时间,
  • 判断属于那个区间,
  • 根据区间的不同输出不同结果,

示例

        var fn1 = time => {
            var hour = time.getHours();
            var said = "";
            hour >= 0 && hour < 12 && (said = "早上好!")
            hour >= 12 && hour < 14 && (said = "中午好!")
            hour >= 14 && hour < 18 && (said = "下午好!")
            hour >= 18 && (said = "晚上好!")
            console.log(said);
        }
        fn1(new Date()); 
 

倒计时器

  • 获取用户输入截止时间和当前时间,
  • 计算两个时间的差值,
  • 将差值转换为天、时、分、秒的结合,
  • 最后再通过延时器setInterval循环调用执行,即可实现倒计时跳动。

示例

   // 倒计时器
    var fn0 = () => {//获取截止时间
        var d = document.getElementsByClassName("d")[0].value;
        var t = document.getElementsByClassName("t")[0].value;
        d = d.split("-");
        t = t.split(":");
        //将输入值数值化后作为参数,初始化为时间对象作为返回值
        var time = new Date(+d[0], +d[1] - 1, +d[2], +t[0], +t[1]);
        return time;
    }
    var fn1 = time => {//计算时间差距,并返回时间差值(x天、x时、x分、x秒)
        var nowtime = new Date();//当前时间
        //将时间差距转为数组,切除毫秒部分,保留精确到秒钟的number类型数值
        var i = (time - nowtime).toLocaleString().split(",");
        i.splice(-1, 1);
        var sum = +i.join("");
        //思路:求出时间差距,再将时间差距转化为天、时、分、秒
        //       时间差距先转化为天,不足一天的时间转化为分,以此类推。
        var d = ~~(sum / (24 * 3600));//获取天数
        var h = ~~((sum - (d * 24 * 3600)) / 3600);//获取小时数
        var m = ~~((sum - (d * 24 * 3600) - (h * 3600)) / 60);//获取分钟数
        var s = sum - (d * 24 * 3600) - (h * 3600) - (m * 60);//获取秒钟数
        return [d, h, m, s];
    }
    var fn2 = () => {
            var t0 = fn0();
            var t1 = fn1(t0);
            if(t1[3]<0){
                document.getElementsByClassName("txt")[0].innerHTML = "时间不能倒流!"
                return;
            }
            document.getElementsByClassName("txt")[0].innerHTML = "距离截止时间还剩" + t1[0] + "天" + t1[1] + "时" + t1[2] + "分" + t1[3] + "秒";
            setInterval("fn2()", 1000);
    }
 

加时器

  • 获取对应的天、时、分、秒的时间,
  • 添加事件给对应的时间添加即可,

示例

        var time = new Date();
        var fn3 = () => {
            time.setSeconds(time.getSeconds()+5); 
            document.getElementsByClassName("jsq")[0].innerHTML=time.toLocaleString();  
        }
        var fn4 = () => {
            time.setMinutes(time.getMinutes()+5);
            document.getElementsByClassName("jsq")[0].innerHTML=time.toLocaleString(); 
        }
        var fn5 = () => {
            time.setDate(time.getDate()+5); 
            document.getElementsByClassName("jsq")[0].innerHTML=time.toLocaleString();  
        }
        var fn6 = () => {
            time.setMonth(time.getMonth()+5); 
            document.getElementsByClassName("jsq")[0].innerHTML=time.toLocaleString(); 
        }
        var fn7 = () => {
            time.setFullYear(time.getFullYear()+5);
            document.getElementsByClassName("jsq")[0].innerHTML=time.toLocaleString();
        }
       
 

总结

这几题主要是针对初学者对日期对象熟练度练习,是比较基础的常规练习;难度并不高,适合拿来练练手。

回复

我来回复
  • 暂无回复内容