根据分数输出等级

来源：互联网发布：linux使用编辑：程序博客网时间：2024/05/01 09:07

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>计算成绩等级</title>    <link rel="stylesheet" type="text/css" href="score2.css"></head><body>    <div class="input-area">        <input id="score" class="score" type="text" placeholder="请输入学生成绩(0-100之间的数字)">        <button id="calculate-btn" class="calculate-btn">计算成绩等级</button>    </div>    <div id="result" class="result"></div></body><script type="text/javascript" src="score2.js"></script></html>

CSS文件

*{    margin: 0;    padding: 0;}.input-area{    width: 301px;    height: 22px;    margin: 0 auto;    margin-top: 60px;}.score{    width: 200px;    height: 20px;    border: 1px solid #ccc;    border-right: 0;    outline: none;    font-size: 0.7em;    float: left;}.calculate-btn{    width: 100px;    height: 22px;    border: 0;    outline: none;    background-color: lawngreen;    color: white;    font-size:0.7em;    float: left;}.result{    width: 80px;    height: 80px;    border: 1px solid #ccc;    margin: 0 auto;    margin-top: 20px;    background-color: lightgreen;    text-align: center;    line-height: 80px;    color: white;    font-size: 1.6em;}

JavaScript文件

var scoreText = document.getElementById("score");scoreText.onfocus = function () {    this.style.border = "1px solid lawngreen";    this.style.borderRight = "0";}scoreText.onblur = function () {    this.style.border = "1px solid #ccc";    this.style.borderRight = "0";}var calculateBtn = document.getElementById("calculate-btn");calculateBtn.onmouseover = function () {    this.style.background = "darkgreen";}calculateBtn.onmouseout = function () {    this.style.background = "lawngreen";}calculateBtn.onmousedown = function () {    this.style.background = "darkgreen";}calculateBtn.onmouseup = function () {    this.style.background = "lawngreen";}var resultText = document.getElementById("result");calculateBtn.onclick = function () {    if(scoreText.value.length < 1    || isNaN(scoreText.value)    || scoreText.value < 0 || scoreText.value > 100) {        scoreText.focus();        resultText.innerText = "";        alert("q请输入0-100之间的数");        return;    }    var score = scoreText.value;    score = Math.floor(score / 10);    switch(score) {        case 10:        case 9:            resultText.innerText = "A";            break;        case 8:            resultText.innerText = "B";            break;        case 7:            resultText.innerText = "C";            break;        case 6:            resultText.innerText = "D";            break;        default:            resultText.innerText = "E";            break;    }}window.onload = function () {    scoreText.focus();}

0 0