NENU Exercise Demo web小作业（GPA查询页面）做题笔记

最新推荐文章于 2024-09-27 15:52:57 发布

哆哆啦00

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量184

点赞数

文章标签：前端笔记 javascript

本文链接：https://blog.csdn.net/florae006/article/details/131205017

版权

该页面实现了根据用户选择显示不同的问卷，用于输入课程成绩并计算GPA。通过JavaScript动态创建和切换问卷，根据用户选择的课程和成绩计算平均绩点，并给出相应的申请建议。页面布局使用CSS保持居中，同时提供了评价按钮的样式定义。

摘要由CSDN通过智能技术生成

题目

题面：

我们要实现以下两个页面：
在这里插入图片描述

题目分析

我们把整体页面分为三个部分：第一个选择、问卷成绩选择、GPA相关的建议

格式预备

我们要让整个表格在页面正中间，且文字垂直居中。所以先设置一个主体div盒子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    #bodybox{
	    position: absolute;
	    top: 0px;
	    bottom: 0px;
	    right: 0px;
	    left: 0px;
	    margin: auto;
	    height: 700px;
	    width: 600px;
	    text-align: center;//使文字居中
	    border: 5px solid;
	}
</style>
    <title>GPA查询页面</title>
</head>
<body>
    <br><br>
    <h4 style="text-align: center;">Eligibility Form</h4>
    <div id="bodybox"></div>
</body>
</html>

CSS中的这部分可以使盒子居中：

#bodybox{
	    position: absolute;
	    top: 0px;
	    bottom: 0px;
	    right: 0px;
	    left: 0px;
	    margin: auto;
	}

效果如图：
在这里插入图片描述

第一部分（第一个选择）

这里我们要实现的是根据选项是Undergraduate还是Graduate分别呈现如图两种不同的问卷。我们先写好Undergraduate/Graduate的选择。

<div id="firstbox">
            <h4>Select your staus and click "Submit"</h4>
            <input type="radio" name="ans1" id="ungra" onclick="createbox1()"><label for="ungra">Undergraduate</label> 
            <input type="radio" name="ans1" id="gra" onclick="createbox2()"><label for="gra">Graduate</label> 
</div>

使用<label>标签可以使用户在点击文字时也可以选中单选框，否则只能在点击选项点时才能选中，记得给两个radio设置相同的name。

第二部分（问卷成绩选择）

这里就是js动态地切换相关问卷了。
我们可以先把对应的两个问卷写好：
问卷1html代码：

<!-- 问卷1 -->
<div>
	  <h4>Select your grade and click "Evluate"</h4>
	  <p>CSE 3203 Mobile System Overview</p>
	  <select name="questa" id="qta">
	      <option value="A">A</option>
	      <option value="B">B</option>
	      <option value="C">C</option>
	      <option value="D">D</option>
	      <option value="F">F</option>
	  </select>
	  <p>IT 4213 Mobile Web Development</p>
	  <select name="questb" id="qtb">
	      <option value="A">A</option>
	      <option value="B">B</option>
	      <option value="C">C</option>
	      <option value="D">D</option>
	      <option value="F">F</option>
	  </select>
	  <p>IT 4203 Advanced Web Development</p>
	  <select name="questc" id="qtc">
	      <option value="A">A</option>
	      <option value="B">B</option>
	      <option value="C">C</option>
	      <option value="D">D</option>
	      <option value="F">F</option>
	  </select>
	  <p>IT 3883 Advanced Application Development</p>
	  <select name="questd" id="qtd">
	      <option value="A">A</option>
	      <option value="B">B</option>
	      <option value="C">C</option>
	      <option value="D">D</option>
	      <option value="F">F</option>
	  </select>
	  <p>IT 3123 Hardware and Software Concepts</p>
	  <select name="queste" id="qte">
	      <option value="A">A</option>
	      <option value="B">B</option>
	      <option value="C">C</option>
	      <option value="D">D</option>
	      <option value="F">F</option>
	  </select>
	  <br><br>
      <div>
           <button type="submit" id="subbtn" onclick="ShowAdvice()">Evluate</button>
      </div>
      <p id="adv"></p>
 </div>

