javascript实现输出指定行数正方形图案的方法
更新时间：2015年08月03日 15:22:30 作者：wxhlxx
这篇文章主要介绍了javascript实现输出指定行数正方形图案的方法,可实现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程序设计有所帮助。
相关文章
JavaScript报错：Uncaught TypeError: XXX is
在 JavaScript 编程中,“Uncaught TypeError: XYZ is not iterable” 是一种常见的错误,这种错误通常发生在试图对一个非可迭代对象进行迭代操作时,了解这种错误的成因和解决方法,对于编写健壮的代码至关重要,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了微信小程序 导入图标实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
在 ES5 中，类的继承可以有多种方式，然而过多的选择有时反而会成为障碍，ES6 统了类继承的写法，避免开发者在不同写法的细节之中过多纠缠，但在介绍新方法之前，还是有必要先回顾下ES5中类的继承方式2022-08-08
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
下面小编就为大家带来一篇js的form表单提交url传参数(包含+等特殊字符)的两种解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要是对JavaScript中的隐式类型转换进行了详细分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了JS根据生日月份和日期计算星座的简单实现方法,涉及javascript日期时间与字符串操作相关技巧,需要的朋友可以参考下2016-11-11
这篇文章主要分享一个Javascript打印局部页面实例,需要的朋友可以参考下。2016-06-06
JS函数验证总结，都是一些基础的东西，现在比较流行jquery了，不过这些东西仍然需要大家会。2010-10-10
这篇文章主要介绍了删除ID为sNews的索引为JQID的tr元素里的内容,需要的朋友可以参考下2014-04-04
JavaScript 中的 `==` 和 `===` 操作符详解
在 JavaScript 中,== 和 === 是两个常用的比较操作符,分别用于 宽松相等（类型转换相等） 和 严格相等（类型和值必须相等） 的比较,理解它们的区别以及具体的比较规则对于编写准确和高效的代码至关重要,需要的朋友可以参考下2024-09-09
最新评论