自适应备忘录 demo-白红宇

自适应备忘录 demo

阅读量：6572 次

发布时间：2019-06-24

本文共 18614 字，大约阅读时间需要 62 分钟。

<!DOCTYPE html>

<head>

.calendar2 h2{line-height: 0.8rem;height: 0.8rem; text-align: center; color: #25a9e6; font-size: 0.32rem; background-color: #f5f5f5;}

.calendar2 table tbody{width: 100%; position: relative; z-index: 60;}

.calendar2 table{width: 100%;background-color: #fff; border-collapse:collapse; }

.calendar2 table thead{background-color: #c6dde4;}

.calendar2 table thead tr { height: 0.5rem; line-height: 0.5rem; }

.calendar2 table thead tr td{ color: #666; font-size: 0.26rem; text-align: center; font-weight: 500;}

.calendar2 table thead tr td .event-wekday{width: 0.6rem;}

.calendar2 table tbody{padding-top: 0.2rem;}

.calendar2 table tbody tr{height: 0.6rem;line-height: 0.6rem; }

.calendar2 table tbody tr td{color: #333; font-size: 0.26rem; text-align: center; padding-top: 0.2rem;font-weight: 400;}

.calendar2 table tbody tr td .event-day{width: 0.6rem; display: inline-block;border: 2px solid #fff;}

.calendar2 table tbody tr td span.active{ border: 2px solid #3399cc;border-radius: 50%;}

.calendar2 table tbody tr td .current{width: 0.6rem height:0.6rem; border-radius: 50%; background-color: #3399cc; color: #fff;}

.day-event2 {font-size: 0.28rem;color: #333;box-sizing: border-box; margin-left: 0.35rem; margin-right: 0.25rem; border-left: 2px solid #ddd; padding-top: 0.2rem;position: relative;display: none;}

.day-event2 .dost{width: 0.34rem; height: 0.34rem; border: 2px solid #e3e3e3; border-radius: 50%;position: absolute; top: 0.43rem;left: -0.25rem;text-align: center;z-index: 2;}

.day-event2 .dost b{background-color: #ef5e5e; width: 0.29rem; height: 0.29rem; border-radius: 50%; position: absolute;left: 0.028rem;top: 0.025rem;}

.day-event2 div{margin-left: 0.45rem; background-color: #fff; padding-top: 0.15rem; border-radius: 0.05rem; padding-left: 0.2rem; position: relative;}

.day-event2 div p{ line-height: 0.3rem;}

.day-event2 div .arrow-left{border-bottom: 0.3rem solid transparent;border-top: 0.3rem solid transparent;border-right: 0.3rem solid #fff; font-size: 0;line-height: 0; position: absolute;left: -0.25rem;/* top: 0.4rem; */}

.day-event2 .time-text{font-size: 0.22rem; color: #999;padding-top: 0.1rem;padding-bottom: 0.1rem;}

.calendar2 table tbody tr td .current-day{ width: 0.6rem height:0.6rem; border-radius: 50%; background-color: #3399cc; color: #fff;border: 2px solid #3399cc;}

.calendar2 table tbody tr td .event{position: relative;background: #e7e7e7;border: 2px solid #e7e7e7;border-radius: 50%;}

</style>

</head>

<body>

<table>

<tr>

</tr>

</thead>

</tr>

</tr>

</tr>

</tr>

</tr>

</tbody>

</table>

</div>

</header>

<!-- <div class="day-event2" date-day="19" date-month="9" date-year="2016" data-number="0" style="display: block;">

<span class="dost"><b></b></span><div><a class="arrow-left"></a><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam</p>

</div>

</div>

</div> -->

</div>

</article>

</section>

</div>

$(document).ready(function(){

$('.scroller').css('top',$('header').height());

})

</script>

<!-- <script src="../js/jquery-latest.min.js" type="text/javascript"></script>

</body>

</html>

var calendar = {

init: function(ajax) {

if (ajax) {

// ajax call to print json

$.ajax({

type: 'GET',

url: '../data/events.json',

dataType: 'json',

success: function(data){

var events = data.events;

// loop json & append to dom

var myDate = new Date();

var now = myDate.getFullYear() +"/" +(myDate.getMonth()+1)+"/"+myDate.getDate();

for (var i = 0; i < events.length; i++)

{

var time = events[i].year + "/" + events[i].month +"/"+events[i].day;

if(time == now )

{

$('.list').append('<div class="day-event2" style="display:block;" date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><span class="dost"><b class="active"></b></span><div><a class="arrow-left"></a><p>'+ events[i].description +'</p><p class="time-text">16:52</p></div></div>');

}

else

{

$('.list').append('<div class="day-event2" date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><span class="dost"><b class="active"></b></span><div><a class="arrow-left"></a><p>'+ events[i].description +'</p><p class="time-text">16:52</p></div></div>');

}

calendar.startCalendar();

error: function(xhr, type){

alert('Ajax error!')

}

})

}

else {

// if not using ajax start calendar

calendar.startCalendar();

}

startCalendar: function() {

var mon = '周一';

var tue = '周二';

var wed = '周三';

var thur = '周四';

var fri = '周五';

var sat = '周六';

var sund = '周日';

/**

* Get current date

var d = new Date();

var strDate = yearNumber + "/" + (d.getMonth() + 1) + "/" + d.getDate();

var yearNumber = (new Date).getFullYear();

/**

* Get current month and set as '.current-month' in title

var monthNumber = d.getMonth() + 1;

function GetMonthName(monthNumber) {

var months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

return months[monthNumber - 1];

}

setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund);

function setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund) {

$('.month').text(GetMonthName(monthNumber) + ' ' + yearNumber);

$('.month').attr('data-month', monthNumber);

printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund);

}

var oSlide = document.querySelector('.calendar2 table');

// var oList = document.querySelector('.calendar header');

var startPoint = 0;

var startX = 0;

var startY= 0;

var translateX = 0;

var translateY= 0;

oSlide.addEventListener('touchstart',function(e){

startPoint = e.changedTouches[0].pageX;

startY=e.changedTouches[0].pageY;

})

oSlide.addEventListener('touchmove',function(e){

translateX = e.changedTouches[0].pageX - startPoint;

translateY = e.changedTouches[0].pageY - startY;

// translateX = startX + dis;

// translateY=

})

oSlide.addEventListener('touchend',function(e){

if(Math.abs(translateX)> Math.abs(translateY))

{

if(startPoint.toFixed(2)==e.changedTouches[0].pageX.toFixed(2))

{

return false;

}

else

{

if(translateX>0)

{

var monthNumber = $('.month').attr('data-month');

if (monthNumber < 2) {

$('.month').attr('data-month', '13');

var monthNumber = $('.month').attr('data-month');

yearNumber = yearNumber - 1;

setTimeout(setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund),1000);

} else {

setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund);

};

var myDate = new Date();

var date=(myDate.getMonth()+1)+"月"+myDate.getFullYear();

var day=myDate.getDate();

var year=myDate.getFullYear();

var month=myDate.getMonth()+1;

$('.day-event2').css('display','none');

if($('.calendar2 .month').text().replace(" ","")==date)

{

$('.day-event2[date-month="' + month + '"][date-year="' + year + '"][date-day="' + day + '"]').css('display','block');

}

// else

// {

// }

}

else if(translateX<0)

{

var monthNumber = $('.month').attr('data-month');

if (monthNumber > 11) {

$('.month').attr('data-month', '0');

var monthNumber = $('.month').attr('data-month');

yearNumber = yearNumber + 1;

setMonth(parseInt(monthNumber) + 1, mon, tue, wed, thur, fri, sat, sund);

} else {

setMonth(parseInt(monthNumber) + 1, mon, tue, wed, thur, fri, sat, sund);

};

var myDate = new Date();

var date=(myDate.getMonth()+1)+"月"+myDate.getFullYear();

var day=myDate.getDate();

var year=myDate.getFullYear();

var month=myDate.getMonth()+1;

$('.day-event2').css('display','none');

if($('.calendar2 .month').text().replace(" ","")==date)

{

$('.day-event2[date-month="' + month + '"][date-year="' + year + '"][date-day="' + day + '"]').css('display','block');

}

else

{

return false;

}

})

function printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund) {

$($('tbody.event-calendar2 tr')).each(function(index) {

$(this).empty();

});

$($('thead.head tr')).each(function(index) {

$(this).empty();

});

function getDaysInMonth(month, year) {

// Since no month has fewer than 28 days

var date = new Date(year, month, 1);

var days = [];

while (date.getMonth() === month) {

days.push(new Date(date));

date.setDate(date.getDate() + 1);

}

return days;

}

i = 0;

setDaysInOrder(mon, tue, wed, thur, fri, sat, sund);

function setDaysInOrder(mon, tue, wed, thur, fri, sat, sund) {

var monthDay = getDaysInMonth(monthNumber - 1, yearNumber)[0].toString().substring(0, 3);

if (monthDay === 'Mon') {

$('thead.head tr').append('<td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td>');

} else if (monthDay === 'Tue') {

$('thead.head tr').append('<td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td>');

} else if (monthDay === 'Wed') {

$('thead.head tr').append('<td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td>');

} else if (monthDay === 'Thu') {

$('thead.head tr').append('<td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td>');

} else if (monthDay === 'Fri') {

$('thead.head tr').append('<td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td>');

} else if (monthDay === 'Sat') {

$('thead.head tr').append('<td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td>');

} else if (monthDay === 'Sun') {

$('thead.head tr').append('<td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td>');

}

};

$(getDaysInMonth(monthNumber - 1, yearNumber)).each(function(index) {

var index = index + 1;

if (index < 8) {

$('tbody.event-calendar2 tr.row1').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');

} else if (index < 15) {

$('tbody.event-calendar2 tr.row2').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');

} else if (index < 22) {

$('tbody.event-calendar2 tr.row3').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');

} else if (index < 29) {

$('tbody.event-calendar2 tr.row4').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');

} else if (index < 32) {

$('tbody.event-calendar2 tr.row5').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');

}

i++;

});

var date = new Date();

var month = date.getMonth() + 1;

var thisyear = new Date().getFullYear();

setCurrentDay(month, thisyear);

setEvent();

displayEvent();

}

/**

* Get current day and set as '.current-day'

function setCurrentDay(month, year) {

var viewMonth = $('.month').attr('data-month');

var eventYear = $('.event-days').attr('date-year');

if (parseInt(year) === yearNumber) {

if (parseInt(month) === parseInt(viewMonth)) {

$('tbody.event-calendar2 td[date-day="' + d.getDate() + '"] span').addClass('current-day');

}

};

/*$('tbody td span').on('click', function(e) {

alert('11');

if ($(this).hasClass('event')) {

$('tbody.event-calendar2 td span').removeClass('active');

$(this).addClass('active');

} else {

$('tbody.event-calendar2 td span').removeClass('active');

$(this).addClass('active');

// debugger;

// $('.event-calendar tr td[class="active"]').text();获取日

// $('.month').text();获取年月

};

});

/**

* Add '.event' class to all days that has an event

function setEvent() {

$('.day-event2').each(function(i) {

var eventMonth = $(this).attr('date-month');

var eventDay = $(this).attr('date-day');

var eventYear = $(this).attr('date-year');

var eventClass = $(this).attr('event-class');

if (eventClass === undefined) eventClass = 'event';

else eventClass = 'event ' + eventClass;

var date = new Date();

var month = date.getMonth() + 1;

var day=date.getDate();

if (parseInt(eventYear) === yearNumber) {

if(eventMonth==month&& eventDay==day)

{

$('tbody.event-calendar2 tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"] span').addClass();

}

else

{

$('tbody.event-calendar2 tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"] span').addClass(eventClass);

}

});

};

/**

* Get current day on click in calendar

* and find day-event to display

function displayEvent() {

$('tbody.event-calendar2 td span').on('click', function(e) {

$('.day-event2').css('display','none');

var monthEvent = $(this).parent().attr('date-month');;

var dayEvent = $(this).text();

var yearEvent = $(this).parent().attr('date-year');

$('.day-event2[date-month="' + monthEvent + '"][date-year="' + yearEvent + '"][date-day="' + dayEvent + '"]').css('display','block');

$('tbody.event-calendar2 td span').removeClass('active');

$(this).addClass('active');

});

};

}

$(document).ready(function() {

calendar.init('ajax');

});

转载于:https://www.cnblogs.com/xiaoliu12/p/6085772.html

你可能感兴趣的文章

互联网架构师必备技术 Docker仓库与Java应用服务动态发布那些事

查看>>

Intellij IDEA 2018.2 搭建Spring Boot 应用

查看>>

SNMP AGENT函数介绍

查看>>

[Usaco2005 Open]Disease Manangement 疾病管理 BZOJ1688

查看>>

【Android视图效果】分组列表实现吸顶效果

查看>>

多文件上传示例源码(默认支持各种类型，包括图片)

查看>>

命令行基本操作学习笔记（一）

查看>>

「试着读读 Vue 源代码」工程目录及本地运行（断点调试）

查看>>

A Visual Git Reference

查看>>

Tomcat 关于表单提交数据量过大导致数据丢失的问题

查看>>

金融数据库

查看>>

翻了100个程序员的朋友圈, 发现个个都是套路王

查看>>

取消从上一界面push过来后，左上角的back按钮

查看>>

为什么 ++[[]][+[]]+[+[]] = 10？

Android 自定义GridView网格布局

查看>>