这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现输出指定行数正方形图案的方法, 可实现 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>
- <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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0420/270161.html