개체의 종료 시간이나 반복되는 개체에서 한 과정이 끝나는 시간의 값을 반환하거나 설정한다.

인수
: (속성 문자열)
속성값은 개체의 종료 시간이나 반복되는 개체에서 한 과정이 끝나는 시간의 값을 나타내는 문자열이다.

clock-value 시간 양식에 정의된 h:min:s.f와 같은 시간값이다.
id.begin[+/-clock-value] 다른 개체의 시작시간에 상대적인 종료시간을 정의한다.
예를 들어 개체 A가 시작하여 10초 후라면 end="A.begin+10s"이고
clock-value은 선택적 요소이다.
id.end[+/-clock-value] 다른 개체의 종료시간에 상대적인 종료시간을 정의한다.
예를 들어 개체 A가 종료하기 10초 전이라면 end="A.begin-10s"이고
clock-value은 선택적 요소이다.
indefinite 엘레멘트 개체가 무한정 계속된다.

이 속성은 읽기/쓰기이며 디폴트값은 없다.

특기

end 애트리뷰트는 모체 엘레멘트의 타임라인이 시작되는 시간(0)에 따른 절대 시간값이다.
이에 반해 dur 애트리뷰트는 모체의 begin 애트리뷰트에 상대적인 시간값이다.
durend 애트리뷰트를 한개체에서 동시에 사용하지 말아야 한다.

end 애트리뷰트는 여러개의 end 시간값들을 가질 수 있다.
예를들어 A 개체가 초점을 받고 10초 후라면 end="A.onfocus+10s"로 지정한다.
또한 A 개체가 시작하기 10초 전이라면 end="A.end-10s"로 지정한다.
페이지가 로딩된다음 10초후에 엘레멘트가 종료하거나 사용자가 페이지위에서 개체를 클릭한 1초 후에 되려면 종료하려면 end="4; oObject.click+1"으로 지정한다.

time2 대신에 time 비헤이버와 연관하여 엘레멘트를 사용할 때, 애트리뷰트 제일 앞에 t: 이름자리(namespace)를 표시하여야 한다. time 비헤이버는 clock-value 형식과 값 indefinite 만을 지원한다.

이속성은 IE6부터 Transition 필터에도 적용된다.

적용
개체scriptHTML규격IE
참고
begin dur end endElement endElementAt

HTML+time

이 속성은 (영문) W3C SMIL 2.0(Synchronized Multimedia Integration Language)에서 정의되었다.


즉시 나타나 총 10초 후에 감춰진다.
3초후에 나타나 총 10초 후에 감춰진다.
6초후에 나타나 총 10초 후에 감춰진다.

시작시간이 다르고 종료시간은 같다.

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE> .time{ behavior: url(#default#time2);}</STYLE>
<IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<DIV id="div1Obj" class="time divBlock" begin="0" end="10" timeaction="visibility" style="color:red;border:solid 1 red">
<IMG src=../../gif/rfexample.gif> 즉시 나타나 총 10초 후에 감춰진다.
</DIV>
<DIV id="div2Obj" class="time divBlock" begin="3" end="10" timeaction="visibility" style="color:green;border:solid 1 green">
<IMG src=../../gif/rfexample.gif> 3초후에 나타나 총 10초 후에 감춰진다.
</DIV>
<DIV id="div3Obj" class="time divBlock" begin="6" end="10" timeaction="visibility" style="color:blue;border:solid 1 blue">
<IMG src=../../gif/rfproperty.gif> 6초후에 나타나 총 10초 후에 감춰진다.
</DIV>
<BUTTON id="butObj" onclick="div1Obj.beginElement();div2Obj.beginElement();div3Obj.beginElement();">다시 시작</BUTTON><BR>
<SCRIPT>
document.write('div1Obj.begin='+div1Obj.begin+', div1Obj.end='+div1Obj.end+'<BR>');
document.write('div2Obj.begin='+div2Obj.begin+', div2Obj.end='+div2Obj.end+'<BR>');
document.write('div3Obj.begin='+div3Obj.begin+', div3Obj.end='+div3Obj.end+'<BR>');
</SCRIPT>
</BODY>
</HTML>

즉시 나타나서 단추를 클릭하면 감춰진다.

end 애트리뷰트를 단추 클릭 이벤트와 연결하였다.

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>.time{behavior: url(#default#time2);}</STYLE>
</HEAD>
<BODY>
<DIV id="divAObj" class="time" begin="0" end="but1Obj.click" timeAction="display" style="color:red;border:solid 1 red">
<IMG src=../../gif/rfexample.gif> 즉시 나타나서 단추를 클릭하면 감춰진다.
</DIV>
<BUTTON id="but1Obj">문단 감추기</BUTTON>
<BUTTON id="but2Obj" onclick="divAObj.beginElement()">다시 시작</BUTTON><BR>
<SCRIPT>
document.write('divAObj.end='+divAObj.end);
</SCRIPT>
</BODY>
</HTML>


<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE> .time{behavior: url(#default#time2);}</STYLE>
<IMPORT namespace=t urn="urn:schemas-microsoft-com:time" implementation="#default#time2" />
</HEAD>
<BODY>
<T:TRANSITIONFILTER id="tfObj" type="fade" dur="8" end="4" targetElement="divBObj"/>
<DIV class="time" id="divBObj" dur="indefinite"
  style="position:relative;left:0;width:400;height:100;background-image:url(../../gif/flower1.jpg);"></DIV>
<BUTTON onclick="divBObj.beginElement()">다시 시작</BUTTON><BR>
<SCRIPT>
document.write('divBObj.end='+tfObj.end+'<BR>');
document.write('divBObj.targetElement='+tfObj.targetElement);
</SCRIPT>
</BODY>
</HTML>


DIV 내용

end 애트리뷰트가 여러 방식으로 종료된다.
divCobj 개체는 8초 후, 단추를 클릭하고 1초 후, 혹은 마우스 커서를 밖으로 이동하고 1초 후에 종료된다.

<HTML xmlns:t="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time{behavior: url(#default#time2);}
#divCobj{ border:solid 2 blue;padding:10;font:14pt;color:yellow;font-weight:bold;background-color:green;width:300;}
</STYLE>
<IMPORT namespace=t urn="urn:schemas-microsoft-com:time" implementation="#default#time2" />
</HEAD>
<BODY>
<T:PAR id="parObj" begin="1;butCobj.click">
<DIV id="divCobj" begin="1" class="time" end="8;butCobj.click+1;parObj.mouseleave+1">
<T:TRANSITIONFILTER begin="divCobj.begin" dur="3" mode="in" type="fade"/>
<T:TRANSITIONFILTER begin="divCobj.End-1;" dur="1" mode="out" type="pushWipe"/>
<IMG src="../../gif/flower1.jpg" width=300><BR>
DIV 내용</DIV>
</T:PAR>
<BUTTON id="butCobj" onclick="parObj.beginElement()">다시 시작</BUTTON><BR>
<SCRIPT>
document.write('parObj.begin=<FONT color=blue>'+parObj.begin+'</FONT><BR>');
document.write('divCobj.end=<FONT color=blue>'+divCobj.end+'</FONT><BR>');
document.write('divCobj.targetElement=<FONT color=blue>'+tfObj.targetElement+'</FONT>');
</SCRIPT>
</BODY>
</HTML>