Home > Web Front-end > JS Tutorial > body text

How to implement the effect of javascript outputting a square pattern with a specified number of lines

巴扎黑
Release: 2017-09-06 10:06:58
Original
2824 people have browsed it

本文实例讲述了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>
 <p id="zengfang">此处显示图形</p>
 <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>
Copy after login

效果图:

图案字符:A,行数:5

The above is the detailed content of How to implement the effect of javascript outputting a square pattern with a specified number of lines. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template