recherche

Maison >interface Web >js tutoriel >Comment implémenter l'effet de javascript produisant un motif carré avec un nombre spécifié de lignes

Comment implémenter l'effet de javascript produisant un motif carré avec un nombre spécifié de lignes

巴扎黑
巴扎黑original
2017-09-06 10:06:582828parcourir

本文实例讲述了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>

效果图：

图案字符：A，行数：5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter l'injection de dépendances avec jsArticle suivant：Comment implémenter l'injection de dépendances avec js

Articles Liés

Voir plus