H5+javascript根据输入成绩，自动生成成绩等级

最新推荐文章于 2025-04-12 22:57:37 发布

qq_43717970

最新推荐文章于 2025-04-12 22:57:37 发布

阅读量2k

点赞数 1

分类专栏： JavaScript入门笔记文章标签： javascript css html html5

本文链接：https://blog.youkuaiyun.com/qq_43717970/article/details/115269192

版权

本文介绍了如何利用HTML5和JavaScript根据用户输入的成绩，实时计算并显示对应的等级。通过结合CSS美化界面，实现了一个交互式的成绩等级转换工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<title>成绩录入</title>

<style>
    table{
        border: 1px solid;
    }

</style>
<script>

function getGrade(){
    var x=score.value;
    if(x>=90){
        grade.value="优秀";
    }else if(x>=80){
        grade.value="良好";
    }else if(x>=70){
        grade.value="还行";
    }else if(x>=60){
        grade.value="及格";
    }else{
        grade.value="不及格";
    }
}
</script>
<body>
    <form action="#" method="GET">
        <table align="center">
            <tr>
                <td>成绩</td>
                <td><input type="number" max="100" min="0" id="score"></td>
            </tr>
            <tr>
                <td>等级</td>
                <td><input type=