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();
}
总结
这几题主要是针对初学者对日期对象熟练度练习,是比较基础的常规练习;难度并不高,适合拿来练练手。