javascript实现输出指定行数正方形图案的方法

本文实例讲述了javascript实现输出指定行数正方形图案的方法。分享给大家供大家参考。具体如下：
javascript实现输出指定行数的正方形图案：点击生成图案，会有2个提示框，1，输入图案的组成字符，只能是1个字符哦2，输入正方形行数，路过大于10，会设置为10行数

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title> 生成正方形 </title><Script type="text/javascript">//动态测字符的宽度，传入字符，放在span，判断宽度变化，返回function get_width（zifu）{if（cwidth.innerHTML.length>0）cwidth.innerHTML="";//路过有元素，清空var oldwidth=cwidth.offsetWidth;cwidth.innerHTML=zifu;var zifu_width=cwidth.offsetWidth-oldwidth;cwidth.innerHTML="";//alert（zifu_width）;return zifu_width;}//输出正方形函数function create（）{var tuxing=prompt（"请输入图案，必须1个字符"）;//图案，路 a if（tuxing==null||tuxing==""||tuxing.length>1）{alert（"请输入图 案,图案必须1个字符"）;return false;}//提示框，输入行数var count=prompt（"请输入正方形的行数"）;if（count==null||count==""||count<1||isNaN（count））{alert（"您的输入的行数存在问题，1.不得空2.大于1 3.不得为非数字"）;return false;}//根据行数，得到一行的字符窜if（count>10）{count=10;alert（"输入的行数大于10，自动修改为10"）;}var hangstr="";for（i=1;i<=count;i++）{hangstr+=tuxing+" ";//判断变长是否超过文档的if（get_width（hangstr）>maxw-100）{alert（"过长的行"）;count=i-1;hangstr=oldhangstr;break;}oldhangstr=hangstr;}//生成图形字符串var tustr="";//图形字符串for（i=1;i<=count;i++）tustr+=hangstr+"<br/>";//把图形字符串放入图形层zengfang.innerHTML=tustr;}</script> </head> <body> <div id="zengfang">此处显示图形</div> <input type="button" value="生成正方形图案" onclick="create（）"><br><span id="cwidth"></span><！-- 测试获取字符串的宽度，因为行数过大，会超过文档范围，而发生折行<input type="text" value="" id="text1"> <input type="button" value="显示字符宽度" onclick="get_width（text1.value）"> --> <Script type="text/javascript"> var maxh=document.body.clientHeight;//文档高 正方形最大长度 var maxw=document.body.clientWidth;//文档宽，正方形最大长度 //alert（maxh）; //alert（maxw）; </script> </body></html>

效果图：
图案字符：A，行数：5

希望本文所述对大家的javascript程序设计有所帮助。