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

最新推荐文章于 2024-06-07 11:05:43 发布
最新推荐文章于 2024-06-07 11:05:43 发布
阅读量1.6w 收藏 109
点赞数 22
CC 4.0 BY-SA版权
分类专栏： web 文章标签： css js html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45867761/article/details/110526308
该博客围绕JavaScript高级应用展开实训，包含成绩百分制转五级制、计算∑N!以及JavaScript常用函数应用三个项目。每个项目都有页面效果截图和多种实现代码，涉及前端开发相关知识。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

实训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>
Web前端开发技术实验与实践（第3版）储久良 实训12
m0_57258367的博客
10-26 3512
实训12：项目34：设计简易福彩投注程序 项目35：设计江苏福彩投注站彩票投注助手
web前端开发技术实验与实践（第三版）储久良编著 项目10 简易灯箱画廊
weixin_61726211的博客
04-01 1912
实训三 项目10 简易灯箱画廊 一、页面文字素材： 无 二、代码： <!--prj_3_1.html--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简易灯箱画廊</title> <style> body{ text-align: center; } .div1{ width
web前端开发技术（第3版）储久良著课后实验
weixin_45867761的博客
09-26 1万+
实验8
Web前端开发技术储久良第三版课后选择答案(1-10章)
weixin_47681530的博客
06-19 5915
P16-第1章 练习与实验答案。
Web简单正数求阶乘
m0_49025459的博客
09-06 1090
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #myid { text-align: center; color: #ff0000; } </style> <script> function myFunction() { va.
Web前端开发技术（第2版）储久良课后实验材料及源代码
07-15
Web前端开发技术（第2版）储久良课后实验材料及源代码
Web前端开发技术实验与实践（第3版）储久良编著实训2
m0_56666338的博客
06-24 3023
Web前端开发技术实验与实践（第3版）储久良编著实训2
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
web前端开发技术实验与实践（第三版）储久良编著 课外拓展训练5.2 HTML5是如何起步的
weixin_61726211的博客
04-06 3240
实训五课外拓展训练5.2 一、页面文字素材： HTML5 是如何起步的？ HTML5 是 W3C 与 WHATWG 合作的结果。 编者注：W3C 指 World Wide Web Consortium，万维网联盟。 编者注：WHATWG 指 Web Hypertext Application Technology Working Group。 WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 H...
成绩百分与五分制的转换
2401_84111291的博客
04-16 804
输入百分成绩，输出五分制等级。转换规则如下：100~90等级A，89~80等级B，79~70等级C，69~60等级D，小于60等级E，如果输入的成绩在0--100范围之外，则输出”输入错误“。
JavaWeb-10-JavaScript高级学习笔记
qq_45498432的博客
04-21 788
JavaWeb-10-JavaScript高级
Web开发及人机交互导论 实验八 JavaScript程序结构
上山打老虎的博客
07-05 3145
实验八一、实验目的二、实验环境三、实验步骤项目一：成绩百分制转换为五级制项目二：计算∑n!\sum{n!}∑n!项目三：系统常用函数的使用项目四：课外拓展训练（一）——找出符合条件的数项目四：课外拓展训练（二）——倒置九九乘法口诀表四、结果与分析五、心得体会 一、实验目的 掌握JavaScript分支结构语法,并学会使用分支结构编程。 掌握JavaScript循环结构语法,学会使用多种循环编写应用程序。 掌握多分支if… else结构与switch结构互换编程。 二、实验环境 Windows10系统下的
html计算1到n的和,计算1-n的和的两种方法，与计算时间
weixin_42305622的博客
06-27 865
#include#include#includeint add1(long n) {long i, sum = 0;for (i = 0; i <= n; i++) {sum+=i;}return sum;}void AddTime1(long n) {clock_t t;t = clock();long sum;sum = add1(n);t = clock() - t;printf("方...
运用for循环实现计算∑N！
YOLO的博客
04-18 5370
模块设计： 1.域、域标题标记 <fieldset> <legend align="center">计算1!+2!+...+N！</legend> <script type="text/javascript"> var n=prompt("输入整数N",0);//输入整数N //判断N是否有效 v...
Web前端开发技术（第3版）储久良著课后实验
热门推荐
weixin_45867761的博客
10-14 1万+
实验10 1、 效果图 2、 效果图
css选择器
zhaoguozhun411的博客
01-17 314
在网页设置的过程中，要想更精确地控制页面布局，字体颜色等就需要用到css样式，下面呢就是我总结出来的一些有关于css选择器的知识。                                              CSS选择器： css选择器有：ID选择器，类选择器，标签选择器，后代选择器，交集选择器，并集选择器，通配符选择器，伪类选择器 通配符选择器；*{} （*，指所有的
我的web程序设计实验记10
zx616122的博客
09-15 651
实验记录 使用css和html制作一个简单的动画程序 使用div连接成8个块，进行移动，整体向浮动 html代码 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="1.css" media="screen" type="text/css" /> </head> &lt
Web前端学习 10
weixin_42468212的博客
08-01 175
1.字体图标 第一步：登录，图标官方图标库，选择自己需要的图标加入购物车 第二步：购物车，把购物车的图标加入项目（如果项目不存在就新建项目） 可以从导航上图标管理==》我的项目中找到 第三步：在我的项目页面选中font class ,点击下载进本地 2.2d 移动：translate(x,y)或 translateX() translateY() 旋转：rotate() 正或负 缩放：scale(...
Web前端开发技术实验10 表格与表单设计(2)
最新发布
2302_78967568的博客
06-07 427
千年之恋
web前端开发技术实验与实践（第3版）储久良编著实训5
06-28
### 回答1： 很抱歉，我是AI语言模型，无法进行实践操作。但是，我可以告诉你《web前端开发技术实验与实践（第3版）储久良编著实训5》是一本关于Web前端开发技术的实践指南，主要涵盖了HTML、CSS、JavaScript等方面的实验和实践内容。通过这本书的学习，读者可以掌握Web前端开发的基本技能和实践经验，提高自己的实战能力。 ### 回答2： 《web前端开发技术实验与实践》（第3版）储久良编著实训5，该实训主要涉及到HTML、CSS、JavaScript以及jQuery等网页开发技术。 在第一部分实验中，我们需要使用HTML创建一个简单的网页。这个网页包括一个头部、导航栏、内容区域和一个底部区域。通过实验，我们可以学习HTML的基础语法和标签的使用，同时掌握网页布局和样式设置。 在第二部分实验中，我们需要使用CSS设置网页的样式，并且使用浮动和定位等技术实现网页布局。这里，我们可以学习CSS的基本语法和选择器的使用以及盒模型、浮动和定位等技术，了解如何实现网页的自适应布局。 第三部分实验中，我们需要使用JavaScript实现网页的动态效果，比如页面滚动效果、鼠标悬浮效果、表单验证等。通过实验，我们可以学习JavaScript的基本语法和操作方法，掌握DOM的使用，了解事件机制和表单验证等技术。 最后，在第四部分实验中，我们需要使用jQuery实现网页的高级效果，比如动画效果、Ajax数据交互等。这个部分可以帮助我们更深入地了解jQuery的语法和方法，学习如何使用jQuery实现复杂的网页效果和数据交互。 总之，该实训涵盖了Web前端开发的基础技术和高级技术，并且通过实际操作体验加深我们对这些技术的理解和掌握。如果想要成为一名优秀的Web前端开发工程师，这个实训是非常好的学习资料和参考材料。 ### 回答3： 实训5是《web前端开发技术实验与实践》第3版的一部分，主要涉及到前端开发的基础知识和技术实践。实训5的目的是为学生提供实践操作的机会，通过实际应用掌握JavaScript实现动态效果和交互行为的方法。 在实训5中，学生需要使用JavaScript实现以下功能： 1. 实现菜单栏的展开与收起。学生需要使用DOM操作，选取页面上的菜单元素，并为其添加点击事件，通过修改样式实现菜单的展开和收起。 2. 实现轮播图。学生需要基于jQuery实现轮播图，包括图像切换和自动播放。学生需要掌握jQuery选择器的基本用法，以及jQuery动画效果的使用方法。 3. 实现表格分页。学生需要使用JavaScript实现分页功能，包括表格数据的加载和分页器的显示。学生需要理解分页器的原理，并使用JavaScript动态生成分页器。 实训5的内容较为基础，但是对于初学者来说是一个很好的入门练习。通过实践操作，学生可以学会DOM操作、jQuery用法、JavaScript的事件处理和面向对象编程等技能。这些技能是前端开发的基础，具有非常重要的作用。掌握了这些技能之后，学生可以进一步学习Web前端开发的高级技术和框架，提升自己的开发能力。 总之，实训5是一个基础的、重要的练习，对于初学者来说是一个非常有价值的课程。学生需要认真学习和实践，掌握JavaScript和jQuery的基本用法，并在实践中不断提升自己的开发能力。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值