效果如下
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博客