问卷2html代码：

<!-- 问卷2 -->
<div>
	 <h4>Select your grade and click "Evluate"</h4>
	 <p>IT 7113 Data Visualization</p>
	 <select name="questa" id="">
	     <option value="A">A</option>
	     <option value="B">B</option>
	     <option value="C">C</option>
	     <option value="D">D</option>
	     <option value="F">F</option>
	 </select>
	 <p>IT 6713 Business Intelligence</p>
	 <select name="questb" id="">
	     <option value="A">A</option>
	     <option value="B">B</option>
	     <option value="C">C</option>
	     <option value="D">D</option>
	     <option value="F">F</option>
	 </select>
	 <p>IT 6773 Practical Data Analytics</p>
	 <select name="questc" id="">
	     <option value="A">A</option>
	     <option value="B">B</option>
	     <option value="C">C</option>
	     <option value="D">D</option>
	     <option value="F">F</option>
	 </select>
	 <p>IT 6733 Database Administration</p>
	 <select name="questd" id="">
	     <option value="A">A</option>
	     <option value="B">B</option>
	     <option value="C">C</option>
	     <option value="D">D</option>
	     <option value="F">F</option>
	 </select>
	 <br><br>
	 <div>
	 	<input type="button" id="subbtn" value="Evluate" onclick="ShowAdvice()">
	 </div>
	 <p id="adv"></p>
</div>

接下来我们开始写js:
我们在第一部分的单选按钮的两个选项分别添加了一个onclick事件：onclick="createbox1()"和onclick="createbox2()"
我们使用document.createElement("div")来创建一个div盒子box1。再用box1.innerHTML=''来为其快速添加内容。
代码如下：

var box1 = document.createElement("div");
box1.innerHTML = '<h4>Select your grade and click "Evluate"</h4><p>CSE 3203 Mobile System Overview</p><select name="questa" id="qta"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 4213 Mobile Web Development</p><select name="questb" id="qtb"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 4203 Advanced Web Development</p><select name="questc" id="qtc"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 3883 Advanced Application Development</p><select name="questd" id="qtd"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 3123 Hardware and Software Concepts</p><select name="queste" id="qte"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><br><br><div><input type="button" id="subbtn" value="Evluate" οnclick="ShowAdvice()"></div><p id="adv"></p>';

然后把这个div盒子添加到bodybox中：

document.getElementById("bodybox").appendChild(box1);

如何给box1盒子添加id？：

var divid = document.createAttribute("id");
divid.value = 'box1id';

设置三个变量来做判断flagbox1、flagbox2和hasbox来分别表示是两种问卷的哪一种以及是否是有问卷的状态。
我们要考虑三种情况：1.初始时无问卷。2.选中问卷一/问卷二时呈现对应问卷。3.可以自由切换问卷一和问卷二。
所以createbox1()和createbox2()函数首先要判断是否以及呈现问卷（hasbox是1或是0）
假如已有问卷二，我们可以这样移除：

if (hasbox === 1) {
        var parent = document.getElementById("bodybox");
        var child = document.getElementById("box2id");
        parent.removeChild(child);
        flagbox1 = 0;
        flagbox2 = 0;
    }

想要移除问卷一只需要将box2id改成box1id即可。
这样我们就完成了我们想要的效果。完整的两个函数如下：

