整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
avaScript實現的日歷效果，如下圖所示：
JavaScript實現的日歷效果圖
可以嘗試在多個瀏覽器中，測試運行網頁的效果，我這里在如下幾個瀏覽器運行，如下圖所示：
實現代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
/*日歷標題樣式 */
#divTitle
{
width:400px;
height:30px;
font-size:20px;
color:#0000ff;
text-align:center;
}
/*日歷表格布局樣式 */
#divDate
{
width:400px;
height:320px;
border:4px solid gray;
background-color:#ddd;
padding-top:4px;
font-size:20px;
}
/*日歷文字樣式 */
.tableStyle
{
width:400px;
height:300px;
text-align:center;
color:blue;
}
</style>
<script type="text/javascript">
var weekDays = new Array("日","一","二","三","四","五","六");//星期
var days = new Array("31","28","31","30","31","30","31","31","30","31","30","31");//天
var months = new Array("1","2","3","4","5","6","7","8","9","10","11","12");//月
document.write("<div id='divTitle'>我的日歷</div>");
var now = new Date();
var month = now.getMonth();//獲得月份
var day = now.getDate();//獲得日期
var f = 1;
now.setDate(1);
var first = now.getDay();
var str = new String();
//在<div>中創建<table>標簽顯示日歷
document.write("<div id='divDate'>");
document.write("<table class='tableStyle'>");
document.write("<tr>");
//輸出周日到周六
for(var t in weekDays)
{
document.write("<th style='height:25px'>"+weekDays[t] + "</th>");
}
document.write("</tr>");
var rows = (parseInt(days[month]) + parseInt(first) + 7 ) / 7;
//輸出日歷表格的行和列
for (var i= 0 ; i < parseInt(rows) ; i++ )//日歷表格的行
{
document.write("<tr>");
for (var j= 0 ; j < 7 ; j++ )//日歷表格的列
{
document.write("<td id="+f+">");
if (i == 0 && j < first)
{
document.write("");
}
else
{
if (f == day)
{
document.getElementById(f).style.background = "red";//以紅色背景顯示"今天"
}
if (f > days[month])
f = days[month];
else
document.write(f);
f++;
}
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table></div>");
</script>
</head>
<body>
</body>
</html>
這就是用JavaScript實現的日歷效果，請大家動起手來試試吧，展示你的實現效果。
在前端網頁設計HTML中,無論是css還是JavaScript都是非常重要的,但是有些動態效果只能由我們的js來實現,今天小編就給大家一個厲害的干貨,希望大家多多關注小編呢!
js日歷
十二個月份,下方是每個月內容框,當鼠標移入上放月份時,下方內容框自動變換內容.
各大博客網站,均有此JavaScript的代碼實現,是基礎入門必不可少的技能!
JavaScript部分
css部分
HTML部分
小伙伴們要自己動動手敲一遍代碼哦!前端代碼也是實戰出成果的!!!小編會一直支持大家學習,也希望大家多多支持小編哦,嘻嘻(#^.^#),關注小編
近有用到日歷可需要編輯文本的日歷，為了綁定數據的方便，所以用js寫了一套日歷，其實思想也是很簡單。
實現步驟如下：
1：首先取得處理月的總天數
JS不提供此參數，我們需要計算。考慮到閏年問題會影響二月份的天數，我們先編寫一個判斷閏年的自編函數：
function is_leap(year) {
return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}
2：接著定義一個包含十二個月在內的月份總天數的數組：
m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);
3：m_days這個數組里，二月份的天數已經加入閏年的信息：28+is_leap(ynow)。數組元素從0開始，正好對應于JS提供的Date函數提供的getMonth返回值，即0表示一月，1表示二月，2表示三月，依此類推。
這樣，各月總數可以這樣取得：m_days[x]。其中，x為0至11的自然數。
4：計算處理月第一天是星期幾
可以使用Date函數的getDay取得，返回的值從0到6，0表示星期一，1表示星期二，2表示星期三，其余依此類推。代碼如下（假設要處理的時間為2008年3月）：
n1str=new Date(2008,3,1);
firstday=n1str.getDay();
有了月總天數和該月第一天是星期幾這兩個已知條件，就可以解決表格所需行數問題：（當前月天數+第一天是星期幾的數值）除以七。表格函數需要整數，因此，我們使用Math.ceil來處理：
tr_str=Math.ceil((m_days[mnow] + firstday)/7);
表格中的tr標簽實際上代表表格的行，因此變量tr_str是我們往下寫表格的重要依據。
5：打印日歷表格
可以使用兩個for語句嵌套起來實現：外層for語句寫行，內層for語句寫單元格。
for(i=0;i<tr_str;i++) { //表格的行
for(k=0;k<7;k++) { //表格每行的單元格
idx=i*7+k; //單元格自然序列號
date_str=idx-firstday+1; //計算日期
(date_str<=0 || date_str>m_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; //過濾無效日期（小于等于零的、大于月總天數的）
$(".date-info .date").last().append("<td class='day'>" + date_str + "</td>");
}
}
單元格的自然序號是否代表有效日期非常關鍵，為此必須加入一個過濾機制：僅打印有效的日期。有效的日期大于0小于小于等于處理月的總天數。
6：上一個月與下一個月
if(mnow<=0){
mnow=11;
ynow=ynow-1;
}else{
mnow--;
}
if(mnow>=11){
mnow=0;
ynow=ynow+1;
}else{
mnow++;
}
獲取上一個月時，到1月份需注意；獲取下一個月時，到12月份時要注意。
渲染時，需要先移除舊的日歷，再添加新的日歷。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
