关于TimePicker的问题

[隔壁King2]

本人想通过挑动表上的指针改变她显示的时间，分钟和秒钟我用的同一张图片，下面的我写的代码：

		

		this.holder.setStyles({'width':this.options.clockSize.width, 'height':this.options.clockSize.height});



		

		var img = new Element("img", {'src':this.options.imagesPath+"/"+this.options.faceImage,

										'styles':{'position':'absolute',

						'z-index':21000}});

		this.holder.adopt(img);

		

		if (!this.options.visible){

			if ((window.ie) && (!window.ie7)){

				var iframe = new Element("iframe", {'src':'about:Blank',

											'styles':{'width':this.options.clockSize.width,

												'position':'absolute',

												'z-index':20000,

												'height':this.options.clockSize.height},

											'frameborder':0

										});

				this.holder.adopt(iframe);					

			}



			this.holder.setStyles({

				'position':'absolute',

				'z-index':25000,

				'opacity':0

			});

			

			if ($defined(this.toggler)){

				this.toggler.addEvent("click", function(e){

					var e = new Event(e);

					if (this.holder.getStyle('opacity') == 0) this.openTimePicker();

					else this.closeTimePicker();

					e.stop();

				}.bind(this));

			}

			

			var cls = new Element("img", {'src':this.options.imagesPath+"/"+this.options.closeImage,

											'styles':{'position':'absolute',

														'z-index':26000,

														'right':0,

														'cursor':'pointer'}});

			

			this.holder.adopt(cls);

			

			cls.addEvent("click", function(){

				this.closeTimePicker();

			}.bind(this));

			

		}

		

		this.minuteHand = new Element("div", {styles:{'marginTop':((this.options.clockSize.height - this.options.minuteHandSize.height)/2).toInt(),

													'marginLeft':((this.options.clockSize.width - this.options.minuteHandSize.width)/2).toInt(),

													'width':this.options.minuteHandSize.width,

													'height':this.options.minuteHandSize.height,

													'position':'absolute',

													'z-index':22000,

													'background':'url('+this.options.imagesPath+"/"+this.options.minuteHandImage+') no-repeat top left'}});

													

		this.holder.adopt(this.minuteHand);

		

		this.secondHand = new Element("div", {styles:{'marginTop':((this.options.clockSize.height - this.options.secondHandSize.height)/2).toInt(),

													'marginLeft':((this.options.clockSize.width - this.options.secondHandSize.width)/2).toInt(),

													'width':this.options.secondHandSize.width,

													'height':this.options.secondHandSize.height,

													'position':'absolute',

													'z-index':21999,

													'background':'url('+this.options.imagesPath+"/"+this.options.secondHandImage+') no-repeat top left'}});

													

		this.holder.adopt(this.secondHand);//根据秒针的位置定位时间
		

		this.hourHand = new Element("div", {styles:{'marginTop':((this.options.clockSize.height - this.options.hourHandSize.height)/2).toInt(),

													'marginLeft':((this.options.clockSize.width - this.options.hourHandSize.width)/2).toInt(),

													'width':this.options.hourHandSize.width,

													'height':this.options.hourHandSize.height,

													'position':'absolute',

													'z-index':23000,

													'background':'url('+this.options.imagesPath+"/"+this.options.hourHandImage+') no-repeat top left'}});

													

		this.holder.adopt(this.hourHand);

		

		var c_img = new Element("img", {'src':this.options.imagesPath+"/"+this.options.centerImage,

										'styles':{'position':'absolute',

													'z-index':24000,

													'marginTop':((this.options.clockSize.height - this.options.centerSize.height)/2).toInt(),

													'marginLeft':((this.options.clockSize.width - this.options.centerSize.width)/2).toInt()}});

		this.holder.adopt(c_img);

		

		

		this.ampm = new Element ("a", {'styles':this.options.ampmStyles,

										'href':'#'});

		this.updateAmPm();

		this.ampm.setStyles({'position':'absolute',

								'z-index':25000,

								'display':'block',

								'marginTop':((this.options.clockSize.height + (this.options.clockSize.height/4))/2).toInt(),

								'marginLeft':((this.options.clockSize.width-20)/2).toInt()});

								

		this.holder.adopt(this.ampm);

		

		

		this.ampm.addEvent("click", function(e){

			var e = new Event(e);

			e.stop();

			this.time.hour = ((this.time.hour + 12) %24);

			this.updateAmPm();

			this.updateField();	

			this.fireEvent("onChange");

		}.bind(this));

		

		

		this.moveHands();

		

		this.holder.addEvent("mousedown", function(e){

			var e = new Event(e);

			var coord = this.holder.getCoordinates();

			

			var ang = this.clickAngle({x:e.client.x, y:e.client.y}, coord);

			var h_ang = (this.time.hour%12) * 30;

			var m_ang = this.time.minute * 6;

			var s_ang = this.time.second * 6;

						

			this.moveEl['move'] = true;

			this.moveEl['coord'] = coord;

			
/*
			if (Math.abs(ang - m_ang) < Math.abs(ang - h_ang))
				if(e.target.getStyle("backgroundImage").indexOf(this.options.minuteHandImage) !=-1)						

					this.moveEl['el'] = "minute";
				else
					this.moveEl['el'] = "second";

			else if(Math.abs(ang - m_ang) > Math.abs(ang - h_ang))

				this.moveEl['el'] = "hour";				
			*/
			
			if(Math.abs(ang - m_ang) > Math.abs(ang - h_ang))

				this.moveEl['el'] = "hour";
				
			else if (Math.abs(ang - m_ang) < Math.abs(ang - h_ang))
				
				if(e.target.getStyle("backgroundImage").indexOf(this.options.minuteHandImage) !=-1)						

					this.moveEl['el'] = "minute";
				else
					this.moveEl['el'] = "second";	
			
			else {

				if (e.target.getStyle("backgroundImage").indexOf(this.options.hourHandImage) != -1)

					this.moveEl['el'] = "hour";

				else if(e.target.getStyle("backgroundImage").indexOf(this.options.minuteHandImage) !=-1)

					this.moveEl['el'] = "minute";
					
				else
					this.moveEl['el'] = "second";

			}

			

		}.bind(this));

		

		this.holder.addEvent("mouseup", function(){

			this.moveEl = {};

			this.moveEl['move'] = false;

		}.bind(this));		

		

		this.holder.addEvent("mousemove", function(e){

			if (this.moveEl['move']){

				var e = new Event(e);

				var add;

				

				var ang = this.clickAngle({x:e.client.x, y:e.client.y}, this.moveEl.coord);

				if (this.moveEl.el == "hour") var ang_by = 30;

				else var ang_by = 6;

			

				if (this.moveEl.el == "hour"){

					var h = (ang/ang_by).toInt();

					if (!isNaN(h))

						this.time.hour = h;

					

					if (this.ampm.innerHTML == this.options.lang.pm)

						this.time.hour = (this.time.hour+12)%24;

				}

				else{

					var m = (ang/ang_by).toInt();

					if (!isNaN(m))

						this.time.minute = m;

				}

											

				this.moveHands();

				this.updateField();

				

				this.fireEvent("onChange");

			}

			

		}.bind(this));

		

		_all_page_timepickers.push(this);

	},

	

	updateAmPm: function() {

		if (this.time.hour < 12) this.ampm.setHTML(this.options.lang.am);

		else this.ampm.setHTML(this.options.lang.pm);

	},

	

	moveHands: function(){

		try {

			this.hourHand.setStyle("backgroundPosition", (((this.time.hour % 12) *  this.options.hourHandSize.width) * -1));

			this.minuteHand.setStyle("backgroundPosition", ((this.time.minute * this.options.minuteHandSize.width) * -1));

			this.secondHand.setStyle("backgroundPosition", ((this.time.second * this.options.secondHandSize.width) * -1));

		}

		catch(e){}

	},

	

	clickAngle: function(pnt, coord){

		var c_x = coord.width/2;

		var c_y = coord.height/2;

		

		var x = pnt.x + window.getScrollLeft() - coord.left;

		var y = pnt.y + window.getScrollTop() - coord.top;

		

		var t_x = c_x;

		var t_y = y;

		

		var CA = t_x - x;

		var CO = t_y - c_y;

		var AO = Math.sqrt(Math.pow(CA, 2) + Math.pow(CO, 2));

		

		var ang = Math.round((Math.acos((Math.pow(Math.abs(CA), 2) - Math.pow(Math.abs(AO), 2) - Math.pow(CO, 2))/(2 * CO * AO))) * 180/Math.PI);

		

		if (x < c_x) ang = 360 - ang;

		

		return ang;

	},

