其实我是一个对时间和日期不怎么感兴趣的人，小学的时候感觉时间或者日期那块就让我很晕，因为有时候是100进制有时候是60进制，搞的我对日历一直很不感兴趣，最近不知道为什么想写一个日历了，可想而知，这个玩意对我的大脑会造成多大的伤害，很简单的.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>日历</title>

<style type="text/css">

*{ margin:0; padding:0; list-style:none;}

</style>

</head>

<body>

<div id="can" style="border-bottom:1px solid #ccc; border-right:1px solid #ccc; width:357px; overflow:hidden; float:left; margin:100px;">

</div>

</body>

</html>

<script type="text/javascript">

    var obj=document.getElementById("can");

    var oDl=document.createElement("dl");

    var arrWeek=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]

    for(var i=0;i<7;i++){

        var oDt=document.createElement("dt");

        oDt.style.background="#f2f2f2";

        oDt.style.width=50+"px";

        oDt.style.height=30+"px";

        oDt.style.textAlign="center";

        oDt.style.lineHeight=30+"px";

        oDt.style.fontSize=13+"px";

        oDt.style.borderWidth=1+"px";

        oDt.style.borderColor="#ccc";

        oDt.style.borderStyle="solid";

        oDt.style.borderRight="none";

        oDt.style.borderBottom="none";

        oDt.style.cssFloat="left";

        oDt.innerHTML=arrWeek[i];

        oDl.appendChild(oDt);

    }

    for(var i=0;i<42;i++){

        var oDt=document.createElement("dd");

        oDt.style.width=50+"px";

        oDt.style.height=30+"px";

        oDt.style.textAlign="center";

        oDt.style.lineHeight=30+"px";

        oDt.style.fontSize=13+"px";

        oDt.style.borderWidth=1+"px";

        oDt.style.borderColor="#ccc";

        oDt.style.borderStyle="solid";

        oDt.style.borderRight="none";

        oDt.style.borderBottom="none";

        oDt.style.cssFloat="left";

        oDl.appendChild(oDt);

    }

    obj.appendChild(oDl);

    var aDd=obj.getElementsByTagName("dd");

    var d=new Date();

    var y=d.getFullYear();

    var m=d.getMonth();

    var da=d.getDate();

    var d2=new Date(y,m,0);

    var d3=new Date(y,m+1,0);

    var md=d3.getDate();

    var d2w=d2.getDay();

    for(var i=0;i<md+d2w+1;i++){

        if(i<d2w || i==d2w){

            aDd[i].innerHTML="";

        }else{

            if(i-d2w==da){

                aDd[i].style.backgroundColor="#aaa"

                }

            aDd[i].innerHTML=i-d2w;

        }

    }

</script>

当然，这个只是一个简单到简陋，简陋到我估计都不能使用了，哈哈，爱好而已

js写个日历的更多相关文章

  1. 自己用js写的日历（在考勤中使用，显示员工的日期的考勤情况）

    1.HTML部分 <div id="AttendanceDataDetailDiv"> <div class="A_close"> &l ...

  2. javascript js写特效日历

    <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 纯JS写出日历

    封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...

  4. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  5. 【原】js 签到用日历

    最近做的一个项目中,需要用到一个日历来记录你的签到,网上找了一些,感觉挺庞大的,所以就自己写了一个,记录一下自己写这个日历的经过 html代码: <table cellspacing=" ...

  6. js超简单日历

    用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...

  7. 原生js日历选择器，学习js面向对象开发日历插件

    在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...

  8. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  9. 用JS写了一个打字游戏，反正我是通不了关

    今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...

随机推荐

  1. GLSL第一个程序

    拿出来直接运行即可,可以直接理解什么是GLSL,之所以贴出来是因为很多文章写得乱七八糟,一面解释,一面贴代码,有必要吗??很多GLSL电子书都有很详细的解释的. 我的OpenGL框架代码可能和你的框架 ...

  2. OpenStack 新加计算节点后修改

    Contents [hide] 1 前提 2 iptables禁止snat= 3 vlan支持 4 Quota支持 5 修改物理资源设置. 6 添加collectd 7 重启服务 前提 我们使用fue ...

  3. android自定义view属性

    第一种 /MainActivity/res/values/attrs.xml <?xml version="1.0" encoding="utf-8"?& ...

  4. 关于jQuery的bind()\trigger()\triggerHandler()

    1.bind() 事件绑定. 多个事件会链式累加,而不会覆盖. 即 $("div").bind("click",funtion(){alert("te ...

  5. UINavigationController详解二（转）页面切换和SegmentedController

    原文出自:http://blog.csdn.net/totogo2010/article/details/7682433,非常感谢. 1.RootView 跳到SecondView 首先我们需要新一个 ...

  6. 关于 ActiveMQ 的消息模式

    1.JMS Queue 执行 load balancer语义:一条消息仅能被一个 consumer(消费者) 收到.如果在 message 发送的时候没有可用的consumer,那么它将被保存一直到能 ...

  7. IOS 音频开发文件大小计算

    音频基础知识 音频文件计算大小 音频转码 标签(空格分隔): 调查 IOS音频 https://developer.apple.com/library/ios/documentation/MusicA ...

  8. [c++][语言语法]stringstream iostream ifstream

    c++中ifstream一次读取整个文件 读取至char*的情况 std::ifstream t; int length; t.open("file.txt"); // open ...

  9. 下载服务器端的图片和下载excel

    #region 下载 /// <summary> /// 下载资源 /// </summary> public void Download() { SaveFileDialog ...

  10. js 精确小数俩位

    function toDecimal2(x) {                          var f = parseFloat(x);                          if ...