效果如下
HTML代码
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>勒让德多项式</title> <link rel="stylesheet" href="styles.css">
</head>
<body> <div class="app-container"> <input type="text" id="input1" placeholder="输入n" onblur="check('input1','int')"> <input type="text" id="input2" placeholder="输入x" onblur="check('input2','num')"> <button id="submitBtn" onclick="fun()">提交</button> <p id="shizi"></p> <!--显示式子--><p id="result"></p> <!--显示代入x之后的结果--></div> <script src="script.js"></script><script>//计算阶乘function factorial(n) {let result = 1;for (let i = 2; i <= n; i++) {result *= i;}return result;}function fun(){var n=document.getElementById("input1").value;var x=document.getElementById("input2").value;n=parseInt(n)x=parseFloat(x)const M=Math.floor(n/2)let result=0.0,xishu;var m,str;for(m=0;m<=M;m++){xishu=factorial(2*n-2*m)/factorial(m)/factorial(n-m)/factorial(n-2*m)/Math.pow(2,n);if(m==0){str=`P<sub>${n}</sub>=${xishu}x<sup>${n}</sup>`result=xishu*Math.pow(x,n-2*m)}else{if(m%2==0){result+=xishu*Math.pow(x,n-2*m);str+=`+${xishu}x<sup>${n-2*m}</sup>`}else{result-=xishu*Math.pow(x,n-2*m);str+=`-${xishu}x<sup>${n-2*m}</sup>`}}}document.getElementById("shizi").innerHTML=str //如果str中内嵌了HTML语句就可以正常显示document.getElementById("result").innerText=`结果：${result}`}</script>
</body>
</html>script.js的代码如下，包含了检查输入的代码
// 检查输入，str为输入框的id，class1是判断的类别
//当不是正常的输入就弹出警告框，清空并回到有问题的输入框
function check(str,class1){var input1 = document.getElementById(str);var inputValue = input1.value.trim();if(class1=='int'){// 检查是否为整数if (!Number.isInteger(Number(inputValue))) {confirm('警告：请输入一个整数！')document.getElementById(str).value=''input1.focus();}}else if(class1=='num'){// 检查是否为数if (isNaN(Number(inputValue))) {confirm('警告：请输入一个有效的数字！')input1.focus(); // 让光标回到输入框document.getElementById(str).value=''}}
}css代码参考一个可以搜索页面内超链接的HTML页面-CSDN博客