我的秒针就是动不了，请高手指教。

[passself]

楼主这是完整的代码不？咋运行不了那？

[隔壁King2]

[Quote=引用 1 楼 lieri111 的回复:]
楼主这是完整的代码不？咋运行不了那？
[/Quote]

不是 完整的代码 很长发表不了

[asharpnet]

代码好长啊

[lingxizhixia]

这有一个完全用JS事先的 日期控件 DatePicker
/*
* My97 日期控件 My97 DatePicker Ver 2.1 Build:20070122
* Blog: http://blog.csdn.net/my97/
* Mail: [e-mail]
*/
/* 设置 */
var dpcfg = {};
/* 默认风格 如果你喜欢whyGreen这个样式,你可以改成whyGreen 另外你还可以自定义自己的样式 */
dpcfg.skin = "default";
/* 日期格式 %Y %M %D %h %m %s 表示年月日时分秒(注意大小写) */
dpcfg.dateFmt = "%Y%M%D";
/* 是否显示时间 */
dpcfg.showTime = false;
/* 是否高亮显示 周六 周日 */
dpcfg.highLineWeekDay = true;
/* 日期范围 */
dpcfg.minDate = "1900-1-1";
dpcfg.maxDate = "2099-12-30";
/* 纠错模式设置 可设置3中模式 0 - 提示 1 - 自动纠错 2 - 标记 */
dpcfg.errDealMode = 2;
/* 纠错提示信息,仅当提示提示模式为0时有效 */
dpcfg.errAlertMsg = "不合法的日期格式或者日期超出限定范围,需要撤销吗?";
/* 语言设置 */
dpcfg.aWeekStr = ["日","一","二","三","四","五","六"];
dpcfg.aMonStr = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一","十二"];
dpcfg.todayStr = "今天";
dpcfg.okStr = "确定";
dpcfg.timeStr = "时间";
dpcfg.monthStr = "月份";
dpcfg.yearStr = "年份";

