JS DOM 的問題,請教,急~~~~

今天改寫了個設置時間的小控件,可是在IE中卻顯示不了,請看看!~~

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.time_frame {
border-left: 2px inset #D4D0C8;
border-top: 2px inset #D4D0C8;
border-right: 2px inset #FFFFFF;
border-bottom: 2px inset #FFFFFF;
width: 100px;
height: 25px;
background-color: #FFFFFF;
overflow: hidden;
text-align: right;
font-family: "Tahoma";
font-size: 12px;
}
.time_control {
width: 16px;
height: 14px;
font-family: "Webdings";
font-size: 7px;
line-height: 2px;
padding-left: 2px;
cursor: default;
}
.cell_input {
width: 18px;
height: 18px;
border: 0px solid black;
font-family: "Tahoma";
font-size: 12px;
text-align: right;
}
</style>

<script language="javascript">

/**
*
* TimeSetter.js - implements an component for time show and set.<b>
* You can configure and customize it's surface.<b>
* Created on August 27, 2007.<b>
*
* Giles .@author
* 1.0 .@version
*
*/

function TimeSetter(id, hName, mName, sName, h, m, s)
{
this.name = name;
this.timeHolder = document.getElementById(id);
this.hName = hName || "hour";
this.mName = mName || "minute";
this.sName = sName || "second";
this.hour = h || 0;
this.minute = m || 0;
this.second = s || 0;

this.selectObj = null;
this.hourObj = null;
this.minuteObj = null;
this.secondObj = null;
this.upControl = null;
this.downControl = null;
this.timer = null;

this.frameClass = "time_frame";
this.cellClass = "cell_input";
this.controlClass = "time_control";
var that = this;

this.init = function()
{
this.build();
}
this.play = function()
{
this.timer = setInterval("playback()", 1000);
}
playback = function()
{
that.playback();
}
//realtime showing the time
this.playback = function()
{
var objDate = new Date();
if(this.hour != 0 || this.minute != 0 || this.second != 0)
{
objDate.setHours(this.hour);
objDate.setMinutes(this.minute);
objDate.setSeconds(this.second);
this.hour = objDate.getHours();
this.minute = objDate.getMinutes();
this.second = objDate.getSeconds();
}
this.hourObj.value = this.formatTime(objDate.getHours());
this.minuteObj.value = this.formatTime(objDate.getMinutes());
this.secondObj.value = this.formatTime(objDate.getSeconds());
}
//eidt the time
this.prevent = function(obj)
{
//alert("prevant..." + obj.value);
clearInterval(this.timer);
this.setSelectCell(obj);
var value = parseInt(obj.value, 10);
var radix = parseInt(obj.radix, 10) - 1;
if (obj.value > radix || obj.value < 0)
{
obj.value = obj.value.substr(0, 1);
}
}
//build timeSetter face
this.build = function()
{
//alert("building...");
var table = this.createTable(0, 0, 0);
this.timeHolder.appendChild(table);

var tr = document.createElement("tr");
table.appendChild(tr);
var td = document.createElement("td");
tr.appendChild(td);
var frame = this.createFrame();
td.appendChild(frame);

td = document.createElement("td");
tr.appendChild(td);
var control = this.createControl();
td.appendChild(control);

var testNode = document.createElement("div");
//testNode.appendChild(document.createTextNode(table.outerHTML));
//testNode.appendChild(frame);
//testNode.appendChild(control);
//this.timeHolder.appendChild(frame);
//this.timeHolder.appendChild(control);
//testNode.appendChild(table);
//add to document.
//document.getElementById(this.id).appendChild(table);
//document.getElementById(this.id).appendChild(testNode);
//this.timeHolder.outerHTML = table.outerHTML;
this.timeHolder.style.display = "block";

//alert(this.timeHolder.innerHTML);
}

this.createTable = function(border, cellspacing, cellpadding)
{
var table = document.createElement("table");
table.setAttribute("border", border);
table.setAttribute("cellspacing", cellspacing);
table.setAttribute("cellpadding", cellpadding);
return table;
}
this.createFrame = function()
{
//alert("createFrame...");
var div = document.createElement("div");
div.setAttribute("class", this.frameClass);
div.appendChild(this.hourObj = this.createCell(this.hName, this.hour, 24));
div.appendChild(document.createTextNode(":"));
div.appendChild(this.minuteObj = this.createCell(this.mName, this.minute, 60));
div.appendChild(document.createTextNode(":"));
div.appendChild(this.secondObj = this.createCell(this.sName, this.second, 60));
return div;
}
//create each time cell
this.createCell = function(id, value, radix)
{
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", id);
input.setAttribute("class", this.cellClass);
input.setAttribute("maxlength", 2);
input.setAttribute("name", id);
input.setAttribute("radix", radix);
input.setAttribute("style", "ime-mode:disabled");
input.setAttribute("value", this.formatTime(value));

input.onfocus = function()
{
that.setSelectCell(this);
}
input.onblur = function()
{
that.setTime(this);
}
input.onkeyup = function()
{
that.prevent(this);
}
input.onkeypress = function(event)
{
if(!/[0-9]/.test(String.fromCharCode(event.keyCode))) event.keyCode = 0;
}
input.onpaste = function()
{
return false;
}
input.ondragenter = function()
{
return false;
}
return input;
}
this.createControl = function()
{
var table = this.createTable(0, 1, 0);
var tr = document.createElement("tr");
var td = document.createElement("td");
tr.appendChild(td);
table.appendChild(tr);
td.appendChild(this.upControl = this.createControlButton("upControl", 5));

tr = document.createElement("tr");
td = document.createElement("td");
tr.appendChild(td);
table.appendChild(tr);
td.appendChild(this.downControl = this.createControlButton("downControl", 6));
return table;
}
//create control button
this.createControlButton = function(id, value)
{
var input = document.createElement("input");
input.setAttribute("type", "button");
input.setAttribute("id", id);
input.setAttribute("value", value);
input.setAttribute("class", this.controlClass);
input.onfocus = function()
{
this.blur();
}
input.onmouseup = function(event)
{
that.controlTime(event);
}
return input;
}
//get format time for a number.
this.formatTime = function(sTime)
{
sTime = ("0"+sTime);
return sTime.substr(sTime.length-2);
}
//control each time cell, add or decrease.
this.controlTime = function(event)
{
//alert("controlTime...");
event.cancelBubble = true;
if (!this.selectObj) return;
clearInterval(this.timer);

var cmd = (event.srcElement == this.upControl);
var i = parseInt(this.selectObj.value, 10);
var radix = parseInt(this.selectObj.radix, 10) - 1;
if (i == radix && cmd) {i = 0;}
else if (i == 0 && !cmd) {i = radix;}
else { cmd ? i++ : i--;}
this.selectObj.value = this.formatTime(i);
this.selectObj.select();

}
//set format time for a cellObj
this.setTime = function(obj)
{
//alert("setTime..." + obj.value);
obj.value = this.formatTime(obj.value);
}
//get the obj onfocus.
this.setSelectCell = function(obj)
{
//alert("setSelectCell..." + obj.nodeName);
this.selectObj = obj;
}
this.getTime = function()
{
//alert("getTime...");
var arrTime = new Array(3);
arrTime[0] = this.hourObj.value;
arrTime[1] = this.minuteObj.value;
arrTime[2] = this.secondObj.value;
return arrTime.join(":");
}
}

</script>

</HEAD>

<BODY>

<div id="timeSetter"></div>

<script for="window" event="onload" type="text/javascript" language="JavaScript">
<!--
var timeSetter = new TimeSetter("timeSetter", "hour", "minute", "second");
timeSetter.init();
timeSetter.play();
//alert(timeSetter.getTime());
-->
</script>
</BODY>
</HTML>
[/code]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章