月历javascript,月历表制作 三年级漂亮
需要一个js编写的月历
!DOCTYPE HTML
成都创新互联公司成都网站建设按需定制,是成都网站推广公司,为水处理设备提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站维护热线:18982081108
html lang="en"
head
meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /
meta http-equiv="Content-Type" content="text/html;charset=UTF-8"
titletest/title
link rel="stylesheet" href="css.css" type="text/css" media="screen"
script src=""/script
/head
body
input class="test" value="" style="paddind-top: 100px; padding-left:100px;"/
input class="test" value="" style="margin-top :100px; margin-left:100px;"/
style type="text/css"
#SimpleCanleder_Year_Month *{margin:0px;padding:0px;}
#SimpleCanleder_Year_Month .clear{clear: both;}
#SimpleCanleder_Year_Month {width:140px; font-size:14px;line-height:14px; border:1px solid lavender; padding:10px; padding-top:5px;padding-right:5px; position:absolute; background-color:white;}
#SimpleCanleder_Year_Month .title{height:35px;}
#SimpleCanleder_Year_Month .title li.middle{width:65px; position:relative; overflow:visible;}
#SimpleCanleder_Year_Month .title li.middle select{margin-top:-3px}
#SimpleCanleder_Year_Month .title li.middle .year_list{width:100px; position:absolute; background-color:lightgrey; left:-20px}
#SimpleCanleder_Year_Month .title li.middle .year_list li {background-color:transparent; text-align:center; width:45px; height: 20px;}
#SimpleCanleder_Year_Month .title li.middle .year_list ul{clear: both;}
#SimpleCanleder_Year_Month .title li, #SimpleCanleder_Year_Month .body li{background-color:lavender;list-style:none; width:30px; height:30px; overflow:hidden; margin-top:5px;margin-right:5px; float:left; display:inline; cursor:pointer}
#SimpleCanleder_Year_Month .title li.cur, #SimpleCanleder_Year_Month .body li.cur{background-color:tomato;}
#SimpleCanleder_Year_Month .title li.over, #SimpleCanleder_Year_Month .body li.over{background-color:lightblue;}
#SimpleCanleder_Year_Month .title li .inner, #SimpleCanleder_Year_Month .body li .inner{padding-top:8px; text-align:center;}
#SimpleCanleder_Year_Month .bottom{ height: 16px; padding-top: 5px; text-align: center }
#SimpleCanleder_Year_Month .bottom button.clear{ background-color: gainsboro; border: 1px solid; font-size: 12px;}
/style
script type="text/javascript"
(function($) {
$.simpleCanleder = function(box, options){
var _canlederBox = "#SimpleCanleder_Year_Month";
var _title_ul_li = ".title li";
box = $(box);
var box_height = parseFloat( box.height());
var box_width = parseFloat( box.width());
var boxOffset = box.offset();
var canlederBox = null;
box.click(function(){
canlederBox = $(_canlederBox);
if($(canlederBox).size() 0){
$(canlederBox).show();
}else{
_buildCanlederBox();
$("body").append(canlederBox);
$(document).click(function(e){
var pointX = e.pageX;
var pointY = e.pageY;
var $box = canlederBox.data("box");
var isCanlederBox = $(e.target).parents(_canlederBox);
if(canlederBox.is(":visible") $box e.target != $box[0] isCanlederBox.size() = 0){
var offset = canlederBox.offset();
var top = offset.top - 4;
var left = offset.left - 4;
var height = top + parseFloat(canlederBox.outerHeight()) + 4;
var width = left + parseFloat(canlederBox.outerWidth()) + 4;
if(pointX left pointY top
pointX width pointY height){
}else{
canlederBox.hide();
}
}
});
}
canlederBox.css({"top" : boxOffset.top + box_height + 6, "left": boxOffset.left});
canlederBox.data("box", box);
_init();
});
function _init(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
if(box.val()){
year = box.val().split("-")[0] * 1;
month = box.val().split("-")[1] * 1;
}
canlederBox.find(_title_ul_li).eq(1).find("div.inner").html(_getSelect(year));
canlederBox.find(".body li").each(function(){
if($(this).text() == month){
$(this).addClass("cur");
}else{
$(this).removeClass("cur");
};
});
}
function _buildCanlederBox(){
canlederBox = $("div/");
canlederBox.attr("id", "SimpleCanleder_Year_Month");
_buildTitle(canlederBox);
_buildBody(canlederBox);
canlederBox.append($("div/").addClass("clear"));
_buildBottom(canlederBox);
};
function _buildTitle(canlederBox){
var $title = $("div/").addClass("title").append("ul/").appendTo(canlederBox);
var $title_ul = $title.find("ul");
for(var i = 0; i 3; i++){
var $li = $("li/").append( $("div/").addClass("inner") );
$li.hover(function(){
$(this).addClass("over");
}, function(){
$(this).removeClass("over");
});
$title_ul.append($li);
}
var $title_ul_li = $title_ul.find("li");
$title_ul_li.eq(0).click(function(){
var year = $select.val(); //$select 在_getSelect()有定义
canlederBox.find(_title_ul_li).eq(1).find("div.inner").html(_getSelect(--year));
}).find("div.inner").text(" ");
$title_ul_li.eq(1).addClass("middle").click(function(){
})
.find("div.inner").addClass("paddingTop").html(_getSelect());
$title_ul_li.eq(2).click(function(){
var year = $select.val(); //$select 在_getSelect()有定义
canlederBox.find(_title_ul_li).eq(1).find("div.inner").html(_getSelect(++year));
}).find("div.inner").text(" ");
};
function _buildBody(canlederBox){
var $body = $("div/").addClass("body").append("ul/").appendTo(canlederBox);
var $body_ul = $body.find("ul");
for(var i = 0; i 12; i++){
var $inner = $("div/").addClass("inner").text(i+1);
var $li = $("li/").append($inner).click(function(){
var year = canlederBox.find(_title_ul_li).eq(1).find("select").val();
var month = $(this).find("div.inner").text() * 1;
month = month 10 ? "0" + month : month;
canlederBox.data("box").val(year + "-" + month);
canlederBox.hide();
});
$li.hover(function(){
$(this).addClass("over");
}, function(){
$(this).removeClass("over");
});
$body_ul.append($li);
}
};
function _buildBottom(canlederBox){
var $button_clear = $("button/").addClass("clear").click(function(){
canlederBox.data("box").val("");
canlederBox.hide();
}).text("清空");
var $bottom = $("div/").addClass("bottom").append($button_clear);
canlederBox.append($bottom);
};
var $select = null;
function _getSelect(year){
if(!year){
year = new Date().getFullYear();
}
$select = $("select/");
for(var i = 10; i =0; i--){
$select.append($("option/").text(year - i ));
}
for(var i = 1; i = 10; i++){
$select.append($("option/").text(year + i ));
}
$select.find("option").each(function(){
if($(this).text() == year){
$(this).attr("selected", "selected");
}
});
return $select;
};
};
$.fn.extend({
simpleCanleder: function(options) {
options = $.extend({},options);
this.each(function() {
new $.simpleCanleder(this, options);
});
return this;
}
});
})(jQuery);
$(".test").simpleCanleder();
/script
/body
/html
用javascript实现日历,高手帮忙
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title网页特效|Linkweb.cn/Js|---一个很漂亮实用的日历/title
SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"
//创建一个数组,用于存放每个月的天数
function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)
{
this[0] = m0;
this[1] = m1;
this[2] = m2;
this[3] = m3;
this[4] = m4;
this[5] = m5;
this[6] = m6;
this[7] = m7;
this[8] = m8;
this[9] = m9;
this[10] = m10;
this[11] = m11;
}
//实现月历
function calendar() {
var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";
var today = new Date();
var thisDay;
var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
year = today.getYear() +1900;
thisDay = today.getDate();
if (((year % 4 == 0) (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;
nDays = monthDays[today.getMonth()];
firstDay = today;
firstDay.setDate(1);
testMe = firstDay.getDate();
if (testMe == 2) firstDay.setDate(0);
startDay = firstDay.getDay();
document.write("div id='rili' style='position:absolute;width:140px;left:300px;top:100px;'")
document.write("TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'")
document.write("TRTDtable border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'");
document.write("TRth colspan='7' bgcolor='#C8E3FF'");
var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var now = new Date();
document.writeln("FONT STYLE='font-size:9pt;Color:#330099'" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "/FONT");
document.writeln("/TH/TRTRTH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'日/FONT/TH");
document.writeln("th bgcolor='#0080FF'FONT STYLE='font-size:9pt;Color:White'一/FONT/TH");
document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'二/FONT/TH");
document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'三/FONT/TH");
document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'四/FONT/TH");
document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'五/FONT/TH");
document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'六/FONT/TH");
document.writeln("/TRTR");
column = 0;
for (i=0; istartDay; i++) {
document.writeln("\nTDFONT STYLE='font-size:9pt' /FONT/TD");
column++;
}
for (i=1; i=nDays; i++) {
if (i == thisDay) {
document.writeln("/TDTD ALIGN='CENTER' BGCOLOR='#FF8040'FONT STYLE='font-size:9pt;Color:#ffffff'B")
}
else {
document.writeln("/TDTD BGCOLOR='#FFFFFF' ALIGN='CENTER'FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066'");
}
document.writeln(i);
if (i == thisDay) document.writeln("/FONT/TD")
column++;
if (column == 7) {
document.writeln("TR");
column = 0;
}
}
document.writeln("TRTD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'")
document.writeln("FORM NAME='clock' onSubmit='0'FONT STYLE='font-size:9pt;Color:#ffffff'")
document.writeln("现在时间:INPUT TYPE='Text' NAME='face' ALIGN='TOP'/FONT/FORM/TD/TR/TABLE")
document.writeln("/TD/TR/TABLE/div");
}
/SCRIPT
SCRIPT LANGUAGE="JavaScript"
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;}
//显示当前时间
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = " " + ((hours 12) ? hours -12 :hours)
timeValue += ((minutes 10) ? ":0" : ":") + minutes
timeValue += ((seconds 10) ? ":0" : ":") + seconds
timeValue += (hours = 12) ? " 下午 " : " 上午 "
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示
timerRunning = true;}
function startclock () {
stopclock();
showtime();}
/SCRIPT
/head
body onLoad="startclock(); timerONE=window.setTimeout"
script language="JavaScript" type="text/javascript"
!--
calendar();
//--
/script
/body
/html
位置和颜色可以自己改
如何把js中的日历显示改成月历?
如果要选择到月份。劝你不要用js了多麻烦。两个下拉列表 年-月。
JavaScript月历问题
var gMonths=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
var WeekDay=new Array("日","一","二","三","四","五","六");
var strToday="今天";
var strYear="年";
var strMonth="月";
var strDay="日";
var splitChar="-";
var startYear=2010;
var endYear=2020;
var dayTdHeight=12;
var dayTdTextSize=12;
var gcNotCurMonth="#E0E0E0";
var gcRestDay="#FF0000";
var gcWorkDay="#444444";
var gcMouseOver="#79D0FF";
var gcMouseOut="#F4F4F4";
var gcToday="#444444";
var gcTodayMouseOver="#6699FF";
var gcTodayMouseOut="#79D0FF";
var gdCtrl=new Object();
var goSelectTag=new Array();
var gdCurDate=new Date();
var giYear=gdCurDate.getFullYear();
var giMonth=gdCurDate.getMonth()+1;
var giDay=gdCurDate.getDate();
function $(){var elements=new Array();for(var i=0;iarguments.length;i++) {var element=arguments[i];if(typeof(arguments[i])=='string'){element=document.getElementById(arguments[i]);}if(arguments.length==1){return element;}elements.Push(element);}return elements;}
Array.prototype.Push=function(){var startLength=this.length;for(var i=0;iarguments.length;i++){this[startLength+i]=arguments[i];}return this.length;}
String.prototype.HexToDec=function(){return parseInt(this,16);}
String.prototype.cleanBlank=function(){return this.isEmpty()?"":this.replace(/\s/g,"");}
function checkColor(){var color_tmp=(arguments[0]+"").replace(/\s/g,"").toUpperCase();var model_tmp1=arguments[1].toUpperCase();var model_tmp2="rgb("+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(1,3).HexToDec()+","+arguments[1].substring(5).HexToDec()+")";model_tmp2=model_tmp2.toUpperCase();if(color_tmp==model_tmp1 ||color_tmp==model_tmp2){return true;}return false;}
function $V(){return $(arguments[0]).value;}
function fPopCalendar(evt,popCtrl,dateCtrl){evt.cancelBubble=true;gdCtrl=dateCtrl;fSetYearMon(giYear,giMonth);var point=fGetXY(popCtrl);with($("calendardiv").style){left=point.x+"px";top=(point.y+popCtrl.offsetHeight+1)+"px";visibility='visible';zindex='99';position='absolute';}$("calendardiv").focus();}
function fSetDate(iYear,iMonth,iDay){var iMonthNew=new String(iMonth);var iDayNew=new String(iDay);if(iMonthNew.length2){iMonthNew="0"+iMonthNew;}if(iDayNew.length2){iDayNew="0"+iDayNew;}gdCtrl.value=iYear+splitChar+iMonthNew+splitChar+iDayNew;fHideCalendar();}
function fHideCalendar(){$("calendardiv").style.visibility="hidden";for(var i=0;igoSelectTag.length;i++){goSelectTag[i].style.visibility="visible";}goSelectTag.length=0;}
function fSetSelected(){var iOffset=0;var iYear=parseInt($("tbSelYear").value);var iMonth=parseInt($("tbSelMonth").value);var aCell=$("cellText"+arguments[0]);aCell.bgColor=gcMouseOut;with(aCell){var iDay=parseInt(innerHTML);if(checkColor(style.color,gcNotCurMonth)){iOffset=(innerHTML10)?-1:1;}iMonth+=iOffset;if(iMonth1){iYear--;iMonth=12;}else if(iMonth12){iYear++;iMonth=1;}}fSetDate(iYear,iMonth,iDay);}
function Point(iX,iY){this.x=iX;this.y=iY;}
function fBuildCal(iYear,iMonth){var aMonth=new Array();for(var i=1;i7;i++){aMonth[i]=new Array(i);}var dCalDate=new Date(iYear,iMonth-1,1);var iDayOfFirst=dCalDate.getDay();var iDaysInMonth=new Date(iYear,iMonth,0).getDate();var iOffsetLast=new Date(iYear,iMonth-1,0).getDate()-iDayOfFirst+1;var iDate=1;var iNext=1;for(var d=0;d7;d++){aMonth[1][d]=(diDayOfFirst)?(iOffsetLast+d)*(-1):iDate++;}for(var w=2;w7;w++){for(var d=0;d7;d++){aMonth[w][d]=(iDate=iDaysInMonth)?iDate++:(iNext++)*(-1);}}return aMonth;}
function fDrawCal(iYear,iMonth,iCellHeight,iDateTextSize){var colorTD=" bgcolor='"+gcMouseOut+"' bordercolor='"+gcMouseOut+"'";var styleTD=" valign='middle' align='center' style='height:"+iCellHeight+"px;font-weight:bolder;font-size:"+iDateTextSize+"px;";var dateCal="";dateCal+="tr";for(var i=0;i7;i++){dateCal+="td"+colorTD+styleTD+"color:#990099'"+WeekDay[i]+"/td";}dateCal+="/tr";for(var w=1;w7;w++){dateCal+="tr";for(var d=0;d7;d++){var tmpid=w+""+d;dateCal+="td"+styleTD+"cursor:pointer;' onclick='fSetSelected("+tmpid+")'";dateCal+="span id='cellText"+tmpid+"'/span";dateCal+="/td";}dateCal+="/tr";}return dateCal;}
function fUpdateCal(iYear,iMonth){var myMonth=fBuildCal(iYear,iMonth);var i=0;for(var w=1;w7;w++){for(var d=0;d7;d++){with($("cellText"+w+""+d)){parentNode.bgColor=gcMouseOut;parentNode.borderColor=gcMouseOut;parentNode.onmouseover=function(){this.bgColor=gcMouseOver;};parentNode.onmouseout=function(){this.bgColor=gcMouseOut;};if(myMonth[w][d]0){style.color=gcNotCurMonth;innerHTML=Math.abs(myMonth[w][d]);}else{style.color=((d==0)||(d==6))?gcRestDay:gcWorkDay;innerHTML=myMonth[w][d];if(iYear==giYear iMonth==giMonth myMonth[w][d]==giDay){style.color=gcToday;parentNode.bgColor=gcTodayMouseOut;parentNode.onmouseover=function(){this.bgColor=gcTodayMouseOver;};parentNode.onmouseout=function(){this.bgColor=gcTodayMouseOut;};}}}}}}
function fSetYearMon(iYear,iMon){$("tbSelMonth").options[iMon-1].selected=true;for(var i=0;i$("tbSelYear").length;i++){if($("tbSelYear").options[i].value==iYear){$("tbSelYear").options[i].selected=true;}}fUpdateCal(iYear,iMon);}
function fPrevMonth(){var iMon=$("tbSelMonth").value;var iYear=$("tbSelYear").value;if(--iMon1){iMon=12;iYear--;}fSetYearMon(iYear,iMon);}
function fNextMonth(){var iMon=$("tbSelMonth").value;var iYear=$("tbSelYear").value;if(++iMon12){iMon=1;iYear++;}fSetYearMon(iYear,iMon);}
function fGetXY(aTag){var oTmp=aTag;var pt=new Point(0,0);do{pt.x+=oTmp.offsetLeft;pt.y+=oTmp.offsetTop;oTmp=oTmp.offsetParent;}while(oTmp.tagName.toUpperCase()!="BODY");return pt;}
function getDateDiv(){var noSelectForIE="";var noSelectForFireFox="";if(document.all){noSelectForIE="onselectstart='return false;'";}else{noSelectForFireFox="-moz-user-select:none;";}var dateDiv="";dateDiv+="div id='calendardiv' onclick='event.cancelBubble=true' "+noSelectForIE+" style='"+noSelectForFireFox+"position:absolute;z-index:99;visibility:hidden;border:1px solid #999999;'";dateDiv+="table border='0' bgcolor='#E0E0E0' cellpadding='1' cellspacing='1' ";dateDiv+="tr";dateDiv+="tdinput type='button' id='PrevMonth' value='' style='height:20px;width:20px;font-weight:bolder;' onclick='fPrevMonth()'";dateDiv+="/tdtdselect id='tbSelYear' style='border:1px solid;' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'";for(var i=startYear;iendYear;i++){dateDiv+="option value='"+i+"'"+i+strYear+"/option";}dateDiv+="/select/tdtd";dateDiv+="select id='tbSelMonth' style='border:1px solid;' onchange='fUpdateCal($V(\"tbSelYear\"),$V(\"tbSelMonth\"))'";for(var i=0;i12;i++){dateDiv+="option value='"+(i+1)+"'"+gMonths[i]+"/option";}dateDiv+="/select/tdtd";dateDiv+="input type='button' id='NextMonth' value='' style='height:20px;width:20px;font-weight:bolder;' onclick='fNextMonth()'";dateDiv+="/td";dateDiv+="/trtr";dateDiv+="td align='center' colspan='4'";dateDiv+="div style='background-color:#cccccc'table width='100%' border='0' cellpadding='3' cellspacing='1'";dateDiv+=fDrawCal(giYear,giMonth,dayTdHeight,dayTdTextSize);dateDiv+="/table/div";dateDiv+="/td";dateDiv+="/trtrtd align='center' colspan='4' nowrap";dateDiv+="span style='cursor:pointer;font-weight:bolder;' onclick='fSetDate(giYear,giMonth,giDay)' onmouseover='this.style.color=\""+gcMouseOver+"\"' onmouseout='this.style.color=\"#000000\"'"+strToday+":"+giYear+strYear+giMonth+strMonth+giDay+strDay+"/span";dateDiv+="/tr/tr";dateDiv+="/table/div";return dateDiv;}
with(document){onclick=fHideCalendar;write(getDateDiv());}
td 费用发生日期:*/td
tdlabel
input type="text" name="date" style="border:1px solid #999;" onClick="fPopCalendar(event,this,this)" onFocus="this.select()" readonly="readonly" /
*
/label/td
请教下各位,通过javascript来实现 有某年第几周 得到 这周的开始日期 和结束日期,怎么写啊?
html
head
title用JavaScript编写动态月历/title
script type="text/javascript"
!--
//函数是每个month对象的方法
function getFirstDay(theYear, theMonth){
var firstDate = new Date(theYear,theMonth,1);
return firstDate.getDay();
}
//每个月的天数
function getMonthLen(theYear, theMonth) {
var oneHour = 1000 * 60 * 60;
var oneDay = oneHour * 24;
var thisMonth = new Date(theYear, theMonth, 1);
var nextMonth = new Date(theYear, theMonth + 1, 1);
var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime() - oneHour)/oneDay);
return len;
}
//修正Y2K问题
function getY2KYear(today) {
var yr = today.getYear();
return ((yr 100) ? yr + 1900 : yr);
}
function populateFields(form) {
//为用户最后选择初始化变量
var theMonth = form.chooseMonth.selectedIndex;
var theYear = form.chooseYear.options[form.chooseYear.selectedIndex].value;
//初始化与日期相关的变量
//选择月份的第一天
var firstDay = getFirstDay(theYear, theMonth);
//下列循环所需要的TD...\/TD标记的总数
var howMany = getMonthLen(theYear, theMonth);
//设置年份和月份
form.oneMonth.value = theYear+"年"+theMonths[theMonth];
//填充表域
for (var i = 0; i 42; i++) {
if (i firstDay || i = (howMany + firstDay)) {
// 在实际日期的前后清空表域
form.oneDay[i].value = "";
} else {
// 输入日期值
form.oneDay[i].value = i - firstDay + 1;
}
}
}
//--
/script
/head
body
centerh1生成的月历(动态)/h1/center
hr /
script type="text/javascript"
!--
//初始化变量
//创建month对象名数组
theMonths = new Array("1月", "2月", "3月", "4月", "5月","6月",
"7月", "8月", "9月", "10月", "11月", "12月");
// 填充表域
var oneField = "input type='text' name='oneDay' size='2' onfocus=''";
//开始组合HTML表格
var content = "formcentertable border='1'";
//在月历顶部显示年份和月份
content += "trth colspan='7'input type='text'name='oneMonth'\/th\/tr";
//列头的星期
content += "trth 日 \/thth 一 \/thth 二 \/th";
content += "th 三 \/thth 四 \/thth 五 \/th";
content += "th 六 \/th\/trtr";
//布局6行
for (var i = 1; i 43; i++) {
content += "td align='middle'" + oneField + "\/td";
if (i % 7 == 0) {
content += "\/trtr";
}
}
content += "\/table";
// 向文档写整个表的HTML
document.write(content);
//--
/script
select name="chooseYear"
option value="2003" selected="selected"2003年/option
option value="2004"2004年/option
option value="2005"2005年/option
option value="2006"2006年/option
option value="2007"2007年/option
option value="2008"2008年/option
option value="2009"2009年/option
option value="2010"2010年/option
option value="2011"2011年/option
/select
select name="chooseMonth"
option value="January" selected="selected"1月/option
option value="February"2月/option
option value="March"3月/option
option value="April"4月/option
option value="May"5月/option
option value="June"6月/option
option value="July"7月/option
option value="August"8月/option
option value="September"9月/option
option value="October"10月/option
option value="November"11月/option
option value="December"12月/option
/select
br /
input type="button" name="updater" value="更新月历" onclick="populateFields(this.form)" /
/form
/body
/html
求一款js做的时间日历控件?
这是我找到的一个js做的日历,不知道是不是你要的,里面有包含时间,其实在日历里面加时间也是比较简单的,只要调用DATE的方法就可以了,希望对你有用。下面是代码段,效果图附上。
html
head
SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"
//定义月历函数
function calendar() {
var today = new Date(); //创建日期对象
year = today.getYear(); //读取年份
thisDay = today.getDate(); //读取当前日
//创建每月天数数组
var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
//如果是闰年,2月份的天数为29天
if (((year % 4 == 0) (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;
daysOfCurrentMonth = monthDays[today.getMonth()]; //从每月天数数组中读取当月的天数
firstDay = today;//复制日期对象
firstDay.setDate(1); //设置日期对象firstDay的日为1号
startDay = firstDay.getDay(); //确定当月第一天是星期几
//定义周日和月份中文名数组
var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
//创建日期对象
var newDate = new Date();
//创建表格
document.write("TABLE BORDER='0' CELLSPACING='0' CELLPADDING='2' ALIGN='CENTER' BGCOLOR='#0080FF'")
document.write("TRTDtable border='0' cellspacing='1' cellpadding='2' bgcolor='#88FF99'");
document.write("TRth colspan='7' bgcolor='#C8E3FF'");
//显示当前日期和周日
document.writeln("FONT STYLE='font-size:9pt;Color:#FF0000'" + newDate.getYear() + "年" + monthNames[newDate.getMonth()] + " " + newDate.getDate() + "日 " + dayNames[newDate.getDay()] + "/FONT");
//显示月历表头
document.writeln("/TH/TRTRTH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'日/FONT/TH");
document.writeln("th bgcolor='#0080FF'FONT STYLE='font-size:9pt;Color:White'一/FONT/TH");
document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'二/FONT/TH");
document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'三/FONT/TH");
document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'四/FONT/TH");
document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'五/FONT/TH");
document.writeln("TH BGCOLOR='#0080FF'FONT STYLE='font-size:9pt;Color:White'六/FONT/TH");
document.writeln("/TRTR");
//显示每月前面的"空日"
column = 0;
for (i=0; istartDay; i++) {
document.writeln(" TDFONT STYLE='font-size:9pt' /FONT/TD");
column++;
}
//如果是当前日就突出显示(红色),否则正常显示(黑色)
for (i=1; i=daysOfCurrentMonth; i++) {
if (i == thisDay) {
document.writeln("/TDTD ALIGN='CENTER'FONT STYLE='font-size:9pt;Color:#ff0000'B")
}
else {
document.writeln("/TDTD BGCOLOR='#88FF99' ALIGN='CENTER'FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#000000'");
}
document.writeln(i);
if (i == thisDay) document.writeln("/FONT/TD")
column++;
if (column == 7) {
document.writeln("TR");
column = 0;
}
}
document.writeln("TRTD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'")
document.writeln("FORM NAME='time' onSubmit='0'FONT STYLE='font-size:9pt;Color:#ffffff'")
//显示当前时间
document.writeln("当前时间:INPUT TYPE='Text' NAME='textbox' ALIGN='TOP'/FONT/TD/TR/TABLE")
document.writeln("/TD/TR/TABLE/FORM");
}
/SCRIPT
SCRIPT LANGUAGE="JavaScript"
//初始化控制变量
var timerID = null;
var timerRunning = false;
//定义时间显示函数
function stoptime (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;}
//定义显示时间函数
function showtime () {
var newDate = new Date();
var hours = newDate.getHours();
var minutes = newDate.getMinutes();
var seconds = newDate.getSeconds()
var timeValue = " " + ((hours 12) ? hours -12 :hours)
timeValue += ((minutes 10) ? ":0" : ":") + minutes
timeValue += ((seconds 10) ? ":0" : ":") + seconds
timeValue += (hours = 12) ? " 下午 " : " 上午 "
document.time.textbox.value = timeValue;
timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示
timerRunning = true;}
//显示当前时间
function starttime () {
stoptime();
showtime();}
/SCRIPT
/head
BODY onLoad="starttime()" TEXT="#000000" TOPMARGIN="0"
script language="JavaScript" type="text/javascript"
calendar(); //显示月历
/script
/BODY
/html
当前名称:月历javascript,月历表制作 三年级漂亮
本文路径:http://hbruida.cn/article/dsipiej.html