帮助DOM中的重复 [英] help with recusion in DOM

查看：42 发布时间：2019/6/4 22:56:27 php

本文介绍了帮助DOM中的重复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道这不是一个php问题。如果这困扰你，不要回应。如果

没有，我肯定可以使用这些建议...

我正在使用一组非常简短的代码来显示日历。我们的想法是，当bom失去焦点时，只需隐藏日历即可。我在

一个span标签中显示日历。当那段距离失去焦点时，我会通过它的孩子来解决问题。如果孩子失去了焦点
焦点，那么我想保持日历可见。我是
使用element.all来确定给定节点的子节点。问题是

用导航箭头或

下拉菜单改变月份，或通过下拉菜单更改年份，菜单

消失......显然导航链接和选择的选项是

不被视为显示日历的主跨标记的后代。

（抱歉文字包装...和任何想法的tia）

这里是使用日历的html片段：

=====================

< input class =" value"

name =" programExitDate"

maxlength =" 255"

style =" text-align：left;宽度：150px;

type =" text"

autocomplete =" off"

value ="<？= $ programExitDate？>"

onblur =" formatDate（this）;"

I know this is not a php question. If that bothers you, don''t respond. If
not, I sure could use the advice...

I''m using a very abbreviated set of code to show a calendar. The idea is to
simply hide the calendar when it loses focus. I''m displaying the calendar in
a span tag. When that span loses focus, I recurse through its children. If
focus was lost to a child, then I want to keep the calendar visible. I''m
using the element.all to determine children of a given node. The problem is
that changing the months either with the navigation arrows or via the
drop-down, or by changing the year via its drop-down, the menu
disappears...apparently the navigation links and the select''s options are
not seen as a descendant of the primary span tag displaying the calendar.

(Sorry for the text-wrapping...and tia for any thoughts)

Here''s a snippet of the html using the calendar:

=====================

<input class="value"
name="programExitDate"
maxlength="255"
style="text-align:left; width:150px;"
type="text"
autocomplete="off"
value="<?= $programExitDate ?>"
onblur="formatDate(this);"

>

< img

src ="<？= site :: $ imagesDirectory？> calendar.gif"

style =" cursor：pointer;"

title =" Click For Calendar"

onclick =" getDate（''programExitCalendar'' ，''programExitDate''）;"

<img
src="<?= site::$imagesDirectory ?>calendar.gif"
style="cursor:pointer;"
title="Click For Calendar"
onclick="getDate(''programExitCalendar'', ''programExitDate'');"

>

< span id =" programExitCalendar" style =" display：none;

postition：relative;">< / span>

============= ========

这里是被调用的javascript：

========= ============

