这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 简单实现移动端日历功能的方法, 涉及 javascript 针对日期与时间的操作及显示相关技巧, 需要的朋友可以参考下
本文实例讲述了 JS 简单实现移动端日历功能。分享给大家供大家参考,具体如下:
只是一个初步的简单的日历,有是否显示上月和下月部分的选项
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <title>
- 移动端日历
- </title>
- <style type="text/CSS">
- table{ width: 100%; border-collapse: collapse; } td { padding: 0; margin:
- 0; vertical-align: middle; text-align: center; font-size: .7rem; height:
- 1.5rem; } .none{ display: none; }
- </style>
- </head>
- <body>
- <div class="calendar">
- <table class="calendar_day">
- <tr>
- <td>
- 星期日
- </td>
- <td>
- 星期一
- </td>
- <td>
- 星期二
- </td>
- <td>
- 星期三
- </td>
- <td>
- 星期四
- </td>
- <td>
- 星期五
- </td>
- <td>
- 星期六
- </td>
- </tr>
- </table>
- <table class="calendar_date">
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- </table>
- </div>
- <script type="text/javascript">
- var date = new Date();
- calendar(date, {
- lastandnext: true
- }) function calendar(setDate, options) {
- if (!options) {
- options = {};
- }
- options.lastandnext = options.lastandnext || false;
- // 星期几部分
- var calendar_days = document.getElementsByClassName('calendar_day')[0];
- var days = calendar_days.getElementsByTagName('td');
- var date = new Date(setDate);
- var y = date.getFullYear();
- var m = date.getMonth();
- var d = date.getDate();
- // 本月
- // 该月的第一天是星期几
- var firstDay = new Date(y, m, 1).getDay();
- // console.log(firstDay);
- // 该月一共多少天
- var lastData = new Date(y, m + 1, 0).getDate();
- // console.log(lastData)
- // 该月的最后一天是星期几
- var lastDay = new Date(y, m + 1, 0).getDay();
- // console.log(firstDay)
- var calendar_date = document.getElementsByClassName('calendar_date')[0];
- var tds = calendar_date.getElementsByTagName('td');
- // console.log(tds)
- var ed = firstDay;
- for (var i = firstDay; i < lastData + firstDay; i++) {
- // console.log(i-firstDay+1)
- tds[i].innerHTML = i - (firstDay) + 1;
- }
- if (options.lastandnext) {
- // // 上月
- var lastMonthData = new Date(y, m, 0).getDate();
- for (var i = firstDay - 1; i >= 0; i--) {
- tds[i].innerHTML = lastMonthData - (firstDay - i - 1);
- }
- // 下月
- var k = 0;
- for (var i = lastData + firstDay; i < tds.length; i++) {
- k++;
- tds[i].innerHTML = k;
- }
- }
- }
- </script>
- <!-- 适配 -->
- <script type="text/javascript">
- ; (function(win, doc) {
- function change() {
- doc.documentElement.style.fontSize = 20 * doc.documentElement.clientWidth / 360 + 'px';
- }
- change();
- win.addEventListener('resize', change, false);
- })(window, document);
- </script>
- </body>
- </html>
PS:这里再为大家分享几款本站的在线日期工具供大家参考:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0715/329058.html