سوال: ایجاد دایو پله ای شکل [بایگانی]

ferry_2020

سه شنبه 18 فروردین 1394, 23:13 عصر

عرض سلام و احترام
من میخوام با جاو اسکریپت چندتا دایو ایجاد کنم که از کم شروع میشه و هر بار به مقدار دایو اضافه شده تا جاییکه به انتهای صفحه میرسه
در واقع به شکل پله ایجاد میشه و بعد از رسیدن به انتها،دوباره مسیر رو برمیگرده
من کد زیر رو نوشتم ولی متاسفانه به جواب نرسیدم

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var i; var d;
function Div()
{
document.getElementById("myDiv").style.backgroundColor="orange";
d= document.getElementById("myDiv").style.width="200px";
document.getElementById("myDiv").style.height="100px";
document.getElementById("myDiv").style.width="200px";
for(i=1;i<7;i++)
{
if(i<=4)
document.getElementById("myDiv").appendChild(d);
}
}

</script>
</head>
<body onload="Div()">
<div id="myDiv"></div>
</body>
</html>

ممنون میشم کمکم کنید
اینم شکلی هست که میخوام ایجاد بشه :
http://dc780.4shared.com/img/rjK6ylgKce/s7/14c769e7f28/JavaScript?async&rand=0.11015309502481352

Javidhb

چهارشنبه 19 فروردین 1394, 11:27 صبح

دمــو (http://jsfiddle.net/nke56kuy/1/)

<head>
<style type="text/css">
#container{
width: 100%;
height: auto;
}
.yellow{
height: 25px;
background-color: #F8CD38;
clear: both;
border: 1px solid black;
}
.pull-right{
float:right;
}
</style>
</head>

<body>
<div id="container">

</div>

<script>
// container's width
var totalWidth = document.getElementById('container').offsetWidth;
// how much we should add to the width of our element in each step
var eachStepWidth = totalWidth / 4;

for(var i=1; i<=7; i++) {
var thisStepWidth = i * eachStepWidth;

//create new div
var newDiv = document.createElement('div');

if(thisStepWidth <= totalWidth) {
newDiv.setAttribute('class', 'yellow');
newDiv.setAttribute('style', 'width:'+ thisStepWidth +'px');
} else {
newDiv.setAttribute('class', 'yellow pull-right');
newDiv.setAttribute('style', 'width:'+ eachStepWidth * (8-i) +'px');
}

document.getElementById('container').appendChild(n ewDiv);
}
</script>
</body>