1 html代码
<!doctype html>
<head>
<title> </title>
<meta charset="utf-8"/>
<style type="text/css">
#calendar1 a{
float:left;
width:30px;
}
#calendar{
background:none repeat scroll 0 0 #E0ECF9;
width: 210px;
border: 1px solid #479AC7;
position:absolute;
left:300px;
}
#calendar .week{
background:none repeat scroll 0 0 #D5F3F4;
float:left;
color:#808080;
}
#calendar .week a{
cursor: auto;
}
#calendar a{
float:left;
width:30px;
display:block;
height:25px; /* a标签 有这个值才显示 */
line-height:25px;
text-align: center;
cursor: pointer;
}
#calendar .head a{
background: none repeat scroll 0 0 #479AC7;
}
#calendar .weekEnd{
color:red;
}
#calendar a.day:hover {
background-color:#D5F3F4
}
</style>
</head>
<body>
<div id="calendar1" style="background:none repeat scroll 0 0 #E0ECF9;width: 210px;border: 1px solid #479AC7;position:absolute;">
<span style="background:none repeat scroll 0 0 #479AC7;float:left;"><a>日</a><a>一</a><a>二</a><a>三</a><a>四</a><a>五</a><a>六</a></span>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
<a>1</a><a>1</a><a>1</a><a>1</a><a>1</a>
</div>
</body>
2 js 处理
<script type="text/javascript">
/*
* function 写日志的函数
* html 加载结束后在调用这个函数 即放到body下面
* 参数1 logStr 需要写的日志
* 参数2 id 写到什么地方 不写这个参数则打印到页面上
*/
function writeData( logStr ,id ){
if(logStr==null || logStr=='' ) return ;
var logObjId= id==null? "":id ;
var logObj = document.getElementById(logObjId);
//如果没有给出日志写到哪里则
logObj = logObj||document.getElementsByTagName('body')[0];
logObj.innerHTML = logObj.innerHTML + " "+logStr ;
}
//取出 日期的数组 42个格 ，在数组相应位置填充相应的日期
var getArray = function( date ){
if(!date) return ;
var dates = new Array(42);
var year = date.getFullYear();
var month = date.getMonth();
var dateFirst = new Date(year,month,1 ).getDay(); //取出当前月份的第一天是周几
var dateLast = new Date(year,month+1,0 ).getDate(); //下一个月的第0天是本月的最后一天
for(var i=1;i<=dateLast ;i++ ){
//dates[i] = new Date( year,month,i ).toLocaleString();
dates[dateFirst+i-1] = year+"-"+month+"-"+i
}
return dates;
}
//创建 外面轮廓
var createOutline = function(){
var outLine = document.createElement('div');
outLine.setAttribute('id','calendar');
var body = document.getElementsByTagName('body')[0];
body.appendChild( outLine );
return outLine;
}
//用数字 取出 中文的月份
var getMonthZW = function(data){
var zw =null ;
switch (data)
{
case 1 :
zw = '一月'; break;
case 2 :
zw = '二月'; break;
case 3 :
zw = '三月'; break;
case 4 :
zw = '四月'; break;
case 5 :
zw = '五月'; break;
case 6 :
zw = '六月'; break;
case 7 :
zw = '七月'; break;
case 8 :
zw = '八月'; break;
case 9 :
zw = '九月'; break;
case 10 :
zw = '十月'; break;
case 11 :
zw = '十一月'; break;
case 12 :
zw = '十二月'; break;
}
return zw;
}
//创建日历的头部 并添加 前后 的月份与年份
var createHead = function(outLine ,currentDate,aTemplate ){
var head = document.createElement('span');
outLine.appendChild( head );
head.className = 'head';
//添加年份左
var yearLeftNode = aTemplate.cloneNode();
yearLeftNode.innerHTML = "<<";
head.appendChild( yearLeftNode );
yearLeftNode.style.width='30px';
yearLeftNode.onclick = (function(date){
return function(){
drawCalendar( preYear(date));
}
})(currentDate);
//添加月份左 移动
var monthLeftNode = aTemplate.cloneNode();
monthLeftNode.innerHTML = "<";
head.appendChild( monthLeftNode );
monthLeftNode.style.width='30px';
monthLeftNode.onclick = (function(date){
return function(){
drawCalendar(preMonth(date) );
}
})(currentDate);
//addMonthAndYear(head,aTemplate,"<", preMonth(date) ) ;
//添加月份
var monthNode = aTemplate.cloneNode();
monthNode.innerHTML= getMonthZW( currentDate.getMonth()+1 );
head.appendChild( monthNode );
monthNode.style.width='40px';
//添加年
var yearNode = aTemplate.cloneNode();
yearNode.innerHTML = currentDate.getFullYear() +'年';
head.appendChild( yearNode );
yearNode.style.width='50px';
//添加月份右 移动
var monthRightNode = aTemplate.cloneNode();
monthRightNode.innerHTML = ">";
head.appendChild( monthRightNode );
monthRightNode.style.width='30px';
monthRightNode.onclick = (function(date){
return function(){
drawCalendar(nextMonth(date) );
}
})(currentDate);
//添加年 右 移动
var yearRightNode = aTemplate.cloneNode();
yearRightNode.innerHTML = ">>";
head.appendChild( yearRightNode );
yearRightNode.style.width='30px';
yearRightNode.onclick = (function(date){
return function(){
drawCalendar(nextYear(date) );
}
})(currentDate);
}
//本来想把上面按钮封装一下，但单击时候全局变量date没想出办法处理
//头部 添加月份 与年份的 左右单击按钮
function addMonthAndYear(head,aTemplate,btnHtml, goToDate ){
var node = aTemplate.cloneNode();
node.innerHTML = ">";
head.appendChild( node );
node.style.width='30px';
node.onclick = (function(date){
return function(){
drawCalendar(date);
}
})(goToDate);
}
//得到下一年
function nextYear(date){
return new Date(date.getFullYear()+1,date.getMonth(),date.getDate() );
}
//得到前一月 范围 0-11
function nextMonth(date){
var month = date.getMonth()+1;
var year = date.getFullYear();
if( month >11){
month = 0;
year++ ;
}
return new Date( year , month,date.getDate() );
}
//取出前一年
function preYear(date){
return new Date(date.getFullYear()-1,date.getMonth(),date.getDate() );
}
//得到前一年 范围 0-11
function preMonth(date){
var month = date.getMonth()-1;
var year = date.getFullYear();
if( month<0){
month = 12;
year-- ;
}
return new Date( year , month,date.getDate() );
}
//创建周
var createWeek = function( outLine,a ){
var weeks = "日一二三四五六".split('');
var week = document.createElement('span'); //复制一个超链接
week.className = 'week';
for(var i=0;i<weeks.length;i++ ){
var aNew = a.cloneNode();
aNew.innerHTML= weeks[i] ;
week.appendChild(aNew );
}
outLine.appendChild(week);
return week;
}
//创建日期显示
var createDay= function(outLine,dates,aTemplate){
if(!dates) return ;
for(var i=0;i<dates.length;i++ ){
var aNew = aTemplate.cloneNode(); //复制一个超链接
if(dates[i] && dates[i]!='undefine'){
aNew.innerHTML=dates[i].split('-')[2] ; //添加 天
aNew.className = 'day'; //添加 hover样式
if( i%7==0 || i%7==6 ) aNew.className='weekEnd';
//运用 闭包 在单击的时候 保存日期到单击事件中
aNew.onclick=(function(d){
return function(){
//拿到 对应位置的日期
alert( d);
}
})( dates[i] );
}
outLine.appendChild(aNew );
}
}
//画日历
var drawCalendar = function(date){
//收集一个月的日期数组
var arrs = getArray(date);
var outLine = createOutline();//创建外边框
var aTemplate = document.createElement('a'); //模板
createHead(outLine, date ,aTemplate);//创建日历的头部
createWeek(outLine,aTemplate ); //创建日历的周的部分
createDay(outLine,arrs, aTemplate ); //创建日历的天部分
}
var date = new Date();
drawCalendar(date );
</script>
相关推荐
JavaScript日历控件是网页开发中常用的一种交互元素，它能帮助用户方便地选择日期，常见于表单输入、事件安排或时间相关的功能。在给定的资源中，包含了六种不同样式的JavaScript日历，这些日历可能具有不同的设计...
JavaScript日历是一个交互式的控件，常用于网页中让用户方便地选择日期。它采用JavaScript语言编写，具有浮动特性，能够定位在页面的任意位置，并且用户可以通过点击来选取日期。这个日历的设计允许用户在不离开当前...
在这个“完美javascript日历大集合”中，我们可能会遇到一系列使用JavaScript实现的创新日历组件，这些组件可能包括各种设计风格、功能特性和适应性，旨在提升用户体验并增强网站的互动性。 日历组件是网页中常见的...
JavaScript日历是一款完全使用原生JavaScript编写的日历组件，它体现了JavaScript在前端开发中的强大功能，无需依赖任何外部库如Vue或jQuery。这个组件允许用户进行上下翻页以查看不同月份的日历，并且支持点击特定...
JavaScript日历控件是网页开发中常用的一种交互元素，它为用户提供了一个直观的方式来选择日期，常见于表单、事件管理或在线预订系统等场景。在本文中，我们将深入探讨六种不同的JavaScript日历控件，了解它们的特点...
JavaScript日历是一个常见的网页交互元素，它为用户提供了一个方便的方式来选择日期，常见于表单填写、事件安排等场景。在Web开发中，JavaScript日历组件的实现主要依赖于JavaScript语言和CSS来完成页面布局和样式...
JavaScript日历组件是一种在网页上实现交互式日期选择功能的工具，它允许用户方便地查看和选择日期，常用于表单填写、事件预订或者时间安排等场景。在本案例中，我们有两个关键文件：`jscalendarx.htm` 和 `...
JavaScript日历插件是一种网页应用程序中的交互式组件，它允许用户在网页上选择或输入日期和时间。这种插件通常由JavaScript代码实现，利用浏览器的DOM（文档对象模型）进行操作，提供用户友好的界面来处理日期选择...
JavaScript日历是网页开发中常用的一种交互元素，用于展示日期并提供用户选择日期的功能。在网页设计中，美观且易用的日历控件能够提升用户体验，使得数据输入更加直观便捷。这里我们关注的是一个个人收藏的...
【标题】"日文版javascript日历"是一个专门针对日语环境设计的JavaScript日历控件，它提供了方便的日历显示和交互功能，尤其适用于需要日文日期展示的Web应用程序。这个控件不仅包含了完整的日历功能，还带有详细的...
“有点FLASH般的闪亮效果”则暗示了这个JavaScript日历可能采用了类似早期FLASH技术中的动态光照、渐变或者透明效果，来达到吸引用户注意力并提升网页互动性目的。这样的日历组件在网页设计中可以用于日期选择、事件...
JavaScript日历控件是网页开发中的一个重要组成部分，它为用户提供了一种直观且用户友好的方式来选择日期。Tigra Calendar是一款广泛使用的跨浏览器JavaScript日历控件，它以其弹出式的显示方式而受到青睐。在本文中...