推薦一個小巧的JS日歷

2019-11-21 01:58:56

字體：大中小

來源：轉載

供稿：網友

腳本的核心就是DateAdd函數，點擊下面的演示看看效果：
查看演示

調用方法很簡單，
第一步：在頁面頂部包含calenderJS.js文件：
<script src="path/to/calenderJS.js"></script>
點擊下載這個js文件

第二步：給你的輸入框增加onfocus事件屬性：
<input type="text" onfocus="HS_setDate(this)">
HS_setDate(this) 是初始化的函數

此日歷已經應用到本blog的側邊欄，并加入ajax功能，異步查詢有日志的日子，并加粗。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <title> JS 日歷 </title>   <meta name="author" content="http://m.survivalescaperooms.com/"/>   <meta name="keywords" content="js日歷,calender">   <meta name="description" content="js日歷">   <script type="text/javascript" src="/downtools/js/wodcalenderJS.js"></script>   <style>   body {font-size:12px}   td {text-align:center}   h1 {font-size:26px;}   h4 {font-size:16px;}   em {color:#999; margin:0 10px; font-size:11px; display:block}   </style>  </head>  <body> <h1>Date Picker</h1> <h4 style="border-bottom:1px solid #ccc">ver:1.0</h4> <table border=1 width=400 height=150>     <tr>         <td>文本文本文本</td>         <td>點擊輸入框</td>         <td>文本文本文本</td>     </tr>     <tr>         <td>點擊輸入框</td>         <td><input type="text" style="width:70px" onfocus="HS_setDate(this)">文本</td>         <td>文本文本文本</td>     </tr>     <tr>         <td>文本文本文本</td>         <td>點擊輸入框</td>         <td>文本<input type="text" style="width:70px" onfocus="HS_setDate(this)">文本</td>     </tr> </table> <ul> <li>不需要其他框架類庫</li> <li>支持ie6、firefox、opera</li> <li>點擊年份與月份可以下拉選擇</li> </ul> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：讓回調函數 showResponse 也帶上參數的代碼

下一篇：分析 JavaScript 中令人困惑的變量賦值