其实我是一个对时间和日期不怎么感兴趣的人，小学的时候感觉时间或者日期那块就让我很晕，因为有时候是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. 本周PSP+历年作品评论

    本周PSP 类别 内容 开始时间 结束时间 间断时间 净时间(min) 9月11号 看书 构建之法 19:00 21:00 14 106 9月12号 写程序 词频统计多需求版 8:00 14:23 3 ...

  2. js中把JSON字符串转换成JSON对象最好的方法

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 第一种解析方式:使用eval函数来解析,并且使用j ...

  3. spring的定时任务

    maven中引入quartz的jar包依赖 单纯针对时间的设置规则org.springframework.scheduling.quartz.CronTriggerBean允许你更精确地控制任务的运行 ...

  4. AMD机制与cMD的区别和概念简要介绍

    1.http://www.cnblogs.com/dojo-lzz/p/4707725.html 2.http://blog.chinaunix.net/uid-26672038-id-4112229 ...

  5. JavaSPI机制学习笔记

    最近在阅读框架源代码时,常常看到 SPI 的子包, 忍不住查了下: Service Provider Interface : 服务提供接口. JavaSPI 实际上是“基于接口的编程+策略模式+配置文 ...

  6. Intel Edison

    起步: https://software.intel.com/zh-cn/node/628224 刷机: https://software.intel.com/zh-cn/flashing-firmw ...

  7. webpack笔记_(3)_First_Project

    知道了怎么样安装,那么学习一下简单的应用吧. 1.安装webpack npm install webpack -g (全局) npm install webpack --save--dev (本地) ...

  8. top.location.href和localtion.href有什么不同

    top.location.href=”url”          在顶层页面打开url(跳出框架) self.location.href=”url”         仅在本页面打开url地址 pare ...

  9. laravel5.0升级到laravel5.1

    1.修改composer.json.将其中的"laravel/framework": "5.0.*"修改为"laravel/framework&quo ...

  10. Yeoman

    安装Yeoman之前,确认安装好Node.js和npm. sudo npm install --global yo 然后查看软件版本 yo --version && bower --v ...