Javascript-Methode zur Ausgabe eines quadratischen Musters mit einer angegebenen Anzahl von Zeilen_Javascript-Fähigkeiten-js-Tutorial-php.cn

Javascript-Methode zur Ausgabe eines quadratischen Musters mit einer angegebenen Anzahl von Zeilen_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:47:37

Original

3687 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode, mit JavaScript ein quadratisches Muster mit einer angegebenen Anzahl von Zeilen auszugeben. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Javascript implementiert die Ausgabe eines quadratischen Musters mit einer bestimmten Anzahl von Zeilen: Klicken Sie, um ein Muster zu generieren. Es werden zwei Eingabeaufforderungsfelder angezeigt. 1. Geben Sie die Zeichen ein, aus denen das Muster besteht. 2. Geben Sie die Anzahl der quadratischen Zeilen ein. Wenn sie größer als 10 ist, wird sie auf 10 Zeilen eingestellt

<!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>

Nach dem Login kopieren

Rendering:

Musterzeichen: A, Anzahl der Zeilen: 5

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.