String.prototype.repeat = function（l）{var s =''''，i = 0;而（i ++<

l）{s + = this; } return s; }

String.prototype.zf = function（l）{return''0''。repeat（l -

this.length）+ this; }

Date.prototype.format = function（f）

{

if（！this.valueOf（））{return this.toString （）; }

var date = this;

var days = new Array（

''Sunday''，

''星期一''，

''星期二''，

''星期三''，

''星期四''，

''星期五''，

''星期六''

）;

var months = new Array（

''一月''，

''二月''，

''三月''，

' '四月'，

''May''，

''六月''，

''七月''，
''八月''，

''九月''，

''十月''，

''十一月''，

''十二月''

）;

返回f.replace（

/（yyyy） | mmmm | mmm | mm | dddd | ddd | dd | hh | nn | ss | a \ / p）/ gi，

函数（$ 1）

{

开关（$ 1.toLowerCase（））

{

case''yy yy''：return date.getFullYear（）;

case''mmmm''：return months [date.getMonth（）];

case''mmm'' ：return

months [date.getMonth（）]。substr（0,3）;

case''mm''：返回new String（date.getMonth（） +

1）.zf（2）;

case''dddd''：返回天数[date.getDay（）];

case''ddd''：return days [date.getDay（）]。substr（0，

3）;

case''dd''：return new

String（date.getDate（））。zf（2）;

case''hh''：return new String（（h = date.getHours（）

％12）？ h：12）.zf（2）;

case''nn''：return new

String（date.getMinutes（））。zf（2）;

case''sss''：return new

String（date.getSeconds（））。zf（2）;

case''a / p''：return date.getHours（）< 12？ ''AM''：

''PM'';

}

}

）;

}

函数formatDate（输入）

{

if（！input）{return false; }

if（！input.value）{return false; }

if（input.value ==''''）{return false; }

var val = new String（input.value）;

var month = new String（''01''）;

var day = new String（''01''）;

var year = new String（''2000''）;

val = val.replace（/ ^（ \d {1,2}）[^ \d] +（\d {1,2}）[^ \d] +（\d {4}）$ /，

" $ 1 / $ 2 / $ 3"）;

if（！isDate（val））

{

val =输入。值;

val = val.replace（/ ^（\d {4}）[^ \d] +（\d {1,2}）[^ \d] + （\d {1,2}）$ /，

" $ 2 / $ 3 / $ 1"）;

}

if （！isDate（val））

{

input.value ='''';

返回false;

}

month =" 0" + val.replace（/ ^（\d {1,2}）[^ \d] +（\d {1,2}）[^ \d] +（\d {4}）$ /，

" $ 1"）;

day =" 0" + val.replace（/ ^（\d {1,2}）[^ \d] +（\d {1,2}）[^ \d] +（\d {4}）$ /，

" $ 2"）;

year = val.replace（/ ^（\d {1,2}）[^ \d] + （\d {1,2}）[^ \d] +（\d {4}）$ /，

" $ 3"）;

val = month.substr（month.length - 2,2）+/ +

day.substr（day.length - 2,2）+/ +年;

input.value = val;

返回true;

}

函数getDate（父级，目标）

{

parent = document.getElementById（parent）;

target = document.getElementById（target）;

if（！parent）{return false; }

if（！target）{return false; }

var currentDate = isDate（target.value）？ new Date（target.value）：new

Date（）;

target.value = isDate（target.value）？ target.value：'''';

parent.onblur = function（）

{

if（isChild（parent，

document.activeElement））{return; }

parent.style.display =''none'';

parent.innerHTML ='''';

};

showCalendar（parent.id，target.name，currentDate.getFullYear（），

currentDate.getMonth（））;

返回false;

}

函数isChild（父元素，元素）

{

if（element == parent） {return true; }

var children = parent.all;

for（var child child in children）

{

var node = children [child];

if（element == node）{return true; }

if（node.all）

{

if（isChild（node，element））{return true; }

}

}

返回false;

}

函数showCalendar（ showIn，returnTo，year，month，day）

{

showIn = document.getElementById（showIn）;

returnTo = document.getElementById（ returnTo）;

if（！showIn）{return false; }

if（！returnTo）{return false; }

showIn.style.position =''absolute'';

showIn.style.display ='''';

if（一天）

{

showIn.onblur = null;

showIn.style.display =''none'';

showIn.innerHTML ='''';

var date = new Date（（month + 1）+''/''+ day +''/''+ year）;

returnTo.value = date.format（''mm / dd / yyyy''）;

returnTo.focus（）;

returnTo。 select（）;

返回false;

}

if（showIn.innerHTML）

{

showIn.innerHTML ='''';

返回;

}

var link = null;

var months = new Array（

''1月''，

''2月''，

''March' '，

''四月''，

''五月''，

''六月''，

''七月''，

''八月''，

''九月''，

''十月''，

''十一月''，

''十二月''

）;

var thisDate = new Date（）;

年=年< 2000年？ 2000：年;

年= 2037年？ 2037年：年;

thisDate.setYear（年）;

thisDate.setMonth（月）;

thisDate.setDate（1）;

var days = 32 - 新日期（年，月，32）.getDate（）;

var nextDate = new日期（年，月，日+ 1）;

var lastDate = new日期（年，月，0）;

lastDate.setDate（1）;

var today = new Date（） ;

var todayDay = today.getDate（）;

var todayMonth = today.getMonth（）;

var todayYear = today.getFullYear（）;

var html ='''';

html + =''< table style =" border：1px solid steelblue;保证金：2px;

填充：2px; width：225px;"> \ n'';

html + =''< tr> \ n'';

html + ='' < td style =" background-color：＃FF9900; font-family：arial;

font-size：7.25pt;填充右：5像素; padding-top：2px;

text-align：right;"> \ n'';

html + =''< a\\\
' ';

html + =''href ="" \ n'';

html + =''onclick =" showCalendar（\''' ''+ showIn.id +''\''，\''''+

returnTo.name +''\''，''+ lastDate.getFullYear（）+' '，''+ lastDate.getMonth（）

+''）" \ n'';

html + =''title ="上个月" \ n'';

html + =''>< img src =" /images/arrow.left.gif"

style =" border ：none;">< / a> \ n'';

html + =''< / td> \ n'';

html + =''< td colspan =" 5" style =" background-color：＃FF9900;

padding-top：2px; text-align：center;"> \ n'';

html + =''< select \ n'';

html + =' 'style =" font-family：arial; font-size：7.25pt;

text-align：center; width：85px;" \ n'';

html + =''onchange =" showCalendar（\''''+ showIn.id +''\''，\\ \\''''+

returnTo.name +''\''，''+ thisDate.getFullYear（）+''，this.value）" \ n'';

html + =''> \ n'';

for（月份）

{

var selected = month == thisDate.getMonth（）？ ''选中''：''\ n'';

html + =''< option value ="''+ month +''" ''+ select +''>''+

个月[月] +''< / option> \ n'';

}

html + =''< / select> \ n'';

html + =''< select \ n'';

html + =''style =" font-family：arial; font-size：7.25pt;

text-align：center; width：50px;" \ n'';

html + =''onchange =" showCalendar（\''''+ showIn.id +''\''，\\ \\''''+

returnTo.name +''\''，this.value，''this thisDate.getMonth（）+''）" \ n'';

html + =''> \ n'';

for（year = 2000; year< 2038; year ++）

{

var selected = year == thisDate.getFullYear（）？ ''选中''：''\ n'';

html + =''< option value ="''+ year +''" ''+ select +''>''+年+

''< / option> \ n'';

}

html + =''< / select> \ n'';

html + =''< / td> \ n'';

html + =''< td style =" background-color：＃FF9900; font-size：7.25pt;

padding-left：5px;填充顶：2px的; text-align：left;"> \ n'';

html + =''< a \ n'';

html + =' 'href ="" \ n'';

html + =''onclick =" showCalendar（\''''+ showIn.id +''\''， \''''+

returnTo.name +''\''，''+ nextDate.getFullYear（）+''，''+ nextDate.getMonth（）

+''）" \ n'';

html + =''title ="下个月" \ n'';

html + =''>< img src =" /images/arrow.right.gif"

style =" border：none;">< / a> \ n'';

html + =''< / td> \ n'';

html + =''< tr>< td colspan = " 7英寸; style =" background-color：＃FF9900;

border-bottom：1px solid lavender;身高：2px;">< / td>< / tr> \ n'';

html + =''< tr> \ n'';

html + =''< td style =" font-size：7.25pt; font-weight：600;

text-align：center; width：25px;"> Sun< / td> \ n'';

html + =''< td style =" font-size：7.25pt; font-weight：600;

text-align：center; width：25px;"> Mon< / td> \ n'';

html + =''< td style =" font-size：7.25pt; font-weight：600;

text-align：center; width：25px;"> Tue< / td> \ n'';

html + =''< td style =" font-size：7.25pt; font-weight：600;

text-align：center; width：25px;"> Wed< / td> \ n'';

html + =''< td style =" font-size：7.25pt; font-weight：600;

text-align：center; width：25px;"> Thu< / td> \ n'';

html + =''< td style =" font-size：7.25pt; font-weight：600;

text-align：center; width：25px;"> Fri< / td> \ n'';

html + =''< td style =" font-size：7.25pt; font-weight：600;

text-align：center;宽度：25px;">星期六< / td> \ n'';

html + =''< / tr> \ n'';

html + =''< tr>< td colspan =" 7" style =" border-bottom：1px solid lavender;

height：2px;">< / td>< / tr> \ n'';

html + =''< tr> \ n'';

month = thisDate.getMonth（）;

year = thisDate.getFullYear（）;

var daysLeft = 0;

var weekDay = thisDate.getDay（）;

if（weekDay 0）

{

html + =''< td colspan ="''+ weekDay +''"

style =" background-color：lavender; font-size：7.25pt;

宽度：25px;">& nbsp;< / td> \ n'';

}

for（var day = 1; day< = days; day ++）

{

for（; weekDay< 7; weekDay ++）
{

if（day days）

{

daysLeft ++;

continue;

}

if（！weekDay）

{

html + =''< / tr> \ n '';

html + =''< tr> \ n'';

}

var border =''none' ';

var fontWeight =''100'';

if（day == todayDay&& month == todayMonth&& year == todayYear）

{

border =''1px solid＃990000'';

fontWeight =''600'';

}

html + =''< td style =" border：''+ border +''font-size：7.25pt;

宽度：20px ;"> \ n'';

html + =''< a \ n'';

html + =''href ="''+ day +''" \ n'';

html + =''style =" font-weight：''+ fontWeight +'' ;

text-decoration：none;" \ n'';

html + =''onclick =" return showCalendar（\''''+ showIn.id +''\''，

\''''+ returnTo.name +''\''，''+ year +''，''+月+ ''，''+ day +''）" \ n'';

html + =''>''+ day +''< / a> \ n' ';

html + =''< / td> \ n'';

天++

}

day--;

weekDay = 0;

}

if（daysLeft 0）

{

html + =''< td colspan ="''+ daysLeft +''"

style =" background-color：lavender;宽度：25px;">& nbsp;< / td> \ n'';

}

html + =''< / tr> \ n'';

html + =''< / table> \ n'';

showIn.innerHTML = html;

showIn.focus（）;

返回false;

}

============== =======

<span id="programExitCalendar" style="display:none;
postition:relative;"></span>
=====================

Here''s the javascript being called:

=====================

String.prototype.repeat = function(l){ var s = '''', i = 0; while (i++ <
l){ s += this; } return s; }
String.prototype.zf = function(l){ return ''0''.repeat(l -
this.length) + this; }
Date.prototype.format = function(f)
{
if (!this.valueOf()){ return this.toString(); }
var date = this;
var days = new Array(
''Sunday'' ,
''Monday'' ,
''Tuesday'' ,
''Wednesday'' ,
''Thursday'' ,
''Friday'' ,
''Saturday''
);
var months = new Array(
''January'' ,
''February'' ,
''March'' ,
''April'' ,
''May'' ,
''June'' ,
''July'' ,
''August'' ,
''September'' ,
''October'' ,
''November'' ,
''December''
);
return f.replace(
/(yyyy|mmmm|mmm|mm|dddd|ddd|dd|hh|nn|ss|a\/p)/gi ,
function($1)
{
switch ($1.toLowerCase())
{
case ''yyyy'' : return date.getFullYear();
case ''mmmm'' : return months[date.getMonth()];
case ''mmm'' : return
months[date.getMonth()].substr(0, 3);
case ''mm'' : return new String(date.getMonth() +
1).zf(2);
case ''dddd'' : return days[date.getDay()];
case ''ddd'' : return days[date.getDay()].substr(0,
3);
case ''dd'' : return new
String(date.getDate()).zf(2);
case ''hh'' : return new String((h = date.getHours()
% 12) ? h : 12).zf(2);
case ''nn'' : return new
String(date.getMinutes()).zf(2);
case ''ss'' : return new
String(date.getSeconds()).zf(2);
case ''a/p'' : return date.getHours() < 12 ? ''AM'' :
''PM'';
}
}
);
}

function formatDate(input)
{
if (!input) { return false; }
if (!input.value) { return false; }
if (input.value == ''''){ return false; }
var val = new String(input.value);
var month = new String(''01'');
var day = new String(''01'');
var year = new String(''2000'');
val = val.replace(/^(\d{1,2})[^\d]+(\d{1,2})[^\d]+(\d{4})$/,
"$1/$2/$3");
if (!isDate(val))
{
val = input.value;
val = val.replace(/^(\d{4})[^\d]+(\d{1,2})[^\d]+(\d{1,2})$/,
"$2/$3/$1");
}
if (!isDate(val))
{
input.value = '''';
return false;
}
month = "0" + val.replace(/^(\d{1,2})[^\d]+(\d{1,2})[^\d]+(\d{4})$/,
"$1");
day = "0" + val.replace(/^(\d{1,2})[^\d]+(\d{1,2})[^\d]+(\d{4})$/,
"$2");
year = val.replace(/^(\d{1,2})[^\d]+(\d{1,2})[^\d]+(\d{4})$/,
"$3");
val = month.substr(month.length - 2, 2) + "/" +
day.substr(day.length - 2, 2) + "/" + year;
input.value = val;
return true;
}

function getDate(parent, target)
{
parent = document.getElementById(parent);
target = document.getElementById(target);
if (!parent){ return false; }
if (!target){ return false; }
var currentDate = isDate(target.value) ? new Date(target.value) : new
Date();
target.value = isDate(target.value) ? target.value : '''';
parent.onblur = function()
{
if (isChild(parent,
document.activeElement)){ return; }
parent.style.display = ''none'';
parent.innerHTML = '''';
};
showCalendar(parent.id, target.name, currentDate.getFullYear(),
currentDate.getMonth());
return false;
}

function isChild(parent, element)
{
if (element == parent){ return true; }
var children = parent.all;
for (var child in children)
{
var node = children[child];
if (element == node){ return true; }
if (node.all)
{
if (isChild(node, element)){ return true; }
}
}
return false;
}
function showCalendar(showIn, returnTo, year, month, day)
{
showIn = document.getElementById(showIn);
returnTo = document.getElementById(returnTo);
if (!showIn){ return false; }
if (!returnTo){ return false; }
showIn.style.position = ''absolute'';
showIn.style.display = '''';
if (day)
{
showIn.onblur = null;
showIn.style.display = ''none'';
showIn.innerHTML = '''';
var date = new Date((month + 1) + ''/'' + day + ''/'' + year);
returnTo.value = date.format(''mm/dd/yyyy'');
returnTo.focus();
returnTo.select();
return false;
}
if (showIn.innerHTML)
{
showIn.innerHTML = '''';
return;
}
var link = null;
var months = new Array(
''January'' ,
''February'' ,
''March'' ,
''April'' ,
''May'' ,
''June'' ,
''July'' ,
''August'' ,
''September'' ,
''October'' ,
''November'' ,
''December''
);
var thisDate = new Date();
year = year < 2000 ? 2000 : year;
year = year 2037 ? 2037 : year;
thisDate.setYear(year);
thisDate.setMonth(month);
thisDate.setDate(1);
var days = 32 - new Date(year, month, 32).getDate();
var nextDate = new Date(year, month, days + 1);
var lastDate = new Date(year, month, 0);
lastDate.setDate(1);
var today = new Date();
var todayDay = today.getDate();
var todayMonth = today.getMonth();
var todayYear = today.getFullYear();
var html = '''';
html += ''<table style="border:1px solid steelblue; margin:2px;
padding:2px; width:225px;">\n'';
html += '' <tr>\n'';
html += '' <td style="background-color:#FF9900; font-family:arial;
font-size:7.25pt; padding-right:5px; padding-top:2px;
text-align:right;">\n'';
html += '' <a\n'';
html += '' href=""\n'';
html += '' onclick="showCalendar(\'''' + showIn.id + ''\'', \'''' +
returnTo.name + ''\'', '' + lastDate.getFullYear() + '', '' + lastDate.getMonth()
+ '')"\n'';
html += '' title="Previous Month"\n'';
html += '' ><img src="/images/arrow.left.gif"
style="border:none;"></a>\n'';
html += '' </td>\n'';
html += '' <td colspan="5" style="background-color:#FF9900;
padding-top:2px; text-align:center;">\n'';
html += '' <select\n'';
html += '' style="font-family:arial; font-size:7.25pt;
text-align:center; width:85px;"\n'';
html += '' onchange="showCalendar(\'''' + showIn.id + ''\'', \'''' +
returnTo.name + ''\'', '' + thisDate.getFullYear() + '', this.value)"\n'';
html += '' >\n'';
for (month in months)
{
var selected = month == thisDate.getMonth() ? ''selected'' : ''\n'';
html += '' <option value="'' + month + ''" '' + selected + ''>'' +
months[month] + ''</option>\n'';
}
html += '' </select>\n'';
html += '' <select\n'';
html += '' style="font-family:arial; font-size:7.25pt;
text-align:center; width:50px;"\n'';
html += '' onchange="showCalendar(\'''' + showIn.id + ''\'', \'''' +
returnTo.name + ''\'', this.value, '' + thisDate.getMonth() + '')"\n'';
html += '' >\n'';
for (year = 2000; year < 2038; year++)
{
var selected = year == thisDate.getFullYear() ? ''selected'' : ''\n'';
html += '' <option value="'' + year + ''" '' + selected + ''>'' + year +
''</option>\n'';
}
html += '' </select>\n'';
html += '' </td>\n'';
html += '' <td style="background-color:#FF9900; font-size:7.25pt;
padding-left:5px; padding-top:2px; text-align:left;">\n'';
html += '' <a\n'';
html += '' href=""\n'';
html += '' onclick="showCalendar(\'''' + showIn.id + ''\'', \'''' +
returnTo.name + ''\'', '' + nextDate.getFullYear() + '', '' + nextDate.getMonth()
+ '')"\n'';
html += '' title="Next Month"\n'';
html += '' ><img src="/images/arrow.right.gif"
style="border:none;"></a>\n'';
html += '' </td>\n'';
html += '' <tr><td colspan="7" style="background-color:#FF9900;
border-bottom:1px solid lavender; height:2px;"></td></tr>\n'';
html += '' <tr>\n'';
html += '' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Sun</td>\n'';
html += '' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Mon</td>\n'';
html += '' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Tue</td>\n'';
html += '' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Wed</td>\n'';
html += '' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Thu</td>\n'';
html += '' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Fri</td>\n'';
html += '' <td style="font-size:7.25pt; font-weight:600;
text-align:center; width:25px;">Sat</td>\n'';
html += '' </tr>\n'';
html += '' <tr><td colspan="7" style="border-bottom:1px solid lavender;
height:2px;"></td></tr>\n'';
html += '' <tr>\n'';
month = thisDate.getMonth();
year = thisDate.getFullYear();
var daysLeft = 0;
var weekDay = thisDate.getDay();
if (weekDay 0)
{
html += '' <td colspan="'' + weekDay + ''"
style="background-color:lavender; font-size:7.25pt;
width:25px;"> </td>\n'';
}
for (var day = 1; day <= days; day++)
{
for (; weekDay < 7; weekDay++)
{
if (day days)
{
daysLeft++;
continue;
}
if (!weekDay)
{
html += '' </tr>\n'';
html += '' <tr>\n'';
}
var border = ''none'';
var fontWeight = ''100'';
if (day == todayDay && month == todayMonth && year == todayYear)
{
border = ''1px solid #990000'';
fontWeight = ''600'';
}
html += ''<td style="border:'' + border + ''font-size:7.25pt;
width:20px;">\n'';
html += '' <a\n'';
html += '' href="'' + day + ''"\n'';
html += '' style="font-weight:'' + fontWeight + '';
text-decoration:none;"\n'';
html += '' onclick="return showCalendar(\'''' + showIn.id + ''\'',
\'''' + returnTo.name + ''\'', '' + year + '', '' + month + '', '' + day + '')"\n'';
html += '' >'' + day + ''</a>\n'';
html += ''</td>\n'';
day++
}
day--;
weekDay = 0;
}
if (daysLeft 0)
{
html += '' <td colspan="'' + daysLeft + ''"
style="background-color:lavender; width:25px;"> </td>\n'';
}
html += '' </tr>\n'';
html += ''</table>\n'';
showIn.innerHTML = html;
showIn.focus();
return false;
}
=====================

帮助DOM中的重复 [英] help with recusion in DOM

问题描述

推荐答案

相关文章

PHP最新文章

热门教程

热门工具

登录关闭

帮助DOM中的重复 [英] help with recusion in DOM

问题描述

推荐答案

相关文章

PHP最新文章

热门教程

热门工具

登录 关闭

登录关闭