解一个一元二次方程
js
function test() {
//定义两个变量,用来储存解
let x1
let x2
//定义当个系数的变量,用来存储系数
let a = document.getElementById("a").value
let b = document.getElementById("b").value
let c = document.getElementById("c").value
//函数部分
//根的判别式
let delt = b * b - 4 * a * c;
if (delt > 0) {
x1 = (-b + Math.sqrt(delt)) / (2 * a);
x2 = (-b - Math.sqrt(delt)) / (2 * a);
} else if (delt == 0) {
x1 = -b / (2 * a);
x2 = -b / (2 * a);
} else if (delt < 0) {
x1 = '无解';
x2 = '无解';
} else {
x1 = '请输入正确的数值';
x2 = '请输入正确的数值';
}
//导出到页面中
document.querySelector(".bar-chart--text1").innerHTML = x1;
document.querySelector(".bar-chart--text2").innerHTML = x2;
}
html
<main>
<div>
<div class="animate" style="background: url(./images/QQ图片20220728144739.jpg) no-repeat; ">
</div>
</div>
<div class="function">
<input id="a" type="text" name="a" value="">
<span>x^2</span>
<input id="b" type="text" name="b" value="">
<span>x</span>
<input id="c" type="text" name="c" value="">
<span> = 0</span>
<input type="submit" value="提交" onclick="test()">
<div id="chart1">
<b>x1: </b><span class="bar-chart--text1"></span>
<b>x2: </b><span class="bar-chart--text2"></span>
</div>
</div>
</main>
css
body {
background: rgb(217, 217, 219);
}
.framework {
width: 80%;
height: 100vh;
background: #fff;
margin: 0 auto;
padding: 100px;
}
main {
width: 460px;
height: 580px;
padding-top: 70px;
border: 1px solid black;
position: relative;
}
.animate {
margin: 0 auto;
width: 121.75px;
height: 270px;
animation: snowman 331ms infinite;
animation-timing-function: steps(3);
}
.function {
position: absolute;
bottom: 100px;
width: 60%;
margin: 0 20%;
}
.function span{
margin-right: 5px;
}
input {
width: 40px;
text-align: center;
}
#chart1 {
margin-top: 10px;
border: 1px solid black;
overflow: hidden;
padding: 5px;
}
#chart1 span {
/* width: 50px; */
height: 20px;
/* vertical-align: middle; */
display: block;
margin-bottom: 10px;
text-align: center;
border: 1px solid black;
}
@keyframes snowman {
0% {
background-position: 0px 0;
}
/* 0% {
background-position: 0px 0;
} */
50% {
transform: scaleY(1.5);
}
100% {
background-position: -365.25px 0;
}
}