盖房子

最新推荐文章于 2022-12-21 19:26:59 发布

Vivian_shuang

最新推荐文章于 2022-12-21 19:26:59 发布

阅读量298

点赞数

分类专栏： JavaScript 文章标签：盖房子 js

本文链接：https://blog.csdn.net/Vivian_shuang/article/details/51894445

版权

JavaScript 专栏收录该内容

171 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

.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>

</div>

// 先获取oWrap

var oWrap = document.getElementsByClassName("wrap")[0];

// 创建oRow节点，类型div

var oRow = document.createElement("div");

oWrap.appendChild(oRow);

oRow.setAttribute("class","row");

var aDivs = [];

// 创建20个小div，将创建完成的div添加为oRow的给子节点

for (var i = 1; i <= 20; i++) {

aDivs[i] = document.createElement("div");

oRow.appendChild(aDivs[i]);

}

var maxWidth = oWrap.clientWidth - oRow.offsetWidth;

var timer = null;

clearInterval(timer);

var speed = 1;

timer = setInterval(function(){

if (oRow.offsetLeft >= maxWidth || oRow.offsetLeft < 0) {

speed = speed * -1;

}

oRow.style.left = oRow.offsetLeft + speed +'px';

},20)

</script>

</body>

</html>

优惠劵

Vivian_shuang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盖房子

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:relativ
复制链接

扫一扫