javascript实现输出指定行数正方形图案的方法


Posted in Javascript onAugust 03, 2015

本文实例讲述了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实现输出指定行数正方形图案的方法

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
js面向对象编程总结
Feb 16 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 #Javascript
javascript常见数据验证插件大全
Aug 03 #Javascript
javascript自定义in_array()函数实现方法
Aug 03 #Javascript
JavaScript简单修改窗口大小的方法
Aug 03 #Javascript
javascript实现随机读取数组的方法
Aug 03 #Javascript
JS实现选择TextArea内文本的方法
Aug 03 #Javascript
Javascript连接Access数据库完整实例
Aug 03 #Javascript
You might like
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
php获取淘宝分类id示例
2014/01/16 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
python正则分组的应用
2013/11/10 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
使用python实现飞机大战游戏
2020/03/23 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
实习护士自我鉴定
2013/10/13 职场文书
上班离岗检讨书
2014/01/27 职场文书
公务员综合考察材料
2014/02/01 职场文书
媒体宣传策划方案
2014/05/25 职场文书
辞职信范文大全
2015/03/02 职场文书
2015年国培研修感言
2015/08/01 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers