如何用JavaScript制作循环图形

【图题思路】
            
 1.确定图形一共几行,即为外层的循环的次数
 2.确定每行有几种元素,代表有几个内层循环
 3.确定每种元素的个数,即为每个内层循环的次数
Tips:通常,找出每种元素的个数与行号的关系,即为当前内层循环的最大值

长方形:每行循环5次,再循环5行

<script type="text/javascript">
            
            
            for(var a=1;a<=5;a++){
                for(var b=1;b<=5;b++){
                    document.write("*");
                }
                document.write("<br />")
            }
            
            
            
        </script>

直角三角形:类似长方形,只不过行内循环次数与行次相等

<script type="text/javascript">
            
            
            for(var a=1;a<=5;a++){
                for(var b=1;b<=a;b++){
                    document.write("*");
                }
                document.write("<br />")
            }
            
            
            
        </script>

平行四边形:先设计一个随行次增加的空格循环,加在长方形内

<script type="text/javascript">
            
                
            for(var a=1;a<=5;a++){
                for(var c=1;c<a;c++){
                    document.write("&nbsp&nbsp")
                }
                
                for(var b=1;b<=5;b++){
                    document.write("*");
                    
                }
                document.write("<br/>")
                
                
            }
           
        </script>

菱形:分为上下两部分,上面部分类似于平行四边形结构,找到*数目与行次的关系为2n-1,完成上面循环。下半部分将上部分反过来。

<script type="text/javascript">
            
            for(var a = 1;a<=7;a=a+2){
                for(var c=1;c<=(7-a)/2;c++){
                    document.write("&nbsp&nbsp")
                }
                
                
                
                for(var b = 1;b<=a;b=b+1){
                    document.write("1")
                }
                
                document.write("<br />")
            }
            for(var a = 5;a>=1;a=a-2){
                for(var c=1;c<=(7-a)/2;c++){
                    document.write("&nbsp&nbsp")
                }
                for(var b = 1;b<=a;b=b+1){
                    document.write("1")
                }
                document.write("<br />")
            }
            
            
 </script>

数字等边三角形:类似于菱形上半部分,但是要分为左右两个循环,左侧为递增,个数为行次,右侧为递减个数为行次-1

<script type="text/javascript">
            
            var d;
            
            
            for(var a = 1;a<=7;a=a+2){
                for(var c=1;c<=(7-a)/2;c++){
                    document.write("&nbsp&nbsp")
                }
                
                for(var b = 1;b<=(a+1)/2;b=b+1){
                    document.write(b)
                }
                
                for(var b = (a-1)/2;b>=1;b=b-1){
                    document.write(b)
                }
                
                document.write("<br />")
            }
            
            
            
   </script>

九九乘法表

<script type="text/javascript">
            
            document.write("<table border=‘1px‘ bordercolor=‘black‘ align=‘center‘>" )
            for(var a = 1;a<=9;a++){
                
                document.write("<tr>")
                for(var b =1,c=1,e=b*c; b<=a;b++,c++){
                    document.write("<td>"+b+"*"+c+"="+e+"</td>")
                }
            
                
                document.write("</tr>")
            }
            
            document.write("</table>")
            
            
        </script>

时间: 2024-10-19 16:16:27

如何用JavaScript制作循环图形的相关文章

如何用iframe标签以及Javascript制作时钟?

如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面来讲: javascript中的Date引用类型 几种效果不佳的实例 <iframe>标签 最终不错的效果实例 如果大家想直接看最终不错的效果实例,可以直接点击这里. 第一部分:Date引用类型 1.日期对象可以直接使用new操作符和Date构造函数构造.代码如下: var date=new Da

如何用JavaScript提取URL中的用户信息

比如传递的URL为:http://localhost//a.html?username=aa&password=12,如何用JavaScript提取其中的username和password数据呢?具体方法参考[1]如下所示: 1 function getQueryStringArgs() { 2 // 取得查询字符串并去掉开头的问好 3 var qs = (location.search.length > 0 ? location.search.substring(1) : "&q

如何用PR制作火爆抖音上的上下滑动视频

最近抖音上的,上下滑动视频非常火爆,那么这样的视频是如何制作的呢?在做之前我们需要将视频准备好,不管你是下载的视频,还是录制的视频都需要准备好,还有文字内容也准备一下最好,接下来我们就来分享一下图文制作方法. https://www.macdown.com 先看一下最终的效果,如图 1. 首先打开Premiere软件,新建项目-名称(自己命名),位置(浏览找个合适的位置存放)然后点确定: 2.新建序列-点文件-新建序列-序列预设-AVCHD-1080P-AVCHD 1080P25(1920*10

如何利用iframe标签以及Javascript制作时钟?

如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面来讲: javascript中的Date引用类型 几种效果不佳的实例 <iframe>标签 最终效果不错的实例 如果大家想直接看最终不错的效果实例,可以直接点击这里. 第一部分:Date引用类型 1.日期对象可以直接使用new操作符和Date构造函数构造.代码如下: 1 var date=new

如何用javascript获取UUID

由于javascript是单线程的东西,所以我们放一个累加变量作为id也不会重复. 但其实javascript本身提供了可以获得唯一id的东东.还记得setTimeout()方法会返回一个唯一id用来后来清除定时器,我们不妨就借用这个id吧. function getUUID() { var id = setTimeout('0'); clearTimeout(id); return id; }; 如何用javascript获取UUID,布布扣,bubuko.com

定时器运行原理 &amp;&amp; javascript事件循环模型

定时器是我们经常使用的一个异步函数,它的用处十分广泛,比如图片轮播.各种小的动画.延时操作等等:定时器函数只有两个setTimeout.setInterval,这两个工作原理相同,唯一的区别是:setTimeout只执行一次,setInterval循环执行:通过以下实例看看对定时器原理掌握程度: 定时器3个实例 首先声明这三个实例输出皆不同,先思考输出结果,以及为何不同 实例一: console.log('test1') for(var i=0;i<10;i++){ setTimeout(()=

纯css3样式属性制作各种图形图标

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

如何用PhotoShop制作网站的favicon.ico

所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.当然,这不仅仅是Favicon的全部,根据浏览器的不同,Favicon显示也有所区别:在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中,favicon不仅在收藏夹中显示,还会同时出现在地址栏上,这时用户可以拖曳favicon到桌面以建立到网站的快捷方式:除此之外,标签式浏览器甚至还有不少扩展的功能,如Fir

Javascript 数组循环遍历之forEach

Javascript 数组循环遍历之forEach 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2.  forEach 函数. Firefox 和Chrome 的Array 类型都有forEach的函数.使用如下: [html] view plain copy <!--Add by oscar999--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD