js+html制作简单日历的方法
新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin: 0;padding: 0}
#calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}
#calendar h4 {text-align: center;margin-bottom: 10px}
#calendar .a1 {position: absolute;top: 20px;left: 20px;}
#calendar .a2 {position: absolute;top: 20px;right: 20px;}
#calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px}
#calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;}
#calendar .dateList {overflow: hidden;clear: both}
#calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;}
#calendar .dateList .ccc {color: #ccc;}
#calendar .dateList .red {background: #F90;color: #fff;}
#calendar .dateList .sun {color: #f00;}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
//必要的数据
//今天的年 月 日 ；本月的总天数；本月第一天是周几？？？
var iNow=0;
function run(n) {
var oDate = new Date(); //定义时间
oDate.setMonth(oDate.getMonth()+n);//设置月份
var year = oDate.getFullYear(); //年
var month = oDate.getMonth(); //月
var today = oDate.getDate(); //日
//计算本月有多少天
var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
//判断闰年
if(month == 1) {
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
allDay = 29;
}
}
//判断本月第一天是星期几
oDate.setDate(1); //时间调整到本月第一天
var week = oDate.getDay(); //读取本月第一天是星期几
//console.log(week);
$(".dateList").empty();//每次清空
//插入空白
for(var i = 0; i < week; i++) {
$(".dateList").append("<li></li>");
}
//日期插入到dateList
for(var i = 1; i <= allDay; i++) {
$(".dateList").append("<li>" + i + "</li>")
}
//标记颜色=====================
$(".dateList li").each(function(i, elm){
//console.log(index,elm);
var val = $(this).text();
//console.log(val);
if (n==0) {
if(val<today){
$(this).addClass('ccc')
}else if(val==today){
$(this).addClass('red')
}else if(i%7==0 || i%7==6 ){
$(this).addClass('sun')
}
}else if(n<0){
$(this).addClass('ccc')
}else if(i%7==0 || i%7==6 ){
$(this).addClass('sun')
}
});
//定义标题日期
$("#calendar h4").text(year + "年" + (month + 1) + "月");
};
run(0);
$(".a1").click(function(){
iNow--;
run(iNow);
});
$(".a2").click(function(){
iNow++;
run(iNow);
})
});
</script>
</head>
<body>
<div id="calendar">
<h4>2013年10月</h4>
<a href="##" rel="external nofollow" rel="external nofollow" class="a1">上月</a>
<a href="##" rel="external nofollow" rel="external nofollow" class="a2">下月</a>
<ul class="week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="dateList"></ul>
</div>
</body>
</html>
更多精彩内容请点击专题《javascript日历插件使用方法汇总》进行学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe
-
js日历控件（可精确到分钟）
.menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} .cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} .cal_table td{ border:1px #
-
轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-
-
JS实现一个简单的日历
主要分为三个部分,1:获取li元素 2:如何填写对应的日期 3:如何获取点击li元素的事件. 1:通过节点间关系的属性children 获取li元素(两个for循坏遍历): 2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期.第一行上个月的日期显示 : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1,然后在第一行上月天数显示开始值自加. 3:利用JS的事件冒泡获取li的inne
-
纯JS实现简单的日历
本文实例为大家分享了纯JS实现日历的具体代码,供大家参考,具体内容如下 封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1 var newdara=new Date() var dd=newdara.getDate(); var d=new Date(y
-
纯js简单日历实现代码
复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa
-
基于javascript编写简单日历
一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解决行数问题之前,还得先知道这个月的第1天是星期几,因为每个月的1号并不都是从日历上的星期天开始排的,可能1号是星期五,星期六也说不定,所以1号的左边部分,就得用空表格代替了.那么用多少个空表格代替呢,这里就得用到getDay()方法了,该方法返回数组[0-6]中的一个数字,0代表星期天,1代表星期一,2代表星期二,以此类推.所以如果一个月的1号是星期
-
JS日历 推荐
两年前写过一个日历,可是兼容性不好. 这次重新写了一次. 兼容多种浏览器 了解了不少东东,特别是对于W3C标准化． 如 FF和IE 对box模型的理解不同 box.style{width:100;border 1px;} ie理解 为 box.width = 100 ff 理解 为 box.width = 100 + 1*2 = 102 可以使用这种方法使两种浏览器都可以正常浏览 box.style{width:100!important; width /**/:120px;bo
-
JS学习之一个简易的日历控件
这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo
-
php+javascript的日历控件
复制代码 代码如下: <html> <head> <title>js calendar</title> <script language="javascript"> /* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * ----------------------------------------------------------- * * The DHT