如何使用JavaScript，HTML5和CSS创建阶乘表

最新推荐文章于 2022-12-22 10:48:16 发布
最新推荐文章于 2022-12-22 10:48:16 发布
阅读量377 收藏 1
点赞数
文章标签： javascript ViewUI

大家好。 在本文中，我将向您展示一种打印0-20范围内整数的阶乘表的方法。 请注意，使用此处提供的代码没有任何保证。 我们将使用JavaScript，HTML5和CSS。 要了解有关析因的更多信息，请查看以下链接：

http://en.wikipedia.org/wiki/Factorial 。

正整数n（n> = 1）的阶乘由乘积n *（n-1）*（n-2）* ... * 1给出，其中乘以1可以省略，因为它不会在我们的实施中有所作为。 同样，阶乘0被定义为1。首先将显示整个代码，然后我们将逐步进行介绍： 

<!DOCTYPE html> 
<html lang="en">
    <head>
        <title>Factorials Table</title>
        <meta charset="utf-8">
        <!-- CSS styling: -->
        <style type="text/css">
            table
            {
                border-spacing: 0;
                font-family: Consolas;
                font-size: 1.2em;
                text-align: right;
            }
        </style>
        <!-- JavaScript code: -->
        <script>
            var n; 
            /* Starts table: */
            document.writeln( "<table>" ); 
            /* Table's head section: */
            document.writeln( "<thead style='background-color: red; color: yellow'>" );
            document.writeln( "<tr>" );
            document.writeln( "<th>n</th>" );
            document.writeln( "<th>n!</th>" );
            document.writeln( "</tr>" );
            document.writeln( "</thead>" ); 
            /* Table's body section: */
            document.writeln( "<tbody>" );
            for ( n = 0 ; n <= 20 ; ++n )
            {
                if ( n % 2 == 0 ) /* Starts new row with black background and white font: */
                {
                    document.writeln( "<tr style='background-color: black; color: white;'>" );
                }
                else /* Starts new row with blue background and yellow font: */
                {
                    document.writeln( "<tr style='background-color: blue; color: yellow;'>" );
                } 
                /* First column of the current row: */
                document.writeln( "<td>" + n + "</td>" ); 
                /* Second column of the current row: */
                document.writeln( "<td>" + factorial( n ) + "</td>" ); 
                /* Finishes current row: */
                document.writeln( "</tr>" );
            }
            document.writeln( "</tbody>" ); 
            /* Finishes table: */
            document.writeln( "</table>" ); 
            /* Calculates n!: */
            function factorial( n )
            {
                var counter;
                var fact = 1; 
                if ( n < 0 ) /* Invalid argument to function factorial. */
                {
                    return -1;
                }
                else
                {
                    if ( n >= 1 )
                    {
                        for ( counter = 2 ; counter <= n ; ++counter )
                        {
                            fact *= counter;
                        }
                    } 
                    return fact;
                }
            }
        </script>
    </head> 
    <body></body>
</html>
第1行指定页面的！DOCTYPE ； 在这种情况下，我们指定html ，这意味着该页面是（假设是）HTML5。 <!DOCTYPE html>
第3行开始html标记<html lang="en">
<html lang="en">
第86行关闭了HTML标记</html>
</html>
第4至83行指定页面的head元素。 <head>
. . . . .
</head>
第5行指定页面的标题 。 <title>Factorials Table</title>
第6行指定使用的字符编码。 <meta charset="utf-8">

第8-16行指定页面的样式。 在此页面中，我们仅对

表格元素如下：边框中的间距选择为0 ； font-family是Consolas ，但是如果用户没有这样的字体，我们可以指定更多字体； 选择font-size为1.2em ； 最后，将文本选择为在表格的每个单元格内向右对齐。 我们将很快看到，通过JavaScript代码使用内联样式指定了样式的更多特征。 
<style type="text/css">
            table
            {
                border-spacing: 0;
                font-family: Consolas;
                font-size: 1.2em;
                text-align: right;
            }
        </style> 
第18-82行包含执行表的计算和输出JavaScript代码。 让我们从第60-81行中定义的阶乘函数开始。 该函数首先声明变量counter和fact ; 事实被初始化为值1，并且计数器将从2变化至n（函数的唯一参数，其阶乘期望被计算）的情况下， 实际上需要改变（它不会如果n <= 0）。 第65-68行检查n是否为负数，如果是，则使该函数返回-1，以表示它接收到无效的，非正整数作为参数。 这不会在我们的页面上发生，但是在工业强度代码中进行错误检查很重要。 如果n> = 0，则使用第69-80行。 如果n为0 ，那么事实应该保持为1 ，并且不执行任何计算。 否则，第73-76行计算n的阶乘。 注意， 计数器从2开始-我们不需要将事实乘以1 。 第79行返回结果。

至于其余的代码，我们有以下内容。 第19行包含以下内容的声明：