var flagbox1 = 0, flagbox2 = 0, hasbox = 0;
function createbox1() {
    if (hasbox === 1) {
        var parent = document.getElementById("bodybox");
        var child = document.getElementById("box2id");
        parent.removeChild(child);
        flagbox1 = 0;
        flagbox2 = 0;
    }
    if (flagbox1 === 0) {
        var box1 = document.createElement("div");
        box1.innerHTML = '<h4>Select your grade and click "Evluate"</h4><p>CSE 3203 Mobile System Overview</p><select name="questa" id="qta"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 4213 Mobile Web Development</p><select name="questb" id="qtb"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 4203 Advanced Web Development</p><select name="questc" id="qtc"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 3883 Advanced Application Development</p><select name="questd" id="qtd"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 3123 Hardware and Software Concepts</p><select name="queste" id="qte"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><br><br><div><input type="button" id="subbtn" value="Evluate" οnclick="ShowAdvice()"></div><p id="adv"></p>';
        var divid = document.createAttribute("id");
        divid.value = 'box1id';
        box1.setAttributeNode(divid);
        document.getElementById("bodybox").appendChild(box1);
        flagbox1 = 1;
        flagbox2 = 0;
        hasbox = 1;
    }
}
function createbox2() {
    if (hasbox === 1) {
        var parent = document.getElementById("bodybox");
        var child = document.getElementById("box1id");
        parent.removeChild(child);
        flagbox1 = 0;
        flagbox2 = 0;
    }
    if (flagbox2 === 0) {
        var box2 = document.createElement("div");
        box2.innerHTML = '<h4>Select your grade and click "Evluate"</h4><p>IT 7113 Data Visualization</p><select name="questa" id="qta"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 6713 Business Intelligence</p><select name="questb" id="qtb"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 6773 Practical Data Analytics</p><select name="questc" id="qtc"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 6733 Database Administration</p><select name="questd" id="qtd"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select></div><br><br><div><input type="button" id="subbtn" value="Evluate" οnclick="ShowAdvice()"></div><p id="adv"></p>';
        var divid = document.createAttribute("id");
        divid.value = 'box2id';
        box2.setAttributeNode(divid);
        document.getElementById("bodybox").appendChild(box2);
        flagbox1 = 0;
        flagbox2 = 1;
        hasbox = 1;
    }
}

第三部分（GPA相关的建议）

这部分我们要做的就是获取上面做的表单中的选项以及进行GPA的计算和提示语句的变化。
我们写的Evluate按钮是这样的：

<div>
	<button type="submit" id="subbtn" onclick="ShowAdvice()">Evluate</button>
</div>

接下来我们写ShowAdvice()
通过以下代码我们可以获得每个下拉列表的选中选项：

var qtid = document.getElementById("qta");
var ans = qtid.options[qtid.selectedIndex].text;

再用简单的switch(){}来进行分数相加。

var gpa = 0;
switch (ans) {
    case 'A': gpa += 4; break;
    case 'B': gpa += 3; break;
    case 'C': gpa += 2; break;
    case 'D': gpa += 1; break;
    case 'F': gpa += 0; break;
}

注意：问卷一和问卷二的问题数不同。
计算完所有成绩后，把提示语句呈现在最后。

var adv = document.getElementById("adv");
if (gpa >= 3.0) 
    adv.innerHTML='Your GPA is '+gpa.toFixed(1)+'.Congratulations,your GPA has met the requirements.<br>Please follow <a href="#">the link</a> to apply.'
else
    adv.innerHTML='Your GPA is '+gpa.toFixed(1)+'.Thank you for your interest.At this time,your GPA does not meet the requirements for these positions.'

gpa.toFixed(n)可以使数据以n位小数的形式显示。
完整代码：

