Web编程技术实验报告
（实验二）
学号： 姓名：
实验项目名称：JavaScript基本概念 教师评分：
一、实验目的
了解JavaScript中的基本数据类型，掌握其用法
掌握JavaScript中的流程控制结构
二、预习内容及要求（要求写出预习内容）
JavaScript中的基本数据类型：Number、String、Boolean、Object、Null、Undefined
JavaScript中的程序执行结构：顺序、分支、循环
for-in语句的作用及用法
三、实验内容、操作过程及实验结果记录
1. 根据平均分来划分等级
- 效果如图2-1所示。
- “输入成绩”效果展示
- 具体实现步骤如下：
- 在弹出框中依次输入语文、数学、英语、化学、历史分数。
- 计算平均分
- 等级：如果平均分大于等于90为优秀，小于90大于等于80为良好，小于80大于等于70为一般，小于70大于等于60为较差，小于60为很差
- 页面弹出框告知等级
- 用swich_case方式实现
- 代码或代码截图：（这里是源代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>根据平均分来划分等级</title>
</head>
<body>
<script>
var sum=0;
function Grade(a){
if(!isNaN(a)){
sum=a;
} else {
alert('请输入正确的数字');
}
return sum;
}
var chinese = prompt('请输入语文成绩');
chinese = parseFloat(chinese) && Number(chinese);
var math1 = prompt('请输入数学成绩');
math1= parseFloat(math1) && Number(math1);
var english = prompt('请输入英语成绩');
english = parseFloat(english) && Number(english);
var chemistry = prompt('请输入化学成绩');
chemistry = parseFloat(chemistry) && Number(chemistry);
var history1 = prompt("请输入历史成绩");
history1 = parseFloat(history1) && Number(history1);
var total=(Grade(chinese)+Grade(math1)+Grade(english)+Grade(chemistry)+Grade(history1));
var avgSore=(total/5.0);
switch(true){
case avgSore>=0&&avgSore<60:
alert("平均成绩为："+avgSore+",很差");
break;
case avgSore>=60&&avgSore<70:
alert("平均成绩为："+avgSore+",较差");
break;
case avgSore>=70&&avgSore<80:
alert("平均成绩为："+avgSore+",一般");
break;
case avgSore>=80&&avgSore<90:
alert("平均成绩为："+avgSore+",良好");
break;
case avgSore>=90&&avgSore<=100:
alert("平均成绩为："+avgSore+",优秀");
break;
}
</script>
</body>
</html>效果展示：
2. 加油优惠价格计算
加油站，为了鼓励车主多加油，实行多加多优惠政策，具体优惠如下：
- 已知92号汽油，每升6元；如果大于等于20升，那么每升5.9；
- 已知97号汽油，每升7元；如果大于等于40升，那么每升6.5；
- 编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格
- 效果如图2-2、2-3、2-4所示。
-
- 输入汽油编号
- 输入油量
-
- 页面输出单价和总价钱
- 具体实现步骤如下：
- 输入汽油编号。
- 输入想要加的油量。
- 根据编号和油量来规定单价、计算总价
- 页面中输出单价和总价钱
代码或代码截图：（这里是源代码）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8"/>
<title>加油优惠价格计算</title>
</head>
<body>
<script>
const mil1=6;
const mil2=5.9;
const mil3=7;
const mil4=6.5;
var mil=0.0;
//计算总价格
function totalMoney(a,b){
var Mony=0.0;
if(!isNaN(a)&&!isNaN(b)){
if(a==92){
if(b>=20){
Mony=b*mil2;
mil=mil2;
}else{
Mony=b*mil1;
mil=mil1;
}
}else if(a==97){
if(b>=40){
Mony=b*mil4;
mil=mil4;
}else{
Mony=b*mil3;
mil=mil3;
}
}else{
alert(a+"不存在");
}
} else {
alert('请输入正确的数字');
}
return Mony;
}
var gasoline =prompt("请输入汽油编号");
gasoline=parseFloat(gasoline) && Number(gasoline);
var milliliter=prompt("请输入你要加多少升");
milliliter= parseFloat(milliliter) && Number(milliliter);
var total=totalMoney(gasoline,milliliter);
document.write("汽油："+mil+"一升；"+"'</br>'"+"共计"+total+"元！");
</script>
</body>
</html>效果展示：
3. 输出100以内的所有质数
- 效果如图2-5所示。
- 1-100之间的质数
代码或代码截图：（这里是源代码）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8"/>
<title>输出100以内的所有质数</title>
</head>
<body>
<script>
const num=100;
var m=0;
for(var i=2;i<=100;i++){
m=1;
for(var j=2;j<i;j++){
if(i%j==0){
m=0;
break;
}
}
if(m==1){
document.write(i+",");
}
}
</script>
</body>
</html>效果展示：
4. 输入圆的半径计算面积和周长
- 效果如图2-6、2-7所示。
-
输入圆的半径
- 展示圆的周长和面积
- 具体实现步骤如下：
- 页面弹出框输入半径r。
- 在程序里判断r是否是正确的数字，如果是计算周长，面积。
- 如果r输入错误，则校验不通过，给出提示。
- 页面中展示r、周长、面积。
- 代码或代码截图：（这里是源代码）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8"/>
<title>圆的周长和面积</title>
<body>
<div>
<p>圆的半径：<input id="r" type="text"></p>
<p>圆的周长：<input id="cir" type="text"></p> <p>圆的面积：<input id="area" type="text"></p>
</div>
<script> var r = prompt('请输入圆的半径');
r = parseFloat(r) && Number(r);
if(!isNaN(r)){
const PI = 3.14; var cir = 2 * PI * r;
var area = PI * r * r;
document.getElementById('r').value = r; document.getElementById('cir').value = cir.toFixed(2);
document.getElementById('area').value = area.toFixed(2);
} else {
alert('请输入正确的数字');
}
</script>
</body>
</html>效果展示：
5. while do..while验证用户名和密码
- 打开页面时，效果如图2-8所示。
-
输入用户名展示
- 输入密码效果展示
如果输入的信息正确，则弹出如图2-10所示提示。
- 提示登录成功
如果输入的信息不正确，则弹出如图2-11所示提示。
- 提示登录失败
- 具体实现步骤如下：
- 用户输入用户名。
- 用户输入密码。
- 输入的内容，如果符合语句中的条件则提示“登录成功”，不符合时提示“用户名或者密码有误”，让你一直输入用户名和密码，直到输入正确为止。
代码或代码截图：（这里是源代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>while do..while验证用户名和密码</title>
</head>
<body>
<script>
var flag=true;
while(flag){
var username=prompt("请输入用户名");
var password=prompt("请输入密码");
if(username!=null&&password!=null){
if(username=="admin"&&password=="123456"){
document.write("登录成功");
flag=false;
}else{
alert("用户名或者密码有误");
flag=true;
}
}
}
</script>
</body>
</html>效果展示：
6. 打印九九乘法表。
九九乘法表
代码或代码截图：（源代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>打印九九乘法表</title>
</head>
<body>
<script>
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+i*j+" ");
if(i==j){
document.write("</br>");
}
}
}
</script>
</body>
</html>效果展示：
7. 打印菱形、三角形
- 菱形效果如图2-13所示。
-
输入菱形行数6
- 打印菱形
- 三角形效果如图2-15所示。
-
打印三角形
3）具体实现步骤如下：
- 输入菱形行数。
- 根据行数计算。
- 三角形行数是在代码中定义好的为4。
代码或代码截图：（这里是源代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title> 打印菱形、三角形</title>
</head>
<body>
<script>
var n=prompt("请输入行数");
n=parseFloat(n) && Number(n);
//实心菱形的上半部分
for (var i = 1; i <= n; i ++) {
for (var k = n-1; k >= i; k --) {
document.writeln(" ");
}
for (var j = 1; j <= 2*i-1; j ++) {
document.writeln("*");
}
document.writeln("<br>");
}
//实心菱形的下半部分
for (var i = 1; i <= n-1; i ++) {
for (var k = 1; k <= i; k ++) {
document.writeln(" ");
}
for (var j = 2*n-1; j >= 2*i+1; j --) {
document.writeln("*");
}
document.writeln("<br>");
}
document.writeln("<br>");
//打印直角三角形
for(var i=0;i<=4;i++){
for(var j=0;j<i;j++){
document.writeln("*");
}
document.writeln("<br/>");
}
</script>
</body>
</html>效果展示：
8. 求红白黑球的个数
用js编程 已知：红白球共25个，白黑球共31个，红黑球共28个，求三种球各有多少？
（这里是源代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>求红白黑球的个数</title>
</head>
<body>
<script>
/*用js编程 已知：红白球共25个，白黑球共31个，红黑球共28个，求三种球各有多少？*/
for(var red=0;red<=25;red++)
{
var white=25-red,black=28-red;
if(31==white+black)
{
document.write("red:"+red+"\n"+"black:"+black+"\n"+"white:"+white);
}
}
</script>
</body>
效果展示：
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
