- 浏览: 76768 次
- 性别:
- 来自: 河北
-
最新评论
-
alovn：
firefox不能使用
js时间控件（年月日时分秒） -
woozyangel：
火狐下悲剧了
js时间控件（年月日时分秒） -
tiaccp：
看不太懂啊
生成7位随机数字的js -
heiwoshimaoya：
这个控件不知道应该用到什么地方！ 感觉没什么实用性！请指教！
...
js时间控件（年月日时分秒） -
davidyao：
测试成功，谢谢
js时间控件（年月日时分秒）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<base href=http://mozart0.uni.cc/cal/ >
<style>
.cal_0 table{
border:none;
font-family:tahoma;
font-size:9px;
text-align:center;
}
.cal_0 th{
height:17;
background-image:expression("url("+MyCal.color+"_h.gif)");
border-bottom:expression("1 solid "+MyCal.ca);
}
.cal_0{
background-image:url(shadow.gif);
width:168;
height:131;
cursor:default;
padding:3 4 5 3;
position:absolute;
}
.cal_1{
border:expression("1 solid "+MyCal.ca);
width:100%;
height:100%;
}
.d1{
position:absolute;
color:expression(MyCal.cb);
font-size:96px;
font-family:Arial black;
font-weight:bolder;
left:0;
top:-9;
width:160;
text-align:center;
overflow:hidden;
z-index:-1;
}
.d5{
position:absolute;
left:45;
top:108;
width:60;
height:13;
}
.d6{
position:absolute;
left:108;
top:108;
width:48;
height:13;
}
.cc{
border-color:expression(MyCal.ca);
border-width:1;
border-style:solid;
line-height:9px;
}
.sel{
position:absolute;
border-top:none;
top:121;
height:135;
overflow:hidden;
background-color:white;
overflow-y:auto;
display:none;
}
.selitem{
font-family:tahoma;
font-size:9px;
line-height:11px;
text-align:left;
}
.p1{
padding-left:19;
}
.p2{
padding-left:16;
}
.scroll{
scrollbar-3dlight-color:expression(MyCal.ca);
scrollbar-arrow-color:white;
scrollbar-face-color:white;
scrollbar-shadow-color:white;
scrollbar-track-color:white;
}
</style>
<script>
MyCal.color="green";
MyCal.ca="#99cc00";
MyCal.cb="#e5f5e5";
function MyCal(numYear,numMonth,numDate){
if(typeof(oMain)!='undefined'){
alert("one instance of MyCal per page only")
return null;
}
var arg=MyCal.arguments;
if(arg.length==3){
this.year=arg[0];
this.month=arg[1];
this.date=arg[2];
}
else{
var t=new Date();
this.year=t.getYear();
this.month=t.getMonth();
this.date=t.getDate();
}
this.green=["#99cc00","#e5f5e5"];
this.blue=["#00ccff","#e5eff5"];
this.yellow=["#ffcc00","#ffefef"];
this.gray=["#999999","#f0f0f0"];
this.DayName="Sun,Mon,Tue,Wed,Thu,Fri,Sat".split(",");
this.MonthDay=[[31,28,31,30,31,30,31,31,30,31,30,31],[31,29,31,30,31,30,31,31,30,31,30,31]];
this.MonthName="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec".split(",");
for(var i in this.MonthName)
this.MonthName[this.MonthName[i]]=i;
this.setColor=function(str){
if(typeof(this[str])=="undefined"){
alert("no such color:"+str);
return;
}
if(typeof(oYear)!="undefined"){
var t=document.all("imgArr");
for(var i=0;i<t.length;i++)
t[i].src=t[i].src.replace(MyCal.color,str);
}
MyCal.color=str;
MyCal.ca=this[str][0];
MyCal.cb=this[str][1];
}
this.chgYear=function(d){
var m=oYear.innerText;
this.year=parseInt(m)+d;
this.refresh();
}
this.chgMonth=function(d){
var i=parseInt(this.MonthName[oMonth.innerText])+d;
if(i==12)
i=0;
else if(i==-1)
i=11;
this.month=i;
this.refresh();
}
this.chgDate=function(ob){
if(ob==event.srcElement)
return;
var x=event.srcElement.innerText;
if(x==" ")
return;
oDate.cells[this.date+this.day+7].style.fontWeight="normal";
this.date=parseInt(x);
event.srcElement.style.fontWeight="bold";
}
this.setDate=function(ob){
var y0=this.year,m0=this.month;
if(ob==event.srcElement)
return;
var t=ob.id.replace("sel","").toLowerCase();
var x=event.srcElement.innerText;
this[t]=parseInt(t=="year"?x:this.MonthName[x]);
ob.style.display="none";
if(y0!=this.year||m0!=this.month)
this.refresh();
}
this.refresh=function(){
oMonth.innerText=this.MonthName[this.month];
oYear.innerText=this.year;
oBg.innerText=this.month+1;
oMain.filters[0].apply();
oMain.innerHTML=this.drawTable();
oDate.cells[this.date+this.day+7].style.fontWeight="bold";
oMain.filters[0].play();
}
this.outPut=function(){
var str='<div class="cal_0" id=oCal onselectstart="return false;">'+
' <div class=d1 id=oBg>'+(this.month+1)+'</div>'+
' <table class="cal_1" cellspacing=0 cellpadding=0>'+
' <tr>';
for(var i=0;i<7;i++)
str+='<th>'+this.DayName[i]+'</th>';
str+=
' </tr>'+
' <tr><td colspan=7 align=left id=oMain style="filter:blendtrans(duration=0.5)">'+
this.drawTable()+
' </td><tr>'+
' <td colspan=7> </td>'+
' </tr>'+
' </table>'+
' <div class="d5 cc">'+
' <table cellpadding=0 cellspacing=0><tr>'+
' <td><img id=imgArr src="'+MyCal.color+'_al0.gif" onclick="CalOb.chgYear(-1)"></td>'+
' <td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oYear>'+this.year+'</td>'+
' <td><img id=imgArr src="'+MyCal.color+'_ar0.gif" onclick="CalOb.chgYear(1)""></td>'+
' </tr></table>'+
' </div>'+
' <div class="d6 cc">'+
' <table cellpadding=0 cellspacing=0><tr>'+
' <td><img id=imgArr src="'+MyCal.color+'_al0.gif" onclick="CalOb.chgMonth(-1)"></td>'+
' <td width=44 class=cc style="border-width:0 1 0 1;cursor:hand" valign=bottom id=oMonth>'+this.MonthName[this.month]+'</td>'+
' <td><img id=imgArr src="'+MyCal.color+'_ar0.gif" onclick="CalOb.chgMonth(1)"></td>'+
' </tr></table>'+
' </div>'+
' <div class="sel cc scroll" id=selYear style="left:45;width:60" onclick="CalOb.setDate(this)">';
for(var i=2001;i<2050;i++)
str+='<div class="selitem p1">'+i+'</div>';
str+=
' </div>'+
' <div class="sel cc" id=selMonth style="left:108;width:48" onclick="CalOb.setDate(this)">';
for(var i=0;i<12;i++)
str+='<div class="selitem p2">'+this.MonthName[i]+'</div>';
str+=
' </div>'+
'</div>';
document.write(str);
CalOb=this;
oDate.cells[this.date+this.day+7].style.fontWeight="bold";
oDate.cells[this.date+this.day+7].style.fontSize="12px";
attchEvent();
}
this.drawTable=function(){
var day=new Date(this.year,this.month,1);
day=day.getDay();
this.day=day-1;
var m=this.year%4==0&&this.year%100||this.year%400==0?1:0;
m=this.MonthDay[m][this.month];
var r="<table style='table-layout:fixed' cellpadding=0 cellpacing=0 id=oDate onclick='CalOb.chgDate(this)'>";
r+="<tr height=3><td width=20></td><td width=23></td><td width=23></td>"+
"<td width=23></td><td width=20></td><td></td><td></td></tr>";
for(var i=0,k=0;i<6;i++){
r+="<tr>";
for(var j=0;j<7;j++){
var k=i*7+j+1;
var ts="<td> </td>"
if(k>day&&k<=m+day){
ts="<td";
if(j==0||j==6)
ts+=" style='color:red'";
ts+=">"+(k-day)+"</td>";
}
r+=ts;
}
r+="</tr>";
}
r+="</table>";
return r;
}
function attchEvent(){
oYear.onmouseover=function(){
selYear.style.display="block";
}
oYear.onmouseout=function(){
if(event.offsetY<10)
selYear.style.display="none";
}
oMonth.onmouseover=function(){
selMonth.style.display="block";
}
oMonth.onmouseout=function(){
if(event.offsetY<10)
selMonth.style.display="none";
}
selYear.onmouseout=selOut;
selYear.onmouseover=selOver;
selMonth.onmouseout=selOut;
selMonth.onmouseover=selOver;
var t=document.all.imgArr;
for(var i=0;i<t.length;i++){
t[i].onmousedown=imgDown;
t[i].onmouseup=imgUp;
}
}
function imgDown(){
this.src=this.src.replace(/.{5}$/,"1.gif");
}
function imgUp(){
this.src=this.src.replace(/.{5}$/,"0.gif");
}
function selOver(){
var ob=event.srcElement;
if(ob==this)
return;
ob.style.backgroundColor=MyCal.cb;
}
function selOut(){
var ob=event.srcElement;
if(ob==this)
this.style.display="none";
else
ob.style.backgroundColor="white";
}
}
</script>
<script>
var tt=new MyCal();
tt.setColor("blue");//
tt.outPut();
var colortable=["green","blue","yellow","gray"];
var cc=0;
document.body.onclick=function(){
if(event.srcElement.tagName!=="BODY")
return;
tt.setColor(colortable[cc++]);
if(cc==colortable.length)
cc=0;
}
document.body.title="单击页面空白以更换颜色"
</script>
<BODY>
</BODY>
</HTML>
发表评论
-
url编码与转码
2010-09-20 14:27 1437url编码与转码 因为有些符号在URL中是不能直接传递的 ... -
转 automation服务器不能创建对象的问题的解决方案总结大全
2010-06-10 17:32 2353我工作中的应用系统都是jsp的，大量javascript程序， ... -
js时间控件（年月日时分秒）
2009-09-01 10:03 10804这部分是时间控件的的js代码，NewTime.js ... -
生成7位随机数字的js
2009-08-25 18:19 1783<script>var str="qwe ... -
js 正则表达式验证邮箱事例
2009-08-25 18:17 1287if(email.value.length!=0) { ... -
js 很好的下拉菜单
2009-08-25 18:16 808<!DOCTYPE HTML PUBLIC " ... -
js 新闻切换技术，163、msn那种
2009-08-25 18:15 833<!DOCTYPE html PUBLIC " ... -
js 漂亮的仿flash菜单，来自蓝色经典
2009-08-25 18:13 993<style>/* 先把这个 xmenu 的样式放 ... -
js 一个非常不错的loading 效果.
2009-08-25 18:12 909<html><head><met ... -
js 超级强大的表单验证
2009-08-25 18:11 943<title>表单验证类 Validator v1 ... -
js 客户端静态页面玩分页
2009-08-25 18:08 996<!DOCTYPE HTML PUBLIC " ... -
js 经典的带阴影的可拖动的浮动层
2009-08-25 18:07 939<!DOCTYPE HTML PUBLIC " ... -
js div拖动层效果
2009-08-25 18:05 1451<html><head><tit ... -
js 类似与QQ的好友/黑名单之类的树型菜单
2009-08-25 18:04 719<!DOCTYPE HTML PUBLIC " ... -
js 省市县三级联动菜单
2009-08-25 18:01 3489<!DOCTYPE HTML PUBLIC " ... -
js 自动添加任意数量的表单内容
2009-08-25 17:58 970<html><script language ... -
js计算文本框里的字符个数
2009-08-25 17:53 2205<SCRIPT language=JavaScript& ... -
在光标位置插入字符实例
2009-08-13 09:06 13471 指定某文本部分进行操作（添加，删除，替换） <! ... -
javascript倒计时
2009-08-10 15:11 1914第一种：精确到秒的javascript倒计时代码 ...
相关推荐
JavaScript日历是一个常见的网页交互元素，它为用户提供了一个方便的方式来选择日期，常见于表单填写、事件安排等场景。在Web开发中，JavaScript日历组件的实现主要依赖于JavaScript语言和CSS来完成页面布局和样式...
在这个主题中，我们主要关注的是“js日历 12种js日历”，这显然是一份包含了多种不同实现方式的JavaScript日历组件集合。 1. **日历组件的基本概念** 日历组件是网页中常见的交互元素，它允许用户选择日期，通常...
本文将详细介绍三款JavaScript日历插件，它们各具特色，能够为你的网页增添别致的用户体验。 第一款日历插件可能是“32008731155337.rar”中的内容。虽然具体名称未知，但我们可以假设它是一款简洁且功能丰富的日历...
【标题】"js日历控件自主选择颜色" 涉及的核心技术是JavaScript日历插件的开发，尤其强调用户可以根据个人喜好自定义颜色。这样的控件在网页设计中非常常见，主要用于处理与日期相关的交互，如日期选择、预约系统、...
JavaScript日历控件是网页开发中的重要组成部分，尤其在...这个“js日历控件大全”资源包是开发者学习和实践JavaScript日历控件的宝贵素材，通过研究和实践，你可以掌握不同日历控件的实现原理，提升网页交互设计能力。
JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛用于网页和网络应用开发，尤其是在客户端脚本处理上。JS日历控件是前端开发中常见的一种组件，主要用于显示日期选择器，用户可以通过它方便地选取日期。本文...
总结来说，这个压缩包提供了一个完整的JavaScript日历记事器，包括了前端展示所需的HTML、CSS和JS文件，以及必要的图片资源和用户指南。通过解压并运行index.htm，用户可以在本地浏览器中查看和测试这个日历组件的...
- **FullCalendar**: 这是一个全功能的JavaScript日历组件，支持显示日程、周视图和月视图，可以与其他数据源（如Google Calendar或JSON）集成，适合构建复杂的日历应用。 - **Pickadate.js**: 这是一个轻量级且...
总的来说，"史上最强js日历控件"可能是一个集成了各种高级特性和自定义选项的JavaScript日历组件，它可以帮助开发者快速地在网页应用中实现强大的日期选择功能。通过深入研究和理解提供的压缩包内容，开发者可以有效...
JavaScript日历组件是Web开发中常见的一种交互元素，主要用于用户在网页上进行日期选择操作。在前端开发领域，尤其在构建交互式用户界面时，一个功能强大的日历组件显得尤为重要。"My97DatePicker"是一个知名的...
这里我们将深入探讨如何优化JavaScript日历控件，特别是那些包含时分秒选择，以及支持年月日显示的组件。 1. **性能优化**：在创建日历控件时，减少DOM操作是关键。利用虚拟DOM或仅在必要时更新DOM可以显著提升性能...
JavaScript日历计算工具是一种在网页应用中常用的组件，主要用于处理日期和时间的计算与展示，尤其是在需要显示农历或者进行日期转换的场景下。这个工具能够帮助开发者轻松地获取每一天对应的农历日期，以及其他相关...
JavaScript日历控件是网页应用中常见的一种交互元素，它允许用户方便地选择日期，常用于事件安排、预订系统或表单输入等场景。在这个英文版的JS日历控件中，开发者为英文操作系统的用户提供了友好的界面和功能。 ...
My97 DatePicker 是一个非常流行的JavaScript日历插件，它功能强大，自定义选项丰富，支持多种语言，并且在各种浏览器上都有良好的兼容性。本文将详细介绍My97 DatePicker 的使用方法及其核心特性。 首先，我们来看...
总结，使用JavaScript日历文件在.NET中实现日期选择功能，主要涉及前端JavaScript库的引入、HTML元素的设置、JavaScript代码的编写以及与服务器端的通信。理解这些基本概念和操作，能帮助你有效地集成和使用JS日历...
JavaScript日历控件是一种常用的前端开发工具，它允许用户在网页上方便地选择日期，常用于表单输入、事件预订、时间安排等场景。在这个"js日历控件实例源码"中，我们有两个关键文件：`demo.html`和`setday.js`。 ...
7. **兼容性**：考虑到浏览器的多样性，编写JavaScript日历控件时需要关注跨浏览器的兼容性问题，确保在不同的浏览器（如Chrome、Firefox、Safari、Edge和IE）上都能正常工作。 在提供的文件名中，"calendar.html"...
3. **JavaScript日历实现** - **HTML**：创建基本的日历结构，如表格元素（`<table>`）、行元素（`<tr>`）和单元格元素（`<td>`）。 - **CSS**：定义日历的样式，包括背景色、字体、边框等，使其视觉效果更佳。 -...
总的来说，JavaScript日历控件是一个涉及HTML、CSS和JavaScript综合运用的实践领域。通过选择合适的库、理解和定制样式，以及关注无障碍性，我们可以创建出既美观又实用的日历组件，提升用户的交互体验。
JavaScript日历控件是网页开发中常见的一种交互元素，它为用户提供了一个直观的方式来选择日期，常用于表单填充、事件安排或时间管理等场景。在本主题中，我们讨论的是一款简单实用的JavaScript日历控件，其特点在于...