其实我是一个对时间和日期不怎么感兴趣的人，小学的时候感觉时间或者日期那块就让我很晕，因为有时候是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. 夺命雷公狗---node.js---12之fs模块文件的操作

    node比客户端浏览器的js强的地方之一就是他的文件操作模块,可以直接对系统的文件进行操作 再打开来看下是否发生了变化,由此可见node的强大的地方了.. 实际代码如下所示: /** * Create ...

  2. 夺命雷公狗—angularjs—16—angularjs里面的缓存

    强大的angularjs也给我们预留了一套他的缓存机智,这样在某个程度上来说还是可以做到减轻一点服务器压力的.... <!DOCTYPE html> <html lang=" ...

  3. ubuntu android环境配置

    1.下载eclipse 2.下载sdk 3.安装adt 4.配置sdk环境路径sudo gedit /etc/profile export PATH=$JAVA_HOME/bin:$JAVA_HOME ...

  4. NOIP201205Vigenère密码

                                   NOIP201205Vigenère密码 [问题描述]   16 世纪法国外交家Blaise de Vigenère设计了一种多表密码加密 ...

  5. datasnap 的线程池（转）

    datasnap的线程池 新的datasnap使用INDY10的线程池.不管你知不知道,DATASNAP都是使用线程池了,这和MIDAS不同,MIDAS默认是没有线程池的. 跟踪INDY10线程池类T ...

  6. Java常用快捷键

    Ctrl+M 最大化当前的Edit或View (再按则反之) Crl+k:查找下一处 Ctrl+Shift+O 导包 Ctrl+W 关闭当前EditerCtrl+shift+W 关闭所有当前页 Ctr ...

  7. 【python cookbook】【字符串与文本】8.编写多行模式的正则表达式

    问题:用正则表达式对一段文本块做匹配,但是希望在进行匹配时能够跨越多行 解决方案: 1.正则表达式添加对换行符的支持: 2.re.compile()函数一个有用的标记-re.DOTALL使得正则表达式 ...

  8. 160918、BigDecimal运算

    java.math.BigDecimal.BigDecimal一共有4个够造方法,让我先来看看其中的两种用法: 第一种:BigDecimal(double val)Translates a doubl ...

  9. linux下配置环境变量【原创】

    用户目录下的.profile, 你只需要在用户目录下,创建bin目录,在里面放入你想要执行的可执行文件,就可以在命令行下就可以使用了 # ~/.profile: executed by the com ...

  10. 5.1JavaScript精华

    9.使用Promises Promises,是Javascript表现item的一种方式.它执行异步工作,在未来的某个时间点完成.遇到最多的promises,是使用Ajax请求.浏览器在后台发起HTT ...