Web前端开发技术实验与实践（第3版）储久良编著实训10
实训10 JavaScript高级应用项目29 成绩百分制转换为五级制页面效果截图代码三种方法实现<!DOCTYPE html><html><head><meta charset="utf-8"><title>成绩百分制转换为五级制</title><style type="text/css">#div1 {widt
·
实训10 JavaScript高级应用
项目29 成绩百分制转换为五级制
页面效果截图
代码
三种方法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>成绩百分制转换为五级制</title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
background-color: #006600;
margin: 100px auto;
color: white;
font-size: 24px;
border: 8px double #009933;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<script type="text/javascript">
document.write("<strong>课程成绩评定</strong><br><br>");
var result = "";
var x = prompt("请输入你的成绩：", 0);
if (x != null) {
document.write("课程成绩为：" + x + "分");
if (x >= 90) {
result = "优秀";
alert("1——成绩等级为" + result);
} else if (x >= 80) {
result = "良好";
alert("2——成绩等级为" + result);
} else if (x >= 70) {
result = "中等";
alert("3——成绩等级为" + result);
} else if (x >= 60) {
result = "合格";
alert("4——成绩等级为" + result);
} else {
result = "不合格";
alert("5——成绩等级为" + result);
}
} else {
alert("请重新输入成绩！");
}
document.write("<br>成绩等级为：" + result);
</script>
</div>
</body>
</html>
第二种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>成绩百分制转换为五级制</title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
background-color: #006600;
margin: 100px auto;
color: white;
font-size: 24px;
border: 8px double #009933;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<script type="text/javascript">
document.write("<strong>课程成绩评定</strong><br><br>");
var result = "";
var level=0;
var x = prompt("请输入你的成绩：", 0);
if (x != null) {
document.write("课程成绩为：" + x + "分");
if (x >= 90) {
level=1;
} else if (x >= 80) {
level=2;
} else if (x >= 70) {
level=3;
} else if (x >= 60) {
level=4;
} else {
level=5;
}
switch(level){
case 1:{result = "优秀";break;}
case 2:{result = "良好";break;}
case 3:{result = "中等";break;}
case 4:{result = "合格";break;}
case 5:{result = "不合格";}
}
document.write("<br>成绩等级为：" + result);
} else {
alert("请重新输入成绩！");
}
</script>
</div>
</body>
</html>
第三种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>成绩百分制转换为五级制</title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
background-color: #006600;
margin: 100px auto;
color: white;
font-size: 24px;
border: 8px double #009933;
text-align: center;
}
</style>
<script type="text/javascript">
function conversion(score) {
var result = "";
var level = 0;
if (x >= 90) {
level = 1;
} else if (x >= 80) {
level = 2;
} else if (x >= 70) {
level = 3;
} else if (x >= 60) {
level = 4;
} else {
level = 5;
}
switch (level) {
case 1:
{
result = "优秀";
break;
}
case 2:
{
result = "良好";
break;
}
case 3:
{
result = "中等";
break;
}
case 4:
{
result = "合格";
break;
}
case 5:
{
result = "不合格";
}
}
return result;
}
</script>
</head>
<body>
<div id="div1">
<script type="text/javascript">
document.write("<strong>课程成绩评定</strong><br><br>");
var x = prompt("请输入你的成绩：", 0);
if (x != null) {
document.write("课程成绩为：" + x + "分");
var result=conversion(x);
document.write("<br>成绩等级为：" + result);
} else {
alert("请重新输入成绩！");
}
</script>
</div>
</body>
</html>
项目30 计算∑N!
页面效果截图
代码
第一种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算∑N!</title>
<style type="text/css">
table {
background-color: #f2f2f2;
width: 600px;
height: 300px;
margin: 20px auto;
color: black;
border: 20px ridge #9999cc;
}
td {
font-size: 20px;
font-weight: bold;
text-align: center;
}
#button {
width: 180px;
height: 60px;
}
</style>
<script src="../js/sum_factorial.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table border="0" cellspacing="" cellpadding="">
<tr>
<td colspan="4">
计算∑N!
</td>
</tr>
<tr>
<td colspan="2">
输入整数N的值:
</td>
<td colspan="2">
<input type="text" id="n_text" value="" />
</td>
</tr>
<tr>
<td colspan="2">
∑N!=
</td>
<td colspan="2">
<input type="text" id="sum_text" value="" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="" id="button" value="计算∑N!" onclick="show()" />
</td>
<td colspan="2">
<input type="reset" value="清空" id="button" />
</td>
</tr>
</table>
</body>
</html>
第二种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算∑N!</title>
<style type="text/css">
table {
background-color: #f2f2f2;
width: 600px;
height: 300px;
margin: 20px auto;
color: black;
border: 20px ridge #9999cc;
}
td {
font-size: 20px;
font-weight: bold;
text-align: center;
}
#button {
width: 180px;
height: 60px;
}
</style>
<script src="../js/sum_factorial.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table border="0" cellspacing="" cellpadding="">
<tr>
<td colspan="4">
计算∑N!
</td>
</tr>
<tr>
<td colspan="2">
输入整数N的值:
</td>
<td colspan="2">
<input type="text" id="n_text" value="" />
</td>
</tr>
<tr>
<td colspan="2">
∑N!=
</td>
<td colspan="2">
<input type="text" id="sum_text" value="" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="" id="button" value="计算∑N!" onclick="show()" />
</td>
<td colspan="2">
<input type="reset" value="清空" id="button" />
</td>
</tr>
</table>
</body>
</html>
项目31 JavaScript常用函数的应用
页面效果截图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript常用函数的应用</title>
<style type="text/css">
div {
margin: 10px auto;
padding: 10px;
background-color: #66ffff;
color: #330000;
width: 800px;
font-size: 20px;
font-weight: bold;
}
h3 {
text-align: center;
}
b {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div id="">
<h3>JavaScript常用函数的应用</h3>
<b>1.计算表达式的结果函数eval("字符串")</b>
<script type="text/javascript">
var x=10,y=20;
document.write("<br>1000+3/5="+eval("1000+3/5"));
document.write(" "+"x=10,y=20,x*y="+eval(x*y));
document.write("<br>2+2="+eval("2+2"));
document.write(" "+"x=10,x+17="+eval(x+17));
</script>
<br>
<b>2.编码函数escape("字符串")</b>
<script type="text/javascript">
document.write("<br>escape('&')="+escape('&'));
document.write("<br>escape('my name is 张华')="+escape('my name is 张华'));
</script>
<br>
<b>3.解码函数unescape(string)</b>
<script type="text/javascript">
document.write("<br>unescape('%26')="+unescape('%26'));
document.write("<br>unescape('my%20name%20is%20%u5F20%u534E')="+unescape('my%20name%20is%20%u5F20%u534E'));
</script>
<br>
<b>4.字符型转换成浮点数函数parseFloat(string)</b>
<script type="text/javascript">
document.write("<br>parseFloat('3.14')="+parseFloat('3.14'));
document.write(" parseFloat('314e-2')="+parseFloat('314e-2'));
document.write("<br>parseFloat('3.14ab')="+parseFloat('3.14ab'));
document.write(" parseFloat('FF2')="+parseFloat('FF2'));
document.write("<br>parseFloat('345.25FF2')="+parseFloat('345.25FF2'));
</script>
<br>
<b>5.字符型转换成整型函数parseInt(numberstring,radix)</b>
<script type="text/javascript">
document.write("<br>32:"+parseInt(32,10));
document.write("<br>032:"+parseInt(32,8));
document.write("<br>0x32:"+parseInt(32,16));
</script>
<br>
<b>6.判断是否是NaN函数isNaN()</b>
<script type="text/javascript">
document.write("<br>isNaN('5454g')="+isNaN("5454g"));
document.write("<br>isNaN('789')="+isNaN("789"));
</script>
<br>
<b>7.保留固定小数点位数的函数toFixed(n)</b>
<script type="text/javascript">
document.write("<br>356.25678.toFixed(2)="+356.25678.toFixed(2));
document.write(" 356.25.toFixed(3)="+356.25.toFixed(3));
</script>
<br>
<b>8.将数值转为不同进制的字符串函数toString(radix)</b>
<script type="text/javascript">
var num=64;
document.write("<br>64.toString()="+num.toString());
document.write(" 64.toString(2)="+num.toString(2));
document.write(" 64.toString(8)="+num.toString(8));
</script>
<br>
<b>9.单个字符提取函数charAt(n)</b>
<script type="text/javascript">
document.write("<br>ABCDEFG.charAt(1)="+'ABCDEFG'.charAt(1));
document.write(" ABCDEFG.charAt(5)="+'ABCDEFG'.charAt(5));
document.write(" ABCDEFG.charAt(10)是空串"+'ABCDEFG'.charAt(10));
</script>
</div>
</body>
</html>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
19
0- 0
已为社区贡献3条内容
所有评论(0)