一步一步理解日历calendar（一）
这里开始介绍一个史上最简单的日历，只显示当月，但是它是一个雏形，会一步一步完善，效果如下：
（够简单，够帅气）
实现方式如下：
MaxDayOfDate作用是返回某月的最大天数
GetDayOfWeek作用是当月的第一天是星期几 星期一：1，星期二：2，星期三：3，星期四：4，星期五：5，星期六：6星期日：7
calendar作用是创造日历
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>一步一步理解日历calendar（一）</title> 5 <style type="text/css"> 6 *{ margin:0px; padding:0px;} 7 .canlender{ text-align:center} 8 .canlender th{ background-color:#6666FF} 9 .canlender .today{ background-color:Orange; color:Red; font-weight:bold}10 </style>11 <script type="text/javascript">12 window.onload = function () {13 function MaxDayOfDate(year, month) {14 switch (month) {15 case 1:16 case 3:17 case 5:18 case 7:19 case 8:20 case 10:21 case 12:22 return 31;23 case 4:24 case 6:25 case 9:26 case 11:27 return 30;28 case 2:29 if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {30 return 29;31 }32 else {33 return 28;34 }35 default:36 return 0;37 }38 }39 40 function GetDayOfWeek(year, month) {41 if (0 == (new Date(year, month, 1)).getDay()) {42 return 7;43 }44 else {45 return (new Date(year, month, 1)).getDay();46 }47 }48 49 50 function calendar(obj) {51 var today = new Date();52 var year = today.getFullYear();53 var month = today.getMonth();54 var day = today.getDate();55 var days = MaxDayOfDate(year, month + 1);56 var week = GetDayOfWeek(year, month);57 var html = "<table class='canlender' border='1px'><thead><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead>";58 for (var i = 1; i <= 42; i++) {59 if (1 == i % 7 || 1 == i) { 60 html += "<tr>";61 }62 if (i >= week && i <= (week + days - 1)) {63 if (day == i) {64 html += "<td class='today'>" + parseInt(i - week + 1) + "</td>";65 } else if (day < i - week) {66 html += "<td>" + parseInt(i - week + 1) + "</td>";67 }68 else {69 html += "<td>" + parseInt(i - week + 1) + "</td>";70 }71 if (0 == i % 7 || 7 == i) {72 html += "</tr>";73 }74 }75 else {76 html += "<td> </td>";77 }78 }79 html += "</table>";80 obj.innerHTML = html;81 }82 83 calendar(document.getElementById("test"));84 }85 </script>86 <div id="test">87 </div>88 </head>89 <body>90 </body>91 </html>一步一步理解日历calendar（一）相关推荐
- 一步一步理解日历calendar（三）
一步一步理解日历calendar(一)描述画出日历这张表格: 一步一步理解日历calendar(二)增加了上一年.下一年.上一月.下一月的功能: 一步一步理解日历calendar(三)采用了面向对象的 ...
- BlockChain：Python一步一步实现(流程最清楚)区块链底层技术流程图(理解一目了然，值得收藏)
BlockChain:Python一步一步实现(流程最清楚)区块链底层技术流程图(理解一目了然,值得收藏) 导读 基于Python编程,实现一步一步实现(流程最清楚)区块链底层技术流程图,理解一目了然 ...
- 一步一步理解Paxos算法
一步一步理解Paxos算法 作者:jw (360电商技术组) 背景 Paxos算法是Lamport于1990年提出的一种基于消息传递的一致性算法.由于算法难以理解起初并没有引起人们的重视,使Lampo ...
- 一步一步理解GB、GBDT、xgboost
GBDT和xgboost在竞赛和工业界使用都非常频繁,能有效的应用到分类.回归.排序问题,虽然使用起来不难,但是要能完整的理解还是有一点麻烦的.本文尝试一步一步梳理GB.GBDT.xgboost,它们 ...
- java 企业级应用设计规范_一步一步理解Java 企业级应用的可扩展性
原标题:一步一步理解Java 企业级应用的可扩展性 老实说,"可扩展性"是个全面且详尽的话题,而且往往得不到充分理解.人们通常认为可扩展性等同于高可用性,笔者见过编程新手和架构师& ...
- 如何从RNN起步，一步一步通俗理解LSTM
如何从RNN起步,一步一步通俗理解LSTM 前言 提到LSTM,之前学过的同学可能最先想到的是ChristopherOlah的博文<理解LSTM网络>,这篇文章确实厉害,网上流传也相当之广 ...
- NLP（二十九）一步一步，理解Self-Attention
本文大部分内容翻译自Illustrated Self-Attention, Step-by-step guide to self-attention with illustrations and ...
- 生成对抗网络的损失函数如何设计_理解生成对抗网络，一步一步推理得到GANs（一）...
作者:Joseph Rocca 编译:ronghuaiyang 导读 GANs在2014年提出,然后就在图像生成领域取得了巨大的成功,但是其背后的原理却不是那么好理解,这篇文章带你从最基础的随机变量开 ...
- 【Linux】一步一步学Linux——cal命令(75)
00. 目录 文章目录 00. 目录 01. 命令概述 02. 命令格式 03. 常用选项 04. 参考示例 05. 附录 01. 命令概述 cal命令用于显示当前日历,或者指定日期的日历. cal命 ...
- 一步一步写算法（之图结构）
原文:一步一步写算法(之图结构) [ 声明:版权所有,欢迎转载,请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 图是数据结构里面的重要一章.通过图,我们可以判断两个点之间是 ...
最新文章
- Java的浅拷贝与深拷贝总结
- Android应用开发：页面跳转和数据传递
- GO标准库—命令行参数解析FLAG
- cisco router修改mac
- Ajax响应处理数据的三种格式（主要使用gson包）
- bootstrap-select控件全选，全不选，查询功能实现
- 调焦后焦实现不同距离成像_红外成像光学系统进展与展望
- Fourier变换、Laplace变换与广义函数总结
- 改变世界的iPhone背后都有些什么？
- 转《js闭包与内存泄漏》
- LeetCode Count of Smaller Numbers After Self
- OpenGL超级宝典第五版 Windows + VS2013配置
- KITTI Benchmark原理_距离误差百分数
- 蝉妈妈对话曹颖：5月带货1.1亿，踩过的坑都变成了卖货的筹码
- 软件逆向工具常用快捷键
- Java多线程实现简易微信发红包
- HTML层级设置,HTML----元素层级
- 小程序自定义底部菜单栏
- 有话费但是上网显示无法连接服务器失败,【10元话费，5GB流量】宽带故障不要怕，教你一招来解决！...
- win10注册mysql服务_win10下搭建MySQL服务