php循环图案正方形,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>

//动态测字符的宽度，传入字符，放在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>

<br>

<!-- 测试获取字符串的宽度，因为行数过大，会超过文档范围，而发生折行

-->

var maxh=document.body.clientHeight;//文档高正方形最大长度

var maxw=document.body.clientWidth;//文档宽，正方形最大长度

//alert(maxh);

//alert(maxw);

</script>

</body>

</html>

效果图：

图案字符：A，行数：5

php循环图案正方形,javascript输出指定行数正方形图案效果的实现方法相关推荐

php如何打出的正方形行列,javascript实现输出指定行数正方形图案的方法
本文实例讲述了javascript实现输出指定行数正方形图案的方法.分享给大家供大家参考.具体如下: javascript实现输出指定行数的正方形图案:点击生成图案,会有2个提示框,1,输入图案的组成 ...
JAVA——实现杨辉三角的指定行数输出
实现杨辉三角的指定行数输出 1.要求杨辉三角是一个由数字排列的三角形数表,此方法介绍如何实现控制台输出杨辉三角形. 2.杨辉三角杨辉三角最本质的特征是:除两侧元素均为1以外,其余每个位置上的元素值 ...
【C/C++】等分或指定行数把txt文档拆分成多份
1.输入如下: 2.执行代码: 3.输出如下: 4.代码如下: 4.1.平均拆分代码 #include <iostream> #include <string> #inclu ...
Linux 查看文件指定行数内容
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1.tail date.log 输出文件末尾的内容,默认10行 tail ...
css3实现超出文本指定行数(指定文本长度)用省略号代替
测试代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta name="viewport" c ...
VC编辑框（EDIT）的自动换行、自动滚屏、到指定行数自动清空
From: http://getyoureyes.blog.163.com/blog/static/101716622201083081914305/ 经过多次测试,总结出VC编辑框(EDIT)的自动 ...
eclipse查找指定行数
ctrl+L 查找指定行数转载于:https://www.cnblogs.com/songyunxinQQ529616136/p/6640734.html
excel在每行下面添加插入指定行数的空白行方法步骤
描述:excel在每行下面添加指定行数的空白行方法步骤步骤: 下载excel必备工具箱,并安装下载地址:http://www.ahzll.top/ 菜单栏->工具箱->处理->间 ...
Python:按照指定行数打印文件内容
方法一:先全部读取并存放列表,再通过列表索引迭代打印实现思路: 1.打开文件 2.读取文件并存储在列表中,方便按指定行数打印文件 3.获取开始和结束位置,并转换为对应列表索引 4.迭代打印列表对应行 ...

php循环图案正方形,javascript输出指定行数正方形图案效果的实现方法

php循环图案正方形,javascript输出指定行数正方形图案效果的实现方法相关推荐

最新文章

热门文章