Mousavmousab
چهارشنبه 27 اسفند 1393, 22:11 عصر
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.box {
background-color: #ffd800;
color: red;
font-size: 20px;
height: 300px;
width: 400px;
visibility:hidden;
display:inline;
}
</style>
<script>
var i = 1
function $(ID) {
return document.getElementById(ID);
}
function repeat() {
$("sp").innerHTML = i++;
var handle = setTimeout("repeat()", 100);
if (i == 10) {
showDiv1();
}
else if (i == 20) {
showDiv2();
}
else if (i > 30) {
showDiv3();
clearTimeout(handle);
}
}
function showDiv1() {
$("dv1").innerHTML = "<b> Div1 </b>";
$("dv1").style.visibility = "visible";
$("dv2").style.visibility = "hidden";
$("dv3").style.visibility = "hidden";
}
function showDiv2() {
$("dv2").innerHTML = "<b> Div2 </b>";
$("dv2").style.visibility = "visible";
$("dv1").style.visibility = "hidden";
$("dv3").style.visibility = "hidden";
}
function showDiv3() {
$("dv3").innerHTML = "<b> Div3 </b>";
$("dv3").style.visibility = "visible";
$("dv1").style.visibility = "hidden";
$("dv2").style.visibility = "hidden";
}
window.onload = function () {
//Start of displaying the Div one after one.
repeat();
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="height: 50px; background-color: #efefb8">
<span id="sp" style="height: 50px; width: 50px; background-color: #ff6a00; border: 1px solid green; color: white; font-family: Tahoma; font-size: 20px;"></span>
</div>
<div class="box" id="dv1">
</div>
<div class="box" id="dv2">
</div>
<div class="box" id="dv3">
</div>
</div>
</form>
</body>
</html>
نسخه آزمایشی هولایتی
www.hoolity.com