<!DOCTYPE html><html><head><meta charset="UTF-8"><title>自动生成100个li</title><style type="text/css"> span{width:30px;height:30px;background: yellow;position: absolute;display: inline-block;} #div1{width:350px;height:1000px;background: none;border:1px solid red;}</style><script type="text/javascript">window.onload=function(){ //window.onload必须写var btn=document.getElementById('btn');var span=document.getElementsByTagName('span');var div1=document.getElementById('div1');btn.onclick=function(){for(var i=0;i<100;i++){div1.innerHTML+='<span>'+ i +'</span>';}for(var i=0;i<100;i++){if(i%10==0){span[i].style.left=10+i*40+"px"+'<br />';}else {span[i].style.left=10+i*40+"px"; }}}//每10个换行}</script></head><body><button id="btn">点击变化</button><div id="div1"></div></body></html>
3 回答
已采纳
李晓健
TA贡献1036条经验 获得超461个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动生成100个li</title>
<style type="text/css">
span{width:30px;height:30px;background: yellow;display: inline-block;}
#div1{width:400px;height:1000px;background: none;border:1px solid red;}
</style>
<script type="text/javascript">
window.onload=function(){ //window.onload必须写
var btn=document.getElementById('btn');
var div1=document.getElementById('div1');
btn.onclick=function(){
var str = '';
for(var i=1;i<101;i++){
str+='<span>'+ i +'</span>';
if(i%10==0){
str += '<br/>'
}
}
div1.innerHTML = str;
}
}
</script>
</head>
<body>
<button id="btn">点击变化</button>
<div id="div1"></div>
</body>
</html>
添加回答
举报
0/150
提交
取消