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 相关文章推荐
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
js树形控件脚本代码
2008/07/24 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
python实现朴素贝叶斯算法
2018/11/19 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
python如何制作英文字典
2019/06/25 Python
python实现多线程端口扫描
2019/08/31 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
人力资源管理毕业生自荐信
2013/11/21 职场文书
教育学习自我评价
2014/02/03 职场文书
会计专业导师推荐信
2014/03/08 职场文书
毕业生评语大全
2015/01/04 职场文书
保送生自荐信
2015/03/06 职场文书
校车司机安全责任书
2015/05/11 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书