学到后面发现前面的内容都不是很巩固了。
知道自己的不足之后,最近在复习一些学过的知识。
(你会发现我有好几篇的开场白都是这个,想不出开场白了。。。T T)
根据输入的内容生成按钮,点击按钮可以弹出alert框(噢这个功能是我最头疼的,涉及到了闭包的相关知识)
从下面几个链接了解到了相关知识(虽然以前了解过,但是道理我都懂,我不会用的既视感T T,敲了代码理解就深刻了,知道应用场景了)
(感谢下面的链接的知识分享)
for循环中输出当前循环值:
https://www.zhihu.com/question/36188340/answer/103368544
js闭包:
http://www.jb51.net/article/24101.htm
js匿名函数:
http://www.cnblogs.com/chenxianbin89/archive/2010/01/28/1658392.html
再次谢谢!
下面贴上我的代码:
html:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="content"> <h2>动态生成按钮</h2> <div class="info"> <label for="num">请输入您要动态生成的按钮的数量:</label> <input type="text" name="num" id="num" class="txt" required> </div> <input type="button" name="sub" id="sub" class="sub" value="生成按钮"> <input type="button" name="clear" id="clear" class="sub" value="清除画布"> <div class="clearfix"></div> <div class="btn_content" id="btn_content"> </div> <div class="clearfix"></div> </div>
css:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> *{ padding: 0; margin:0; } .content{ width:800px; margin:100px auto; border:2px solid pink; } .content>h2{ margin-top: 20px; text-align: center; color: #4682B4; margin-bottom: 30px } .content label{ font-size:18x; color: #9F79EE; font-weight: bold; } .info{ margin-left: 180px; margin-bottom: 20px; } .txt{ height:28px; width: 200px; font-size:16px; border-radius: 10px; box-shadow: none; outline: none; background: #F8F8FF; color: #8968CD; border: 1px solid #F8F8FF; text-align: center; } .sub{ height: 35px; width: 120px; font-size:18px; font-weight: bold; margin: 20px 20px 20px 50px; border-radius: 10px; border:0; background: #436EEE; color: #fff; outline: none; opacity: 0.8; float: left; } .sub:hover{ opacity: 1; } .clearfix{ clear: both; } .btn_content{ border-top: 1px solid #FFDEAD; margin:0 20px; } .btn_content button{ height: 30px; width: 100px; font-size:16px; font-weight: bold; margin: 10px 25px; border-radius: 10px; border:0; background: pink; color: #000; outline: none; opacity: 0.8; float: left; } .btn_content button:hover{ opacity: 1; } </style>
jq:
1 <script type="text/javascript"> 2 $(function(){ 3 //生成按钮 4 $("#sub").bind("click",function(){ 5 6 if($("#num").val()==""){ 7 alert("数量不能为空"); 8 } 9 else if(parseInt($("#num").val())!=$("#num").val()){ 10 alert("数量只能是整数!") 11 } 12 else{ 13 clear_plannel(); 14 var btn_content = $("#btn_content") 15 for(var i=0;i<$("#num").val();i++){ 16 btn_content.append("<button>按钮"+(i+1)+"</button>"); 17 if( (i+1)%5 == 0 ){ 18 btn_content.append("<br>") 19 } 20 } 21 22 //生成按钮的点击事件 23 var btn = $("#btn_content").find("button"); 24 25 for(var i=0;i<btn.length;i++){ 26 27 (function(m){ 28 btn.eq(i).on("click",function(){ 29 alert("您好!我是按钮<"+(m+1)+">"); 30 }) 31 })(i) 32 } 33 34 } 35 }) 36 37 //清除画布 38 $("#clear").bind("click",function(){ 39 //clear_plannel(); 40 }) 41 42 }) 43 44 function clear_plannel(){ 45 $("#btn_content").html(""); 46 } 47 </script>
由于博客园显示JQ效果,效果就展示不出来了。
感兴趣的话贴到代码编辑器上看看效果。感谢!
以上内容,如有错误请指出,不甚感激。