javascript 表单日期选择效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 表单日期选择效果

Javascript: 非常厉害的javascript 实现指针式时间; 文档处理系列——随时更新; 用javascript实现文本框和"选择"按扭之间的间距; 使用户点击后退按钮使效三行代码; Javascript 个人笔记（没有整理，很乱）; 建议大家看下JavaScript重要知识更新; javascript实现操作cookie实现的可记忆菜单; javascript下for循环用法小结; 一个快速添加标签的小玩意，但在FF下不能用，望高手指点; HTML中事件触发列表与解说; 极品源码：自动完成仿163篇; doctype后如何获得body.clientHeight的方法; 用javascript调出windows色版的代码; js实现的网页颜色代码表全集; javascript实现爱你在FF IE下都有效的添加一个项目; js实现用滚动条来放大缩小图片的代码; javascript实现unicode和字符的互相转换; 符合W3C网页标准的iframe标签的使用方法; firefox下javascript实现高亮关键词的方法; 用javascript实现读取txt文档的脚本

No. « ‹ 74 75 76 77 › »

技术文章搜索

关键字

Javascript 中的 javascript 表单日期选择效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 53 ::

收藏到网摘: n/a

javascript+css实现单击颜色褪去效果比较简单的javascript实现input双击后可以编辑

点击运行可以看到效果:

<html>
<head>
<title>Agenda</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
BODY { FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
}
A { FONT-SIZE: 9pt; TEXT-DECORATION: none; color: #000000
}
A:hover { TEXT-DECORATION: none; color: #000000
}
A:link { TEXT-DECORATION: none
}
A:visited { TEXT-DECORATION: none
}
BR { FONT-SIZE: 9pt; height: 15pt;
}
TD { FONT-SIZE: 9pt; LINE-HEIGHT: 11pt;
}
input { FONT-SIZE: 9pt; height: 15pt;
}
.SCROLLBAR { SCROLLBAR-FACE-COLOR: #718698; SCROLLBAR-HIGHLIGHT-COLOR: #899aa9; SCROLLBAR-SHADOW-COLOR: #506981; SCROLLBAR-3DLIGHT-COLOR: #5b7086; SCROLLBAR-ARROW-COLOR: #506981; SCROLLBAR-TRACK-COLOR: #5b7086; SCROLLBAR-DARKSHADOW-COLOR: #5b7086
}
</style>
<script language="JavaScript1.2">
</script>
</head>
<body onClick="HideDate()">
<p align=center>
<p align=center>
<input type=text id=selDate value="" style="width: 80px" readonly><input type=button value="q" style="FONT-SIZE: 7pt; FONT-FAMILY: Wingdings 3; width: 15pt" onClick="showCalendar()">
<div id="LayerDate" onClick="event.cancelBubble=true" style="position:absolute; width:300px; height:115px; z-index:1; visibility: hidden; BORDER: 1 solid black;">
<table width="300" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td width="40" align="center" bgcolor="#000000" nowrap> <input type="button" value="|" style="FONT-FAMILY: Wingdings 3;width: 20px" onClick="DateChange(false)"></td> <td width="100%" align="center" bgcolor="#000000" style="color: white;FONT-WEIGHT: bold; CURSOR: default" nowrap><span id="ShowYear" onClick="YearChange()"></span> 年 <span id="ShowMon" onClick="MonChange()"></span> 月</td> <td width="40" align="center" bgcolor="#000000" nowrap><input type="button" value="}" style="FONT-FAMILY: Wingdings 3;width: 20px" onClick="DateChange(true)"> </td> </tr> <tr> <td colspan="3" align="center"> <span id="Cal_Tab"></span> </td> </tr> <tr> <td height=30 colspan="3" valign="middle" style="cursor: default" onClick="Cal_Tab.innerHTML=Calendar(years,months-1);ShowYear.innerText=years;ShowMon.innerText=months"><image src=image/now.gif height=12> <b>今天： <script>document.write(years + "-" + months + "-" + days)</script> </b> </td> </tr>
</table>
</div>
<script language="JavaScript1.2"> ShowYear.innerText=years; ShowMon.innerText=months; Cal_Tab.innerHTML=Calendar(years,months-1); ShowPlan(years,(months-1),days);
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript+css实现单击颜色褪去效果比较简单的javascript实现input双击后可以编辑

Javascript 中的 javascript 表单日期选择效果

评论 (0) All