function ShowAdvice() {
    var gpa = 0;
    var qtid = document.getElementById("qta");
    var ans = qtid.options[qtid.selectedIndex].text;
    switch (ans) {
        case 'A': gpa += 4; break;
        case 'B': gpa += 3; break;
        case 'C': gpa += 2; break;
        case 'D': gpa += 1; break;
        case 'F': gpa += 0; break;
    }
    qtid = document.getElementById("qtb");
    ans = qtid.options[qtid.selectedIndex].text;
    switch (ans) {
        case 'A': gpa += 4; break;
        case 'B': gpa += 3; break;
        case 'C': gpa += 2; break;
        case 'D': gpa += 1; break;
        case 'F': gpa += 0; break;
    }
    qtid = document.getElementById("qtc");
    ans = qtid.options[qtid.selectedIndex].text;
    switch (ans) {
        case 'A': gpa += 4; break;
        case 'B': gpa += 3; break;
        case 'C': gpa += 2; break;
        case 'D': gpa += 1; break;
        case 'F': gpa += 0; break;
    }
    qtid = document.getElementById("qtd");
    ans = qtid.options[qtid.selectedIndex].text;
    switch (ans) {
        case 'A': gpa += 4; break;
        case 'B': gpa += 3; break;
        case 'C': gpa += 2; break;
        case 'D': gpa += 1; break;
        case 'F': gpa += 0; break;
    }
    if (flagbox1 === 1) {
        qtid = document.getElementById("qte");
        ans = qtid.options[qtid.selectedIndex].text;
        switch (ans) {
            case 'A': gpa += 4; break;
            case 'B': gpa += 3; break;
            case 'C': gpa += 2; break;
            case 'D': gpa += 1; break;
            case 'F': gpa += 0; break;
        }
        gpa /= 5;
    }
    else gpa /= 4;
    var adv = document.getElementById("adv");
    if (gpa >= 3.0) {
        adv.innerHTML='Your GPA is '+gpa.toFixed(1)+'.Congratulations,your GPA has met the requirements.<br>Please follow <a href="#">the link</a> to apply.'
    }
    else {
        adv.innerHTML='Your GPA is '+gpa.toFixed(1)+'.Thank you for your interest.At this time,your GPA does not meet the requirements for these positions.'
    }
    gpa = 0;
}

补充一下按钮样式的css代码

#subbtn{
    color: #0099cc;
    background: transparent;
    border: 2px solid #0099cc;
    border-radius: 8px;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
}

#subbtn:hover {
    background-color: #008CBA;
    color: white;
    cursor: pointer;
}

完整代码

HTML代码

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/myjs.js"></script>
    <script src="js/myfunc.js"></script>
    <title>GPA查询页面</title>
</head>
<body>
    <br><br>
    <h4 style="text-align: center;">Eligibility Form</h4>
    <div id="bodybox">
        <div id="firstbox">
            <h4>Select your staus and click "Submit"</h4>
            <input type="radio" name="ans1" id="ungra" onclick="createbox1()"><label for="ungra">Undergraduate</label> 
            <input type="radio" name="ans1" id="gra" onclick="createbox2()"><label for="gra">Graduate</label> 
        </div>
        <hr>
    </div>
</body>
</html>

JS代码

myjs.js：

