javascript:第二章自动生成100个li!练习!
2016-08-02 13:37
459 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> #div1{width:800px;height:1000px;position:relative;margin: 0 auto;} #btn{margin:20px 45px;} #div1 div{width:60px;height:60px;background:#ffc;display:inline-block;position:absolute; border:1px solid #ccc;} </style> <script type="text/javascript"> window.onload=function(){ var div= document.getElementById('div1'); var btn= document.getElementById('btn'); arr=['red','yellow','blue','green']; var str=""; for(var i=0;i<100;i++){ str += "<div>"+ (i+1) +"</div>"; } var lis=div.getElementsByTagName('div'); btn.onclick=function(){ div.innerHTML+=str; for(var i=0; i<lis.length; i++){ lis[i].style.left=(70+5)*(i%10)+'px'; lis[i].style.top=(70+5)*Math.floor(i/10)+'px'; lis[i].style.background=arr[i%4]; } } } </script> </head> <body> <input id="btn" type="button" value="自动生成100个div" /> <div id="div1"></div> </body> </html>
相关文章推荐
- javascript基础——自动生成100个li
- javascript:第二章for 练习 自动生成V字形的div!
- javascript:第二章:自动生成十个li!
- DOM操作--自动生成100个li(变色版)
- 第2课--2.2自动生成100个LI-只能用定位实现(提高版)
- JavaScript自动生成li节点 并把文本框的值赋给li.innerHtml
- asp.net JQuery Ajax WebService 搜索 自动匹配 动态生成ul li 点击li 获取li内容
- 基于JavaScript的代码自动生成工具
- 自动生成文章摘要[JavaScript 版本]
- 自动生成文章摘要[JavaScript 版本]
- JavaScript 自动生成 年月范围 选择
- Javascript 通过json自动生成Dom的代码
- jsdoc-toolkit--让JavaScript代码自动生成API文档
- asp自动生成javascript检验函数
- 帮助你自动生成浏览器特有CSS3属性的Javascript类库 - CSSFx
- javascript自动生成年月日下拉选择框
- myEclipse7.5中安装 javascript,extjs的代码自动提示spket插件和extjs desiner可视化代码生成工具,extjs的一个很好的学习视频资源地址
- 自动生成文章摘要[JavaScript 版本]
- asp自动生成javascript检验函数1
- Javascript使用AjaxPro构建自动补全,同时自动生成待输行【原创】