其实我是一个对时间和日期不怎么感兴趣的人，小学的时候感觉时间或者日期那块就让我很晕，因为有时候是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. 夺命雷公狗---DEDECMS----25dedecms导航条首页的跳转

    我们的导航条首页一直没写跳转,现在我们看看dede自带模版的首页是怎么写的: 他也是封装了一个{dede:global.cfg_cmsurl/}/内置标签来实现的,那么我们来改下我们的head.htm ...

  2. zw版【转发·台湾nvp系列Delphi例程】HALCON SetMshape

    zw版[转发·台湾nvp系列Delphi例程]HALCON SetMshape procedure TForm1.FormShow(Sender: TObject);var img : HImageX ...

  3. 【cruch bang】中切换成左手鼠标

    在“右键”菜单->settings->Edit autostart启动的geany编辑器中,最后加内容: xmodmap -e 'pointer = 3 2 1'

  4. 《C语言入门1.2.3—一个老鸟的C语言学习心得》—清华大学出版社炮制的又一本劣书及伪书

    <C语言入门1.2.3—一个老鸟的C语言学习心得>—清华大学出版社炮制的又一本劣书及伪书 [薛非评] 区区15页,有80多个错误. 最严重的有: 通篇完全是C++代码,根本不是C语言代码. ...

  5. Ajax错误 “SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, 由于出现错误 00002ef3 而导致此项操作无法完成” 的归纳总结

    最近在做Asp.net项目的时候,用Ajax访问服务器数据有时候老是莫名其妙的报错:SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, 由于出现错误 00002ef3 而 ...

  6. FireDac 与数据库连接时字符集及对应的字段类型问题

    近日在一个过程调用时发生一个奇怪现象, 异常返回意思是说, 数据的长度是[6], 而字段定义的长度是[3].  分析后认为:  调用过程你不涉及到对返回数据集的字段手动定义问题, 出现这个问题应是两边 ...

  7. CentOS修改主机名和网络信息

    1.修改主机名称 [root@centos ~]# vim /etc/sysconfig/network打开文件,修改以下内容并保存 NETWORKING=yes #使用网络 HOSTNAME=cen ...

  8. 161018、springMVC中普通类获取注解service方法

    1.新建一个类SpringBeanFactoryUtils 实现 ApplicationContextAware package com.loiot.baqi.utils; import org.sp ...

  9. Aspose.Words操作word生成PDF文档

    Aspose.Words操作word生成PDF文档 using Aspose.Words; using System; using System.Collections.Generic; using ...

  10. php curl向远程服务器上传文件

    <?php /** * test.php: */ header('content-type:text/html;charset=utf8'); $ch = curl_init(); //加@符号 ...