JS 写简单的日历

function initCalendar(){
    var nstr=new Date(); //当前Date资讯
    var ynow=nstr.getFullYear(); //年份
    var mnow=nstr.getMonth(); //月份
    var dnow=nstr.getDate(); //今日日期
    var n1str=new Date(ynow,mnow,1); //当月第一天Date资讯

var firstday=n1str.getDay(); //当月第一天星期几

var m_days=new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31); //各月份的总天数

var tr_str=Math.ceil((m_days[mnow] + firstday)/7); //表格所需要行数

//打印表格第一行(有星期标志)
    var html="<table  align=‘center‘ width=‘220‘ cellspacing=‘0‘><tr><td align=‘center‘>日</td><td align=‘center‘>一</td><td align=‘center‘>二</td><td align=‘center‘>三</td><td align=‘center‘>四</td><td align=‘center‘>五</td><td align=‘center‘>六</td></tr>";

for (i = 0; i < tr_str; i++) { //表格的行
            html += "<tr>";
            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 = "&nbsp;"
                        : date_str = idx - firstday + 1; //过滤无效日期(小于等于零的、大于月总天数的)
                //打印日期:今天底色为红
                date_str == dnow ? html += "<td align=‘center‘  class=‘sign_have‘>"
                        + date_str + "</td>"
                        : html += "<td align=‘center‘>" + date_str + "</td>";
            }
            html += "</tr>"; //表格的行结束
        }
        html += "</table>"; //表格结束
        $("#calendar").html(html);
    }

function is_leap(year) {
        return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0)
                : res = (year % 4 == 0 ? 1 : 0));
    } //是否为闰年

时间: 2024-10-29 19:07:57

JS 写简单的日历的相关文章

原生js写简单轮播图方式1-从左向右滑动

轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法. 原理 相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片.点击查看效果 html部分 nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类:第二个ul列表#i

js实现简单的日历效果(兼容IE5 )

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="1.css"/> <script src="jquery-1.11.3.min.js"></

js超简单日历

用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示日历. html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>JS简单日历</title> 5 <meta http-equiv="Content-type" content=&

js写个日历

其实我是一个对时间和日期不怎么感兴趣的人,小学的时候感觉时间或者日期那块就让我很晕,因为有时候是100进制有时候是60进制,搞的我对日历一直很不感兴趣,最近不知道为什么想写一个日历了,可想而知,这个玩意对我的大脑会造成多大的伤害,很简单的. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>日历</title> <style type=

js实现动态给一个div添加文本内容与简单的日历

js实现动态给一个div添加文本内容(即在文本框中输入一段文字,点击设置文字按钮实现将文本框中的文字添加到div中) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <style

js写的简单购物车

最近在学习js的知识,对于我这种菜鸟而言,JS让我太痛苦了.曾经也不知道听谁说js很简单的,所以就学了,学了才知道...都是坑.... 现在分享一个我忍着巨大的痛苦写的一个简单购物车,并不是很完善.虽然不是我一个完成的,但是我是努力弄懂弄回才准备分享出去.有问题的部分请谅解,希望可以帮到有需要的朋友. 以下是购物车的简单代码: (1)html <body> <div class="shopCar"> <div class="caozuo"

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

【UI插件】简单的日历插件(下)—— 学习MVC思想

前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么就应该考虑其它UI库的接入问题 这个意思就是,我们的系统中所有UI插件应该有一些统一行为,我们如果希望统一为所有的插件加一点什么东西,需要有位置可加 这个意味着,可能我们所有的插件需要继承至一个抽象的UI类,并且该类提供了通用的几个事件点 ② 上次做的日历插件虽然说是简单,其耦合还是比较严重的(其实

基于java实现的简单网页日历功能,有兴趣得可以把它转换到前端实现

之前做项目的时候,因为要用到不同日期显示不同的内容,就自己做了一个日期的显示和选择功能,今天抽空把以前的代码理了一下,顺便就把之前做的日期功能给拿出来回顾一下,大家可以提点意见,帮忙完善下设计.先上一张完成后的显示效果,本人是后端程序员,对于前端的一些效果不是很熟悉,画面不好请见谅.. 下面切入正题: 我设计的日历表是11*3的显示,加上上一个月和下一个月的选项,对于大月的月份刚好足够,但小月和二月就会有空格.为了方便我在页面上展现日历,我将上一月.下一月.空字符和日期一起封装在了list集合中