var $d=null;
function __sb()
{
this.s=new Array();
this.i=0;
this.a=function(t){this.s[this.i++]=t;};
this.j=function(){return this.s.join('');};
}
function WdatePicker(el,dateFmt,showTime,skin)
{
this.win=window;
this.top=window;
while(this.top.parent.document!=this.top.document&&this.top.parent.document.getElementsByTagName("frameset").length==0)
{
this.top=this.top.parent;
}
this.q=new Date();
this.aa=this.q.getFullYear();
this.p=this.q.getMonth()+1;
this.z=this.q.getDate();
this.be=this.q.getHours();
this.as=this.q.getMinutes();
this.bj=this.q.getSeconds();
this.eCont=(typeof el=='string')?document.getElementById(el):el;
this.dateFmt=(dateFmt==null)?dpcfg.dateFmt:dateFmt;
this.showTime=(showTime!=dpcfg.showTime)?showTime:dpcfg.showTime;
this.skin=(skin==null)?dpcfg.skin:skin;
var c=this.eCont.getAttribute("MINDATE");
if(c==null)
{
c=dpcfg.minDate;
}
if(c.substring(0,1)=='$')
{
c=document.getElementById(c.substring(1));
if(c)
{
if(c.getAttribute("REALVALUE")==null||c.getAttribute("REALVALUE")=="")
{
c=c.value;
}
else
{
c=c.getAttribute("REALVALUE");
}
}
else
{
c=null;
}
if(c==null||c=='')
{
c=dpcfg.minDate;
}
}
c=c.replace(/#Today/,this.aa+'/'+this.p+'/'+this.z);
this.minDate=this.aw(c);
c=this.eCont.getAttribute("MAXDATE");
if(c==undefined)
{
c=dpcfg.maxDate;
}
if(c.substring(0,1)=='$')
{
c=document.getElementById(c.substring(1));
if(c)
{
if(c.getAttribute("REALVALUE")==null||c.getAttribute("REALVALUE")=="")
{
c=c.value;
}
else
{
c=c.getAttribute("REALVALUE");
}
}
else
{
c=null;
}
if(c==null||c=='')
{
c=dpcfg.maxDate;
}
}
c=c.replace(/#Today/,this.aa+'/'+this.p+'/'+this.z);
this.maxDate=this.aw(c);
if(this.top.document.dateDiv&&this.top.document.dateDiv.obj.eCont==this.eCont)
{
$d=this.top.document.dateDiv;
}
else
{
this.top.document.dateDiv=null;
}
this.cssPath='default/datepicker.css';
this.highLineWeekDay=dpcfg.highLineWeekDay;
this.aWeekStr=dpcfg.aWeekStr;
this.aMonStr=dpcfg.aMonStr;
this.todayStr=dpcfg.todayStr;
this.okStr=dpcfg.okStr;
this.timeStr=dpcfg.timeStr;this.bo();
this.bc(this.eCont.value,this.dateFmt);
if(this.eCont.value!=''&&this.eCont.getAttribute("REALVALUE")==null&&this.l(this.eCont.value))
{
this.am();
}
);