使用ajax自定義日歷的源碼分享
需求分析
在一些購物網(wǎng)站中，都會有促銷活動，這些活動都在日歷上標(biāo)注出來，如何通過Ajax讓日歷讀取數(shù)據(jù)庫中的信息，正確的把促銷活動標(biāo)注在日歷上，本文通過自定義日歷來實現(xiàn)這個問題，希望可以幫助大家更好的學(xué)習(xí)ajax技術(shù)。
技術(shù)難點
日歷的布局
日歷的初始化
日歷的動態(tài)變化
日歷的促銷定制
實現(xiàn)方法
1、 先創(chuàng)建一個固定的日歷，效果如下
html代碼如下
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {font-size: 13px;}
.calendar {width: 330px; margin: 0 auto;}
.calendar .title {
position: relative;
width: 100%;
height: 30px;
line-height: 30px;
background: #17a4eb;
}
.title div {position: absolute;}
.prev {left: 10px; }
.now {left: 40%;}
.next {right: 10px;}
input {height: 30px; width: 300px; margin: 100px 475px 0px;}
table {width: 100%; border-collapse: collapse;}
table th {border: 1px solid #ccc;}
table td {text-align: center; border: 1px solid #ccc;}
</style></head><body>
<input type="text">
<div>
<div>
<div>
<span>08</span>月
</div>
<div>
<span>2016</span>年
<span>09</span>月
</div>
<div>
<span>10</span>月
</div>
</div>
<table>
<!--星期部分-->
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<!--日期部分-->
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div></body></html>
當(dāng)創(chuàng)建固定日歷后，把日歷的html部分注釋掉(title和table)，保留css部分
2、 通過javascript動態(tài)生成日歷
window.onload = function () {
var oInput = document.getElementsByTagName('input')[0];
var oCalendar = document.getElementById('calendar');// console.log(oCalendar);
var oDate = new Date();
var year = oDate.getFullYear();
var month = oDate.getMonth()+1;
//日期td
var oTds = oCalendar.getElementsByTagName('td');
var flag = false;
oInput.onfocus = function () {
showDate(year,month);
}
//顯示日歷
function showDate(year,month) {
if (false == flag) {
var oTitle = document.('div');
oTitle.className = 'title';
oTitle.innerHTML = '<div> <span>'+(month-1)+'</span>月 </div> ' +
'<div> <span>'+year+'</span>年 <span>'+month+'</span>月 </div> ' +
'<div> <span>'+(month+1)+'</span>月 </div>';
oCalendar.appendChild(oTitle);
//月份span
ospans = oCalendar.getElementsByTagName('span');
// console.log(ospans);
prevMonth = ospans[0];
nextMonth = ospans[3];
nowMonth = ospans[2];
nowYear = ospans[1];
//創(chuàng)建星期
var otable = document.('table');
var othead = document.('thead');
var otr = document.('tr');
var arr = ['日','一','二','三','四','五','六'];
for (var i=0; i<arr.length; i++) {
//創(chuàng)建th
var oth = document.('th');
oth.innerHTML = arr[i];
otr.appendChild(oth);
}
othead.appendChild(otr);
otable.appendChild(othead);
oCalendar.appendChild(otable);
//先獲得當(dāng)前月有多少天
if (1 == month || 3 == month || 5 == month || 7 == month || 8 == month || 10 == month || 12 == month) {
var dayNum = 31;
} else if (4 == month || 6 == month || 9 == month || 11 == month) {
var dayNum = 30;
} else if (2 == month && isLeapYear(year)) {
var dayNum = 29;
} else {
var dayNum = 28;
}
//確定當(dāng)前月的1號是星期幾
oDate.setFullYear(year);
oDate.setMonth(month-1);
oDate.setDate(1);
//日期
var otbody = document.('tbody');
for (var i=0; i<6; i++) {
var oTr = document.('tr');
//每行里面有7列
for (var j=0; j<7; j++) {
var oTd = document.('td');
//oTd.innerHTML = 1;
oTr.appendChild(oTd);
}
otbody.appendChild(oTr);
}
otable.appendChild(otbody);
//獲得今天1號對應(yīng)的是星期幾
var week = oDate.getDay();
var oTds = oCalendar.getElementsByTagName('td');
//alert(week);
for (var i=0; i<dayNum; i++) {
oTds[i+week].innerHTML = i+1;
}
//如果當(dāng)前月month 是12或者1
if (1 == month) {
prevMonth.innerHTML = 12;
} else if (12 == month) {
nextMonth.innerHTML = 1;
}
//讓當(dāng)前日期顯示紅色、后面的顯示藍色
showColor();
//給左右月份綁定點擊事件
monthEvent();
//給所有的td綁定點擊事件
tdClick();
//判斷最后一行是否全為空
lastTr();
//獲得促銷信息
getPromotion();
flag = true;
}
}
//最后一行如果全部為空就將其隱藏
function lastTr() {
//查找最后一行的所有td
var flag = true;
for (var i=35; i<42; i++) {
if (oTds[i].innerHTML != '') {
//有任何一個td不為空就設(shè)置為false
flag = false;
}
}
//全部是空的
if (flag) {
for (var i=35; i<42; i++) {
oTds[i].style.display = 'none';
}
}
}
//給所有的td綁定點擊事件
function tdClick() {
for (var i=0; i<oTds.length; i++) {
oTds[i].onclick = function() {
if ('red' == this.className ||'blue' == this.className) {
var year = nowYear.innerHTML;
var month = nowMonth.innerHTML;
var date = this.innerHTML;
oInput.value = year +'-'+month+'-'+date;
flag = false;
oCalendar.innerHTML = '';
} else {
alert('您只能選擇紅色或藍色區(qū)域');
}
}
}
}
//當(dāng)前日期顯示紅色、后面的顯示藍色
function showColor() {
//當(dāng)前的日期
var oday = new Date().getDate();
for (var i=0; i<oTds.length; i++) {
if (oday == oTds[i].innerHTML) {
oTds[i].className = 'red';
var oindex = i;
}
}
for (var j=oindex+1; j<oTds.length; j++) {
oTds[j].className = 'blue';
}
}
//給左右月份綁定點擊事件
function monthEvent() {
//向左的月份div
prevMonth.parentNode.onclick = function () {
//alert('向左');
flag = false;
oCalendar.innerHTML = '';
if (12 == prevMonth.innerHTML) {
showDate(year -= 1, 12);
} else {
showDate(year,parseInt(prevMonth.innerHTML));
}
}
//向左的月份div
nextMonth.parentNode.onclick = function () {
//alert('向右');
flag = false;
oCalendar.innerHTML = '';
if (1 == nextMonth.innerHTML) {
showDate(year+=1,1);
} else {
showDate(year,parseInt(nextMonth.innerHTML));
}
}
}
//判斷是否是閏年
function isLeapYear(year) {
if (0 == year%100 && 0 == year%400) {
return true;
}else if (year%100 != 0 && year%4 ==0) {
return true;
} else {
return false;
}
}
}
3、 從服務(wù)器獲取促銷的信息并在日歷中顯示
//從服務(wù)器獲取促銷信息
function getPromotion() {
$.request({
method:"post", //獲取方式
url:"promotion.php", //從哪個文件中獲取
data:"", //是否傳遞數(shù)據(jù)
callback:function (res) {
eval("var obj="+res);
if (obj.status) {
var dates = obj.dates;
for (var i=0; i<dates.length; i++) {
for (var j=0; j<oTds.length; j++) {
if (oTds[j].innerHTML == dates[i]) {
oTds[j].innerHTML += "促銷";
oTds[j].style.background = 'red';
}
}
}
}
}
});
}
$.request()是封裝在js里的Ajax方法,代碼如下：
var $ = {
request:function(obj){
var xhr;
try {
//主流瀏覽器里面的ajax對象
xhr = new XMLHttpRequest();
} catch(e) {
//IE低版本的瀏覽器
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//建立和服務(wù)器的連接
if (obj.method == 'get') {
xhr.open(obj.method,obj.url+'?'+obj.data+'&'+Math.random(),true);
xhr.send();
} else if (obj.method == 'post') {
xhr.open(obj.method,obj.url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(obj.data);
}
//監(jiān)視服務(wù)器的處理狀態(tài)
xhr.onreadystatechange = function(){
if (4 == xhr.readyState && 200 == xhr.status) {
//說明請求成功了，輸出服務(wù)器返回的數(shù)據(jù)
obj.callback(xhr.responseText);
}
}
}
}
promotion.php
<?php
$data['status'] = 1;
//促銷時間
$data['dates'] = array(28,29,30);
echo json_encode($data);
最終效果圖如下，樣式不是很美觀
文章來源：博客園
熱門帖子
- iDev 全平臺開發(fā)者大會門票免費送！限量10張！
- 蘋果Mac Pro垃圾桶 最低配的ME253CH
- 本人想買個蘋果電腦搞開發(fā)，哪位大俠指點下
- 求助：failable initializer 'init(name:)' cannot override a non-failable initializer
- 為慶祝Swift發(fā)布1個月，雨燕社區(qū)正式上線。
- 在UITextFeild里輸入數(shù)據(jù)，這個數(shù)據(jù)怎么做加減乘除？
- Swift 高仿喜馬拉雅FM
- 要成為自由職業(yè)者？先要學(xué)會蘋果的Swift哦
- 用swift實現(xiàn)的調(diào)用系統(tǒng)相機，相冊的DEMO
- 關(guān)于嵌入式引用\()