热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JavaScript打印杨辉三角

1、什么是杨辉三角?111121133114641上面就是一个简单的杨辉三角的例子观察一下,第n行有n个元素,第n行的第一个元素和第n个元素为1,

1、什么是杨辉三角?


1 1 
1 2 1 
1 3 3 1 
1 4 6 4 1 

上面就是一个简单的杨辉三角的例子

观察一下,

第n行有n个元素,

第n行的第一个元素和第n个元素为1,

其他元素,假设为第n行第m个元素,则其值为第n-1行第m-1个元素+第n-1行第m个元素。

 

2、附上代码

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>杨辉三角title>

    <style type="text/css">
        
        div#container{
            width: 300px;
            margin: 0 auto;
        }

    style>
head>
<body>

<div id="container">
    
        <div>
        <input type="text" placeholder="输入行数" id="input"/>
    div>

    <div>
        <br/>
        <button id="post" >打印杨辉三角button>
    div>
div>

    <script type="text/Javascript">
        
        var input = document.getElementById("input");
        var submit = document.getElementById("post");

        submit.onclick = function(){

            var inputvValue = input.value;
            var lineNumber = parseInt(inputvValue);

            if(!lineNumber){
                alert("您的输入是"+inputvValue+",有误,请重新输入!");
            }
            else{

                //新建数组,放置杨辉三角
                var array = new Array(lineNumber);

                for(var k=0;k<lineNumber;k++){
                    array[k] = new Array();
                }

                var type = "";

                for(var i=0;i<lineNumber;i++){

                    for(var j=0;j<=i;j++){

                        //每一行首尾两个元素赋值为1
                        if(0 == j || i == j){
                            array[i][j] = 1;
                            type+=array[i][j]+" ";
                        }
                        //其他元素为上一行前一列元素上一行这一列元素
                        else {
                            array[i][j] = array[i-1][j-1] + array[i-1][j];

                            type+=array[i][j]+" ";
                        }

                    }
                        type+="
"; } var container = document.getElementById("container"); container.innerHTML+=type; } }; script> body> html>

 

3、额外发现的问题

上面代码的click事件只能被触发一次,想再次打印需要刷新,是因为使用innerHtml,使得html被重新加载,里面绑定的事件不见了。

 

解决方法是不用innerHtml,而是生成节点插入

 

            var text = document.createTextNode(type);
            container.appendChild(text);

 

而代码没有修改是因为如果生成节点的话,"
"会被当做文本插入,而不会换行,所以不采用这种方法。

但是呢,下一次碰到采用innerHtml且click事件只能被触发一次时,就能用上述这种方法了。

 

 

本文由作者原创,有什么错误欢迎指教,转载请注明出处http://www.cnblogs.com/kerita/p/5280868.html


推荐阅读
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 自动轮播,反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter,并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • 个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
  • springmvc学习笔记(十):控制器业务方法中通过注解实现封装Javabean接收表单提交的数据
    本文介绍了在springmvc学习笔记系列的第十篇中,控制器的业务方法中如何通过注解实现封装Javabean来接收表单提交的数据。同时还讨论了当有多个注册表单且字段完全相同时,如何将其交给同一个控制器处理。 ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • [大整数乘法] java代码实现
    本文介绍了使用java代码实现大整数乘法的过程,同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率,并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • PDO MySQL
    PDOMySQL如果文章有成千上万篇,该怎样保存?数据保存有多种方式,比如单机文件、单机数据库(SQLite)、网络数据库(MySQL、MariaDB)等等。根据项目来选择,做We ... [详细]
  • 本文介绍了在iOS开发中使用UITextField实现字符限制的方法,包括利用代理方法和使用BNTextField-Limit库的实现策略。通过这些方法,开发者可以方便地限制UITextField的字符个数和输入规则。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • Java图形化计算器设计与实现
    本文介绍了使用Java编程语言设计和实现图形化计算器的方法。通过使用swing包和awt包中的组件,作者创建了一个具有按钮监听器和自定义界面尺寸和布局的计算器。文章还分享了在图形化界面设计中的一些心得体会。 ... [详细]
  • ①页面初始化----------收到客户端的请求,产生相应页面的Page对象,通过Page_Init事件进行page对象及其控件的初始化.②加载视图状态-------ViewSta ... [详细]
author-avatar
手机用户2602933165
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有