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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
vue权限问题的完美解决方案
May 08 Javascript
如何用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微信开发之图片回复功能
2018/06/14 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python 连连看连接算法
2008/11/22 Python
gearman的安装启动及python API使用实例
2014/07/08 Python
python Celery定时任务的示例
2018/03/13 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
挂职思想汇报
2013/12/31 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
单方投资意向书
2015/05/11 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python