var flagbox1 = 0, flagbox2 = 0, hasbox = 0;
function createbox1() {
    if (hasbox === 1) {
        var parent = document.getElementById("bodybox");
        var child = document.getElementById("box2id");
        parent.removeChild(child);
        flagbox1 = 0;
        flagbox2 = 0;
    }
    if (flagbox1 === 0) {
        var box1 = document.createElement("div");
        box1.innerHTML = '<h4>Select your grade and click "Evluate"</h4><p>CSE 3203 Mobile System Overview</p><select name="questa" id="qta"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 4213 Mobile Web Development</p><select name="questb" id="qtb"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 4203 Advanced Web Development</p><select name="questc" id="qtc"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 3883 Advanced Application Development</p><select name="questd" id="qtd"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 3123 Hardware and Software Concepts</p><select name="queste" id="qte"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><br><br><div><input type="button" id="subbtn" value="Evluate" οnclick="ShowAdvice()"></div><p id="adv"></p>';
        var divid = document.createAttribute("id");
        divid.value = 'box1id';
        box1.setAttributeNode(divid);
        document.getElementById("bodybox").appendChild(box1);
        flagbox1 = 1;
        flagbox2 = 0;
        hasbox = 1;
    }
}
function createbox2() {
    if (hasbox === 1) {
        var parent = document.getElementById("bodybox");
        var child = document.getElementById("box1id");
        parent.removeChild(child);
        flagbox1 = 0;
        flagbox2 = 0;
    }
    if (flagbox2 === 0) {
        var box2 = document.createElement("div");
        box2.innerHTML = '<h4>Select your grade and click "Evluate"</h4><p>IT 7113 Data Visualization</p><select name="questa" id="qta"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 6713 Business Intelligence</p><select name="questb" id="qtb"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 6773 Practical Data Analytics</p><select name="questc" id="qtc"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select><p>IT 6733 Database Administration</p><select name="questd" id="qtd"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option><option value="F">F</option></select></div><br><br><div><input type="button" id="subbtn" value="Evluate" οnclick="ShowAdvice()"></div><p id="adv"></p>';
        var divid = document.createAttribute("id");
        divid.value = 'box2id';
        box2.setAttributeNode(divid);
        document.getElementById("bodybox").appendChild(box2);
        flagbox1 = 0;
        flagbox2 = 1;
        hasbox = 1;
    }
}

myfunc.js：

function ShowAdvice() {
    var gpa = 0;
    var qtid = document.getElementById("qta");
    var ans = qtid.options[qtid.selectedIndex].text;
    switch (ans) {
        case 'A': gpa += 4; break;
        case 'B': gpa += 3; break;
        case 'C': gpa += 2; break;
        case 'D': gpa += 1; break;
        case 'F': gpa += 0; break;
    }
    qtid = document.getElementById("qtb");
    ans = qtid.options[qtid.selectedIndex].text;
    switch (ans) {
        case 'A': gpa += 4; break;
        case 'B': gpa += 3; break;
        case 'C': gpa += 2; break;
        case 'D': gpa += 1; break;
        case 'F': gpa += 0; break;
    }
    qtid = document.getElementById("qtc");
    ans = qtid.options[qtid.selectedIndex].text;
    switch (ans) {
        case 'A': gpa += 4; break;
        case 'B': gpa += 3; break;
        case 'C': gpa += 2; break;
        case 'D': gpa += 1; break;
        case 'F': gpa += 0; break;
    }
    qtid = document.getElementById("qtd");
    ans = qtid.options[qtid.selectedIndex].text;
    switch (ans) {
        case 'A': gpa += 4; break;
        case 'B': gpa += 3; break;
        case 'C': gpa += 2; break;
        case 'D': gpa += 1; break;
        case 'F': gpa += 0; break;
    }
    if (flagbox1 === 1) {
        qtid = document.getElementById("qte");
        ans = qtid.options[qtid.selectedIndex].text;
        switch (ans) {
            case 'A': gpa += 4; break;
            case 'B': gpa += 3; break;
            case 'C': gpa += 2; break;
            case 'D': gpa += 1; break;
            case 'F': gpa += 0; break;
        }
        gpa /= 5;
    }
    else gpa /= 4;
    var adv = document.getElementById("adv");
    if (gpa >= 3.0) {
        adv.innerHTML='Your GPA is '+gpa.toFixed(1)+'.Congratulations,your GPA has met the requirements.<br>Please follow <a href="#">the link</a> to apply.'
    }
    else {
        adv.innerHTML='Your GPA is '+gpa.toFixed(1)+'.Thank you for your interest.At this time,your GPA does not meet the requirements for these positions.'
    }
    gpa = 0;
}

CSS代码

style.css：

#bodybox{
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
    height: 700px;
    width: 600px;
    text-align: center;
    border: 5px solid;
}
#subbtn{
    color: #0099cc;
    background: transparent;
    border: 2px solid #0099cc;
    border-radius: 8px;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
}

#subbtn:hover {
    background-color: #008CBA;
    color: white;
    cursor: pointer;
}