js+html制作简单日历的方法
更新时间：2017年06月27日 17:09:45 作者：永朋
这篇文章主要为大家详细介绍了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日历插件使用方法汇总》进行学习
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了javascript实现表单验证的相关资料，以一个完整的实例对javascript实现表单验证的方法进行分析，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了ECMAscript新特性对象，对象（object）是JavaScript最重要的数据结构。ECMAScript 2015对它进行了重大升级，下面我们来看一下它的改变2021-12-12
这篇文章介绍了js 单击式的下拉菜单效果实例，有需要的朋友可以参考一下2013-08-08
解决方案其实就是冒泡排序的一个包装,本补丁不修复各浏览的排序算法不一致的问题2011-10-10
CommonJS是Node中的一种模块化规范，本文主要介绍了Webpack是如何打包CJS的，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
本文主要介绍了js获取数组对象中的全部key和value值，主要使用JavaScript的 map() 函数和 values() 迭代器来实现取出数组对象的所有key值和value值，感兴趣的可以了解下2024-01-01
这篇文章主要为大家详细介绍了微信小程序实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
reduce方法在数组的每个元素上执行用户提供的回调函数,即"reducer",它传入对前一个元素进行计算的返回值,结果是单个值,它是在数组的所有元素上运行reducer的结果,下面这篇文章主要给大家介绍了关于JavaScript数组reduce常见实例方法的相关资料,需要的朋友可以参考下2022-05-05
Js获取当前日期时间及其它操作，还有一些自己常用的方法，很好用，也很全。这里推荐给大家，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要为大家介绍了前端进阶之IntersectionObserver示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
最新评论