<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.warp {
margin: 0 auto;
width: 500px;
border: 1px solid #006400;
}
.box {
width: 100%;
color: white;
font-size: 100px;
text-align: center;
height: 1000px;
margin: 10px 0;
background: #006400;
}
</style>
</head>
<body>
<div class="warp">
</div>
</body>
<script type="text/javascript">
var ow = document.getElementsByClassName('warp')[0];
var n=1;
// createElement()//创建标签
// document.setAttribute(要设置的属性，属性值)//设置特定元素节点属性的值/通过属性设置对应的属性值
//创建函数
function creat() {
//创建一个新的div
var odiv = document.createElement('div');
//将创建的div设置class名字
odiv.innerHTML=n++;
odiv.setAttribute('class', 'box');
odiv.style.backgroundImage='url(images/0.jpg)'
//将创建好的div插入ow中
//appendChild(创建的标签名，当前的标签名)
ow.appendChild(odiv)
}
//调用函数
creat();
window.onscroll = function() {
//滚动条顶端到顶部的距离值
var h = document.documentElement.scrollTop || document.body.scrollTop;
//div元素的高
var hei = document.documentElement.offsetHeight;
//可视区域的高
var c = document.documentElement.clientHeight;
if (h >= (hei - c)) {
creat()
}
}
</script>
</html>
网友评论