您的位置：首页 > Web前端 > JavaScript

JS--简易心形

2015-12-15 14:36 489 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>For 循环做图形</title>

<style type="text/css">

*{margin: 0;padding: 0;list-style: none;}

li{width: 50px;height: 50px;background: #f00;border: solid 1px #000;position: absolute;}

</style>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

<script type="text/javascript">

var oDiv1=document.getElementById("div1");

var aLi1=oDiv1.getElementsByTagName("li");

var oDiv2=document.getElementById("div2");

var aLi2=oDiv2.getElementsByTagName("li");

for(var i=0;i<7;i++){

oDiv1.innerHTML+="<li></li>";

}

for(var i=0;i<aLi1.length;i++){

if(i==0||i==3||i==6){

aLi1[i].style.left=i*52+"px";

aLi1[i].style.top=52+"px";

}else{

aLi1[i].style.left=i*52+"px";

aLi1[i].style.top=0+"px";

}

}

for(var i=0;i<7;i++){

oDiv2.innerHTML+="<li></li>";

}

for(var i=0;i<aLi2.length;i++){

if (i<aLi2.length/2) {

aLi2[i].style.left=i*52+"px";

aLi2[i].style.top=(104+i*52)+"px";

}else{

aLi2[i].style.left=i*52+"px";

aLi2[i].style.top=(104+(aLi2.length-i-1)*52)+"px";

}

}

</script>

</body>
</html>

一个简易心形，花了半天的时间才做出效果，也不知道是不是最有效的方式，不过已经做出效果了，有点开心。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航