n-将要计算其阶乘的变量。 它将在0到20之间变化。第21行输出表开头的标记，在第57行结束。第25-30行输出表的头部，第33-53行输出表的主体，为每个值调用函数阶乘。 n 。

From: https://bytes.com/topic/html-css/insights/956601-how-create-factorials-table-javascript-html5-css

cxygs5788
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中实现阶乘（多种方法）以及阶乘求和
weixin_44880730的博客
08-31 2万+
JS实现阶乘的三种方法for循环while循环do-while循环 for循环 var str="for循环实现10的阶乘"; document.write("<h1>"+str+"</h1>"); var s=0; for(var n=1;n<=10;n++){ function sum(n){ if(n<=1){ return 1 }else{ /*return n*
02-求阶乘.html
09-03
02-求阶乘
html5求6的阶乘,.net 求数的阶乘
weixin_34288514的博客
06-21 266
.net 求数的阶乘using System;namespace TestConsoleApp{class Program{static void Main(string[] args){int inputNubmer;string result;int resultNumber = 1;Console.WriteLine("请输入一个整数,求整数的阶乘:");inputNubmer = Conv...
使用HTML计算阶乘
weixin_51369307的博客
08-09 2355
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <tr> <td> <input type="text" id="num"/> </td> <td.
计算n的阶乘n可输入
upup
05-10 1989
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> //计算n的阶乘n可输入 <script type = "text/...
html语言用循环求阶乘,JavaScript使用while for循环、递归实现阶乘
weixin_42538175的博客
05-31 1580
【实现方法】1.利用while循环来做，当然for循环也可以。2.递归【代码内容】偷懒，直接用onkeyup事件来限制来页面的输入循环代码：//第一种方法 while循环oCount.onclick = function (){var oNum = document.getElementById('num').value;oNum = Number(oNum);if(oNum <= 1){o...
JS实现求5的阶乘示例
12-10
为了验证这些代码，你可以使用在线HTML/CSS/JavaScript代码运行工具，如提到的`http://tools.jb51.net/code/HtmlJsRun`，输入上述代码并运行，观察结果。 在JavaScript中，了解如何计算阶乘对于理解循环和递归这两...
javascript_study:用CodeSandbox创建
04-05
CodeSandbox则是一个在线的代码编辑器，专为创建、分享和协作Web应用程序而设计，特别是在React、Vue、Angular等现代JavaScript框架中非常受欢迎。在这个“javascript_study:用CodeSandbox创建”的项目中，我们将...
factorial:使用BDD进行JavaScript开发
05-10
使用的技术HTML，CSS，JavaScript，jQuery，Mocha和Chai进行测试合法的版权所有（c）2015 Logan Wu 该软件已获得MIT许可。 特此免费授予获得此软件和相关文档文件（“软件”）副本的任何人无限制地处理软
freeCodeCamp:freeCodeCamp JavaScript算法和数据结构认证等课程
03-13
2. **操作符与表达式**：包括算术、比较和逻辑操作符，以及如何使用它们来创建表达式，进行基本的数学计算和条件判断。 3. **控制流**：通过`if...else`语句、`switch`语句和循环（如`for`、`while`）控制程序执行...
前端面试题之js运算符
taiwuyang的博客
01-07 651
1、阶乘 请补全JavaScript函数，要求返回数字参数的阶乘。注意：参数为大于等于0的整数。 function factorial(number) { // 补全代码 } //根据题目要求实现一个阶乘函数，阶乘是所有小于及等于该数的正整数的积，并且0的阶乘为1。 //函数内部条件判断为: //1.当参数等于0时，返回1 //2.当参数不等于0时，返回当前值与factorial(当前值 - 1)的积 function factorial(number) { if(num
html语言求阶乘,页面上输入任意数字，点击按钮后计算阶乘。 - 背壳前进的牛...
weixin_29021195的博客
05-31 547
// 使用函数完成任意数字阶乘的计算。// 要求：页面上输入任意数字，点击按钮后计算阶乘。function $ (id){return document.getElementById(id);}//使用$代替document.getElementById()是为了减少代码的重复率。window.onload = function (){oNum = $('num');oButt = $('butt...
html编写阶乘,阶乘的实现
weixin_33162568的博客
06-22 1142
一个数的阶乘当这个数 = 1的时候，算式为：1 * (1 - 0) = 1，所以1的阶乘就是1当这个数 = 2的时候，算式为：2! = 2 * 1 = 2 * (2 - 1) = 2，所以2的阶乘就是前2个数为特殊情况假设这个数为nn = 1 ， n! = 1 * (1 - 0)n = 2，n! = 2 * (2 - 1)n = 3，n! = 3 * (3 - 1) * (3 - 2)....等等...
html5中的阶乘,JS实现求5的阶乘示例
weixin_40001025的博客
06-28 1015
本文实例讲述了JS实现求5的阶乘运算操作。分享给大家供大家参考，具体如下：方案一：利用while循环function factorial(num){var result = 1;while(num){result *= num;num--;}return result;}console.log(factorial(5))//120运行结果：方案二：利用函数递归function factorial(...
html 自动计算,HTML5+CSS3从入门到精通 页面上输入任意数字自动计算阶乘如何实现...
weixin_29309213的博客
05-30 562
本篇教程探讨了HTML5+CSS3从入门到精通 页面上输入任意数字自动计算阶乘如何实现，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。<html>//使用函数完成任意数字阶乘的计算。//要求：页面上输入任意数字，点击按钮后计算阶乘。function$(id){returndocument.getElementById(id);}//使用$代替d...
JavaScript求阶乘的八种方法
qq_42526440的博客
02-22 6172
//方法一 尾递归的优化 //构建一个带尾递归的函数。因为它会返回自身调用的结果，所以它是尾递归 //JavaScript 当前没有对这种形式的递归做出优化 var factorial = function factorial(i, a) { console.log(i, a); a = a || 1; console.log(i, a); if (i < 2) { return a; } // return factorial(i-
html语言用循环求阶乘,js_中利用递归求阶乘及斐波那契
weixin_39942108的博客
06-03 538
Document/*递归:函数自己调用自己 停不下来需要有 跳出的条件/*使用递归 求和 1 到 n 的和假设 我们 已经封装好了一个函数 fn首先找规律n=1: 1n=2: 1+2 ->fn(1)+2n=3: 1+2+3 -->fn(2)+3n=4: 1+2+3+4 -->fn(3)+4 -> fn(2)+3+4 -> fn(1)+2+3+4->1+2+...
JavaScript 中求阶乘
m0_54829066的博客
12-22 2770
在 JavaScript 中求阶乘，可以使用递归函数来实现。最后，所有这些递归调用将返回他们的结果，并且最终结果是。语句，当传递给函数的参数。在上面的代码中，我们调用了。例如，可以定义一个名为。的函数，其中包含一个。，这就是阶乘的结果。
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2027
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
javascript html求n的阶乘
最新发布
09-20
### 回答1： 以下是使用JavaScript和HTML编写的求n的阶乘的代码： <!DOCTYPE html> <html> <head> <title>求n的阶乘</title> </head> <body> <h1>求n的阶乘</h1> <p>请输入一个正整数n：</p> <input type="text" id="num"> <button onclick="factorial()">计算</button> <p id="result"></p> <script> function factorial() { var n = parseInt(document.getElementById("num").value); var result = 1; for (var i = 1; i <= n; i++) { result *= i; } document.getElementById("result").innerHTML = n + "的阶乘为：" + result; } </script> </body> </html> 用户输入一个正整数n，点击“计算”按钮后，JavaScript代码会计算n的阶乘，并将结果显示在页面上。 ### 回答2： 阶乘是指一个数和它之前所有正整数的乘积。而求n的阶乘，可以通过递归或迭代的方式实现。 递归的方式可以通过定义一个函数，每次将n乘以前一个数的阶乘来递归计算，直到n为1时返回1。具体代码如下所示： ```javascript function factorial(n) { if (n === 1) { return 1; } return n * factorial(n-1); } // 示例 console.log(factorial(5)); // 输出 120 console.log(factorial(6)); // 输出 720 ``` 迭代的方式可以使用一个变量来累积乘积，从1开始逐步乘以2, 3, ..., n，直到n为止。具体代码如下所示： ```javascript function factorial(n) { let result = 1; for (let i = 2; i <= n; i++) { result *= i; } return result; } // 示例 console.log(factorial(5)); // 输出 120 console.log(factorial(6)); // 输出 720 ``` 这两种方法都可以求得n的阶乘，但在实际应用中，迭代的方式更常用，因为它的性能更好，不会因为递归调用导致爆栈的问题。 ### 回答3： 下面是使用 JavaScript 和 HTML 编写的计算 n 的阶乘的示例代码： ```html <!DOCTYPE html> <html> <body> <h2>计算阶乘</h2> <p>请输入一个整数n：</p> <input id="num" type="number"> <button onclick="calculateFactorial()">计算</button> <p id="result"></p> <script> function calculateFactorial() { var num = document.getElementById("num").value; var result = 1; for (var i = 1; i <= num; i++) { result *= i; } document.getElementById("result").innerHTML = "阶乘结果：" + result; } </script> </body> </html> ``` 这段代码在页面上显示一个输入框，用户可以输入一个整数 n，并点击一个按钮来计算 n 的阶乘。计算阶乘的函数 `calculateFactorial` 首先获取用户输入的数值，然后使用一个 for 循环来计算阶乘。最后，将计算结果显示在页面上。 注意，这段代码假设用户输入的是一个正整数，并且没有对无效输入进行错误处理。如果需要更完整的错误处理，可以添加额外的代码来验证输入是否有效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值