你的位置:首页 > 软件开发 > Java > js超简单日历

js超简单日历

发布时间:2016-03-17 21:00:11
用原生js写了一个超级简单的日历。当做是练习js中的Date类型。思路:获取某个日期,根据年份计算出每个月的天数。利用Date中的getDay()知道该月份的第一天为星期几。循环创建表格,显示日历。html 1 <!DOCTYPE html> 2 <html&g ...

js超简单日历

用原生js写了一个超级简单的日历。当做是练习js中的Date类型。

思路:

  1. 获取某个日期,根据年份计算出每个月的天数。
  2. 利用Date中的getDay()知道该月份的第一天为星期几。
  3. 循环创建表格,显示日历。

html

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <title>JS简单日历</title> 5   <meta http-equiv="Content-type" content="text/html" charset="utf-8"> 6   <link rel="stylesheet" type="text/css" href="Date.css"> 7 </head> 8 <body> 9   <div id="content">10     <div id="dateInput">11       <label>日期:(格式:yyyy-mm-dd)</label>12       <input type="text" id="check">13       <input type="button" id="changeDate" value="查询">14     </div>15     <div id="calendar">16       <div id="calendarHeader">17         <div>18           <img id="back" src='/images/loading.gif' data-original="back.png">19           <span id="cur"></span>20           <img id="forward" src='/images/loading.gif' data-original="forward.png">21         </div>22       </div>23       <div id="calendarTable">24         <table>25           <tbody>26             <tr>27               <th>一</th>28               <th>二</th>29               <th>三</th>30               <th>四</th>31               <th>五</th>32               <th>六</th>33               <th>日</th>34             </tr>35           </tbody>  36         </table>37       </div>38     </div>39   </div>40   <script type="text/javascript" src='/images/loading.gif' data-original="Date.js"></script>41 </body>42 </html>

原标题:js超简单日历

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。