解一个一元二次方程

解一个一元二次方程

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;
    }

}