Web前端开发技术实验与实践(第3版)储久良编著实训10

web 专栏收录该内容
19 篇文章 14 订阅

实训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("&nbsp;&nbsp;"+"x=10,y=20,x*y="+eval(x*y));
				document.write("<br>2+2="+eval("2+2"));
				document.write("&nbsp;&nbsp;"+"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("&nbsp;&nbsp;parseFloat('314e-2')="+parseFloat('314e-2'));
				document.write("<br>parseFloat('3.14ab')="+parseFloat('3.14ab'));
				document.write("&nbsp;&nbsp;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("&nbsp;&nbsp;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("&nbsp;&nbsp;64.toString(2)="+num.toString(2));
				document.write("&nbsp;&nbsp;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("&nbsp;&nbsp;ABCDEFG.charAt(5)="+'ABCDEFG'.charAt(5));
				document.write("&nbsp;&nbsp;ABCDEFG.charAt(10)是空串"+'ABCDEFG'.charAt(10));
			</script>
		</div>
	</body>
</html>

  • 3
    点赞
  • 0
    评论
  • 15
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值