盖房子优化1
来源:互联网 发布:linux修改root密码 编辑:程序博客网 时间:2024/04/28 23:26
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8" />
<title></title>
<styletype="text/css">
.wrap{
width:800px;
height:500px;
border:1px solid black;
margin:0 auto;
position:relative;
}
.row{
position:absolute;
bottom:0;
left:0;
}
.row>div{
width:20px;
height:20px;
border:1px solid deeppink;
background-color: mediumspringgreen;
float:left;
box-sizing:border-box;
}
</style>
</head>
<body>
<divclass="wrap">
</div>
<scripttype="text/javascript">
varwrap = document.querySelector(".wrap");
varbottom = 0;// 用于定位新生成的row的bottom值
functioncreateRow() {
// 使用js创建row和20个小div
varrow = document.createElement("div");
row.className = "row";
row.style.bottom= bottom + "px";
// 创建20个小方格
for(var i = 0; i< 20; i++) {
varbox = document.createElement("div");
row.appendChild(box);
}
// 将row添加为wrap的孩子节点
wrap.appendChild(row);
// 碰壁动画
varspeed = 20;
//做动画,过去的碰壁反弹
row.timer= setInterval(function() {
varmaxWidth = wrap.clientWidth - row.offsetWidth;
row.style.left= row.offsetLeft + speed + "px";
//碰壁判断
if(row.offsetLeft >= maxWidth) {
speed*= -1;
} else if (row.offsetLeft <= 0) {
speed*= -1;
}
}, 100);
// 返回新创建row节点
returnrow;
}
// 调用createRow()函数,页面一加载,就有一行并且有动画了
createRow();
wrap.onclick= function() {
// bottom每次增加20
bottom+= 20;
// 每点击一次,就创建新的row
varnewRow = createRow();
// 让前一个row停止计时器,找到新添加的row的上一个兄弟节点
clearInterval(newRow.previousSibling.timer);
}
</script>
</body>
</html>
- 盖房子优化1
- 盖房子优化2
- 盖房子优化3
- 盖房子
- 盖房子
- 盖房子
- JS小游戏 - 盖房子
- 盖房子_DP
- Vijos1057. 盖房子
- P1057 盖房子
- [Vijos1057] 盖房子
- CSU 1813 盖房子
- 1057.盖房子
- vijos 1057 盖房子
- CillyB盖房子
- [vijos1057]盖房子
- [BZOJ1515]盖房子
- CillyB盖房子 QDU
- Camera API2.0的应用
- python学习——面向对象编程
- 定位版瀑布流带缝隙
- 盖房子
- unity 3d
- 盖房子优化1
- 盖房子优化2
- Objective-C(二,定义类)
- Bridge模式
- 盖房子优化3
- Python爬虫实践:获取空气质量历史数据
- 16.2 最简单界面程序(2)
- BOM
- Lua-1---类型,值和变量