Date实战案例倒计时和日历控件,分享案例的核心思想,应用Date的方法,主要应用的date方法如下:
Date.now()
Date.parse()
getFullYear()
getMonth()
getDate()
getDay()
setDate()
案例一:倒计时
倒计时功能最典型的应用就是我们在电商App上看见的各种抢购倒计时,以及什么跨年倒计时呀,活动倒计时等等。倒计时的核心思想:就是计算目标时间和当前时间的一个时间差,我们先看本案例效果图:
以计算距离2019年倒计时为例,下面是代码分享:`
<style type="text/css">
.div-date{
height: 90px;
width: 600px;
text-align: center;
line-height: 90px;
margin: auto;
border: 1px solid #eee;
}
</style>
<body>
<--倒计时时间显示的标签-->
<div class="div-date">
</div>
</body>
<script type="text/javascript">
function toDou(n){ // 用于补0的方法
if(n<10){
return '0'+n;
}else{
return ''+n;
}
}
function countDown (targetDate) { // 参数targetDate是目标时间
var targetDateMs = Date.parse(targetDate); // 目标时间毫秒数
var myDate = new Date()
var curDateMs = Date.now(); // 获取当前时间毫秒数 方法1
// var curDateMs = Date.parse(myDate) // 获取当前时间的毫秒数 方法2
if (curDateMs != targetDateMs) { // 当前时间只要不等于目标时间毫秒数
var timeDifference = targetDateMs-curDateMs; // 当前时间与目标时间的时间差毫秒数
var monthTotalMs = 1000 * 60 * 60 * 24 * 30; // 月毫秒总数
var dayTotalMs = 1000 * 60 * 60 * 24; // 1天毫秒总数
var hoursTotalMs = 1000 * 60 * 60; // 1小时毫秒总数
var minutesTotalMs = 1000 * 60; // 1分钟毫秒总数
var month = Math.floor(timeDifference / monthTotalMs); //计算月
var surplusDayMs = timeDifference - (month * monthTotalMs); // 计算减去月后剩余的毫秒数
var day = Math.floor(surplusDayMs / dayTotalMs); // 计算天
var surplusHoursMs = surplusDayMs - (day * dayTotalMs); // 计算减去天后剩余的毫秒总数
var hours = Math.floor(surplusHoursMs / hoursTotalMs); // 计算小时
var surplusMinutesMs = surplusHoursMs - (hours * hoursTotalMs); // 计算减去小时后还剩余的毫秒总数
var minutes = Math.floor(surplusMinutesMs / minutesTotalMs);// 计算分
var seconds = Math.ceil((surplusMinutesMs - (minutes * minutesTotalMs)) / 1000); //剩余多少秒
return `距离2019年倒计时:${month}月${day}天${toDou(hours)}时${toDou(minutes)}分${toDou(seconds)}秒`
} else { // 等于就停止计时器
clearInterval(time);
}
}
var time = setInterval(function(){
document.querySelector('.div-date').innerText = countDown ('2019-01-01 00:00:00');
}, 1000)
</script>
` 案例说明:通过代码,我们可以看出来,在计算时间差的方式,主要是以目标时间差的毫秒减去当前时间的毫秒方式来计算。然后把求出来的时间差计算有多少个月,多少天,多少小时,多少分,多少秒,在这个计算过程中就是简单粗暴的加减乘除了。
案例二:日历控件
日历控件是我们开发中经常使用的,典型应用就是选择一个时间,比如在做管理类系统开发时,经常需要选择一个开始时间和结束时间,用来做一个查询的区间范围,请看效果图:
日历控件的核心思想就是获取时间,因此我们在开发的过程中就围绕该思想进行扩展。废话不多说,先看代码分享:`
<style>
.t1-div{
text-align: center;
}
.date{
width: 420px;
margin: auto;
background-color: #f5f5f5;
border: 1px solid #eee;
}
.date-head{
display: flex;
justify-content: space-between;
height: 30px;
line-height: 30px;
text-align: center;
}
.date-head h3{
width: 48%;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.date-head span{
width: 25%;
color: darkgoldenrod;
cursor: pointer;
}
.date-head span:hover{
color: darkgoldenrod;
}
.date-head-area dd{
border-top: 1px solid #ddd;
}
.date-week{
display: flex;
flex-wrap: wrap;
/*justify-content: space-between;*/
}
.date-week span{
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
color: green;
box-sizing: border-box;
border-right: 1px solid #ddd;
cursor: pointer;
}
.date-week span:last-child{
border: none;
}
.date-week span:hover{
color: darkgreen;
}
.date ul{
display: flex;
flex-wrap: wrap;
}
.date ul li{
text-align: center;
width: 60px;
box-sizing: border-box;
height: 30px;
line-height: 30px;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
cursor: pointer;
}
.date ul li:nth-child(7){
border-right: none;
}
.date ul li:nth-child(14){
border-right: none;
}
.date ul li:nth-child(21){
border-right: none;
}
.date ul li:nth-child(28){
border-right: none;
}
.date ul li:nth-child(35){
border-right: none;
}
.date ul li:nth-child(42){
border-right: none;
}
.date ul li:hover{
color: orangered;
}
</style>
<body>
<div class="t1-div">
<input type="text" name="t1" id="t1" />
</div>
<div id="date" class="date">
<dl class="date-head-area">
<dt class="date-head">
<span>上月</span>
<h3 class="date-title">2018年4月</h3>
<span>下月</span>
</dt>
<dd class="date-week">
<span>星期日</span>
<span>星期一</span>
<span>星期二</span>
<span>星期三</span>
<span>星期四</span>
<span>星期五</span>
<span>星期六</span>
</dd>
</dl>
</div>
</body>
<script>
var t1 = document.getElementById('t1');
var dateEle = document.getElementById('date');
var dateTitle = document.querySelector('.date-title');
var spans = document.querySelector('.date-head').getElementsByTagName('span');
var oUl = document.createElement('ul');
var curDate = new Date(); //当前日期对象
var curYear = curDate.getFullYear(); // 当前年份
var curMonth = curDate.getMonth(); // 当前月份
active(curMonth);
spans[0].onclick = function () {active(--curMonth)};
spans[1].onclick = function () {active(++curMonth)};
function active (m) {//m参数是当前月
oUl.innerHTML = ''; //这里清空ul的目的是我们点击下月或者上月时要清空ul里的内容
var activeDate = new Date(curYear, m, 1); //要变化的日期对象,以当前的年月日创建日期对象
// activeDate.setDate(1); // setDate设置一个月的某一天
var month = activeDate.getMonth(); // 获取月
dateTitle.innerHTML = activeDate.getFullYear()+ '年' + (month+1) + '月'
var diff = 1 - activeDate.getDay(); // getDay 返回星期几,从0开始
if (diff == 1) {
diff = -6;
}
activeDate.setDate(diff); //算出日历起始日期
for (var i = 0; i < 42; i++) { //
var oLi = document.createElement('li');
var date = activeDate.getDate(); // getDate获取一个月的某一天
oLi.innerHTML = date; //当前元素是几号
oLi.dateVal = activeDate.getFullYear() + '-' + (activeDate.getMonth()+1) + '-' + date; //定义自定义属性,用来点击哪一天的时候获取点击对象的日期
oLi.onclick = function () {
t1.value = this.dateVal; //赋值给input所选中的日期
}
oUl.appendChild(oLi); // 追加到oUl里面去
if (activeDate.getMonth() != month) { //判断是不是当前月的日期,如果不是则设置字体颜色#999
oLi.style.color = '#999';
}
// console.log(m, month, '比较月份');
// console.log(date, curDate.getDate(), '比较多少号');
if ((date == curDate.getDate()) && (month == curDate.getMonth())) { //判断是否是当天,如果是当天的日期给予高亮颜色
oLi.style.color = 'red';
}
activeDate.setDate(date+1); // 循环设置天加1
}
}
dateEle.appendChild(oUl);
</script>
`在本案例中,因为日期案例相对复杂一些,所以我给代码做了充足的注释,在看案例的同学建议你拷贝代码拿到自己的编辑器里运行,然后debugg查看步骤,这样更易于理解。
结语
在本次分享的案例有着非常高的实战意义与价值,喜欢的同学可以点波关注和赞,以示鼓励,十分感谢。