关于JavaScript与jQuery开发技术的几个基本实验报告本

最新推荐文章于 2023-02-22 16:02:04 发布
最新推荐文章于 2023-02-22 16:02:04 发布
阅读量1.8k 收藏 14
点赞数 2
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44830627/article/details/110009422
版权

实验一： JavaScript基础

1．打印金字塔直线，要求有24行直线，分别使用for和while 循环实现。

使用for循环实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			for(var i=0;i<24;i++){
			document.write("<hr width="+i+"%/>");
			}
		</script>
	</body>
</html>

使用while循环实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var i=0;
			while(i<24){
				document.write("<hr width="+i+"%/>");
				i++;
			}
		</script>
	</body>
</html>

在这里插入图片描述

  1. 打印九九乘法表
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>九九乘法表</title>
	</head>
	<body bgcolor="#e0f1ff">
		<table  border="1" cellpadding="6" style="border-collapse: collapse;" >
		<script type="text/javascript">
			for(var i=1;i<=9;i++){
				document.write("<tr bgcolor='white'>");
				for(var j=1;j<=i;j++){
					document.write("<td style='border:2px solid #004B8A;' align='center'>"+i+"*"+j+"="+(i*j));
					document.write("</td>");
				}
				document.write("</tr>");
			}
		</script>
		</table>
	</body>
</html>

在这里插入图片描述

  1. 通过弹出框提示用户输入时间信息，根据用户输入的时间弹出问候信息。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var ss=window.prompt("请输入时间:");	
		if(ss>=0&&ss<24){
			if(ss>=6&&ss<12)
				alert("上午好");
				
			else if(ss>=12&&ss<14)
				alert("中午好");
				
			else if(ss>=14&&ss<18)
				alert("下午好");
	  			 
			else if(ss>=18&&ss<23)
				alert("晚上好");
				
			else 
			alert("这是休息时间，不要说话!");
			}
			else
			alert("你输入了不存在的时间，请重新输入,输入范围为[0,23]！")
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

实验二：JavaScript内置对象

1.生成指定位数的随机数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>请输入要生成随机数的位数:</p>
		<form name="form">
			<input type="text" name="dight" />
			<input type="button" value="生成" onclick="show(form.dight.value)" />
		</form>
		<script type="text/javascript">
			function show(dight) {
				if (dight == "" || isNaN(dight)) {
					alert("你还没有输入或输入的不是数字，请重新输入!")
				} else {
					var str = "";
					for (var i = 0; i < dight; i++) {
						str1 = Math.floor(Math.random() * 10);
						str += str1;
					}
					alert(str);
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述

2．猜数游戏。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var num=Math.floor(Math.random()*100+1);//产生1~100之间的随机整数
			do{
				var guess=parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数: "));
				if(guess==num){
					alert("恭喜你猜对了,幸运数字是:"+num);
					break;
				}
				else{
					if(guess>num){
						alert("你猜的数字大了");
						go_on=confirm("是否继续游戏?");
					}
					else{
						alert("你猜的数字小了");
						go_on=confirm("是否继续游戏?");
					}
				}
			}
			while(go_on);
			alert("谢谢参与游戏!");
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
3. 运行的时钟。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态时钟</title>
		<style>
			#clock{
				font-size: 30px;
				font-weight: 900;
				color: #FFFFFF;
				background-color: #930;
				border: 8px double #900;
			}
		</style>
		<script>
		function disptime(){
			var time=new Date();//获得当前时间
			var year=time.getFullYear();//获得年
			var month=time.getMonth()+1;//获得月,getMonth的范围是0~11，所以要加1
			var date=time.getDate();//获得日
			var hour=time.getHours();//获得小时
			var minute=time.getMinutes();//获得分钟
			var second=time.getSeconds();//获得秒
if(hour<10)
			hour="0"+hour;
			if(minute<10)
			minute="0"+minute;
			if(second<10)
			second="0"+second;
			document.getElementById('clock').innerHTML=year+"年"+month+"月"+date+"日"+hour+":"+minute+":"+second;
		      //document.getElementById()是用于获取网页标签的id，所以首先（）要有id名，然后通过.innerHTML方法就可以获取到对应标签的内的文本内容
			   var myTime=setTimeout("disptime()",1000);
		}
		</script>
	</head> 
	<body onLoad="disptime()">			
			<span  id="clock"></span>	
	</body>
</html>

在这里插入图片描述

实验三：JavaScript事件处理

  1. 表单验证
    要求：用户名不少于2位，并且用户名第一个字符需为字母!
    密码长度必须在6~15之间。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单简单验证</title>
	</head>
	<body>
		<h1>用户登录</h1>
		<form name="form">
			用户账号：<input type="text" name="name" /><br />
			用户密码：<input type="password" name="password"/><br />
			<input type="button" value="验证" onclick="panduan()" />
		</form>
		<script type="text/javascript">
			function panduan(){
				if(form.name.value.length==0){
				alert("用户名不能为空");
				return false;
				}
				if(form.password.value.length==0){
				alert("密码不能为空");
				return false;
				}	
			var patrn=/^[a-zA-Z]{1}/;
			if (!patrn.exec(form.name.value)&&form.name.value.length>=2) {
				alert("用户名不少于2位，并且用户名第一个字符需为字母!");
			return false;
			}
			if(!(form.password.value.length>=6&&form.password.value.length<=15)){
				alert("密码长度必须在6~15之间");
				return false
			}
			alert("登录成功");
			}
		</script>
	</body>
</html>

在这里插入图片描述

2．验证数字输入
如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示；输入错误，否则提示：输入正确。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>验证数字输入</title>
	</head>
	<body>
		<h1>JavaScript验证数字输入</h1>
		<p>请输入1到10之间的数字：</p>
		<form name="form">
		<input type="text" name="x" />
		<input type="button" value="提交" onclick="come(form.x.value)" />
		</form>
		<script type="text/javascript">
			function come(x){
				if(isNaN(x)||x<1||x>10)
				alert("输入错误");
				else
				alert("输入正确");
			}
		</script>
	</body>
</html>

在这里插入图片描述
3. 利用document对象的bgColor属性改变背景色，添加鼠标悬停事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变色</title>
	</head>
	<body>
		<h1>移过来我变色给你看看</h1>
		<span  onmouseover="change('red')" onmouseout="change('white')">变红色</span>|
		<span onmouseover="change('blue')" onmouseout="change('white')">变蓝色</span>|
		<span onmouseover="change('yellow')" onmouseout="change('white')">变黄色</span>
		<script type="text/javascript">
		function change(color){
			document.bgColor=color;
		}	
		</script>
	</body>
</html>

在这里插入图片描述
4.附加题
实际网站开发过程中，很有可能遇到这样的情况：客户要求将一串长数字分位显示，例如将“13630016”显示为“13,630,016”。在本练习中通过编写一个自定义函数，将输入的数字字符格式化为3位显示的字符串。

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转换数字</title>
	</head>
	<body>
		<h3>请输入要转换的长数字：</h3>
		<form name="form" method="post">
			<input type="text" name="num" />(0-15)<br/>
			<input type="submit"  value="转换" onclick="changeNum(form.num.value)" />
			<input type="reset"   value="重置" />
		</form>
		<script type="text/javascript">
			function changeNum(num){
				if(isNaN(num)||num==""){
					alert("请输入数字！")
				}
				else	
					alert(Number(num).toLocaleString());
			}
		</script>
	</body>
</html>

在这里插入图片描述

实验四：JavaScript常用文档对象

JavaScript的文档对象的常用事件有哪些？
     答：常用事件有：
onblur():元素或窗口本身失去焦点时触发 
onclick():单击鼠标左键时触发
onfocus():任何元素或窗口本身获得焦点时触发
onkeydown()：键盘上的按键被按下时触发
onkeyup():释放键盘上的按键时触发
onmousedown():单击任何一个鼠标按键时触发
onscroll():在任何滚动条的元素或窗口上滚动时触发
onmouseover():鼠标移到某个元素上时触发
onmouseout():将鼠标从指定的元素上移开时触发
  1. 设计一个含有表单的页面，在表单上放入一个文本框，编写程序，当鼠标在页面上移动时，鼠标的坐标将显示在这个文本框中。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form id="form" method="post">
		坐标(x,y)<input type="text"  size="20" name="mouseposition"/>
		</form>
		<script type="text/javascript">
			document.onmousemove=function(){
				var x=window.event.clientX;
				var y=window.event.clientY;
				form.mouseposition.value=x+","+y;
			}
		</script>
	</body>
</html>

在这里插入图片描述

  1. 应用appendChild()方法和getElementById()方法实现年月日的联动的功能。当改变“年”菜单和“月”菜单的值的时候，“日”菜单的值的范围也会相应的改变。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>年月日的联动</title>
	</head>
	<body>
		<script type="text/javascript">
			 function append(d,v){
				  var option=document.createElement("option");//创建元素option
				  option.value=v;//把参数v作为元素的值
				  option.innerText=v+"日";//把参数v作为元素的显示内容
				  d.appendChild(option);//把元素option作为参数d的子节点
				}
			    function getday(){
				  var y=form1.year.value;//取得年份的值
				  var m=form1.month.value;//取得月份的值
				  var d=document.getElementById("day");//定位到id=day的节点
				  d.innerHTML="";//把id=day节点的内容清空
				  if(m==4 || m==6 || m==9 || m==11){//如果月份的值是4或6或9或11
				    for(j=1;j<=30;j++){
					  append(d,j);//把1到30循环加到天数当中
					}
				  }else if(m==2){//如果月份的值是2
				    if(y%4==0 || y%400==0 && y%100!=0){//如果年份是闰年
					  for(j=1;j<=29;j++){
					    append(d,j);//把1到29循环加到天数当中
					  }
					}else{
					  for(j=1;j<=28;j++){
					    append(d,j);//不是闰年就把1到28循环加到天数当中
					  }
					}
				  }else{//否则如果月份的值是1或3或5或7或8或10或12
				    for(j=1;j<=31;j++){
					  append(d,j);//把1到31循环加到天数当中
					}
				  }
				}
		</script>
		<form id="form1" name="form1" method="post" action="">
			<select name="year" id="year" onchange="getday()">
		     <script type="text/javascript">
		     	 var mydate=new Date();
		     			  for(i=1990;i<=mydate.getFullYear();i++){
		     			    document.write("<option value='"+i+"' "+(i==1986?"selected":"")+">"+i+"年</option>");
		     			  }
		     </script>
			 </select>
			 <select name="month" id="month" onchange="getday()">
				 <script type="text/javascript">
				 	  for(i=1;i<=12;i++){
				 			    document.write("<option value='"+i+"' "+(i==1?"selected":"")+">"+i+"月</option>");
				 			  }
				 </script>
				 </select>
				 <select name="day" id="day">
					 <script type="text/javascript">
					 	 for(i=1;i<=31;i++){
					 			    document.write("<option value='"+i+"' "+(i==1?"selected":"")+">"+i+"日</option>");
					 			  }
					 </script>
					 </select>
					 </form>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

  1. 使用Window对象的setTimeout()方法和clearTimeout()方法设置一个简单的计时器，当单击“开始计时”按钮后启动计时器，输入框会从0开始进行计时，单击“暂停计时”后可以暂停计时。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var flag=0;
				var timeID;
				function beg(){
					var i=form1.num.value;
					i++;
					form1.num.value=i;
					timeID=setTimeout("beg()",1000);
				}
				function sta(){
					if(flag==0){
						beg();
						flag=1;
					}
				}
				function pau(){
					clearTimeout(timeID);
					flag=0;
				}
		</script>
		<form id="form1" name="form1" method="post" action="">
			<input type="text" name="num" size="1" value="0" />
			<input type="button" name="start" value="开始计时" onclick="sta();" />
			<input type="button" name="pause" value="暂停计时" onclick="pau();" />
		</form>
	</body>
</html>

在这里插入图片描述

如果觉得对你有用，点赞关注我哦，一起进步，我的微信公众号是：新白者，里面分享了很多知识。

新白者
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript和jQuery总结
zz15870716119的博客
08-04 656
JavaScript   一.数据类型 数据类型：number数字，String 字符串，Boolean 布尔，对象类型 Typeof（）：识别数据类型 parselnt():字符串转化为整数 ParseFloat：字符串转化为小数 二.js 系统的方法 DOM：页面文档对象模型（页面） BOM：浏览器对象模型（浏览器） Document.Writeln（）：DOM输出在页面中 windo...
jQuery学习总结一
千铭丶博客
06-18 2924
jQuery jQuery是一个优秀的JavaScript框架,轻量级的JS库，封装了JS、CSS、DOM。 方便处理HTML、Event、实现动画效果，方便为网站提供AJAX交互。 使用户的HTML页面保持代码和HTML页面分离。 轻量级：侵入性低 耦合度低 重量级：侵入性高 耦合度高 jQuery使用步骤： 1.引用jQuery 2.使用jQuery选择器定位节点 3.调用jQuery...
JQuery 学习总结及实例
weixin_34166472的博客
04-26 87
1、JQuery简介       普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库，比如Prototype、Dojo、ExtJS、JQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对JavaScript的封装，也就是咱们调用JQuery的一句函数，JQuery内部这句...
JavaScript+JQuery学习笔记
最新发布
gjb760662328的博客
02-22 506
JavaScript+JQuery学习笔记
Jquery学习总结
01-08
这是本人通过一段时间的学习后得的总结，让初学者少走弯路
重二师JavaScript前端设计实验报告及2022期末作业
07-20
这篇实验报告和期末作业主要涵盖了JavaScript前端设计的相关知识，...总的来说，这个实验报告和期末作业全面覆盖了前端开发中的诸多重要概念和技术，不仅锻炼了学生的编程技能，还提升了他们的项目实施和文档撰写能力。
JavaScript程序设计——事件处理实验报告.docx
11-11
实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...
《面向网络发布的GIS可视化开发语言实验》课程教学大纲.docx
12-13
实验课程的教学目标主要包括以下几个方面： 1. **HTML基础**：学生需要了解HTML的基本语法，掌握如何在编辑环境中编写HTML代码，包括文字编辑、表达、列表和表单的控制。通过实验一至实验四，学生将逐步熟悉和掌握...
操作系统实验多级反馈队列（包括源码及实验报告）
05-10
在本实验中，你将遇到以下几个关键知识点： 1. **进程状态与调度**：理解进程的创建、就绪、执行和等待状态，以及调度器如何根据这些状态进行决策。 2. **时间片轮转**：在第一级队列，进程分配到一个短时间片，...
jQuery简单自定义图片轮播插件及用法示例
11-26
插件的主体部分定义了几个关键变量，如图片宽度、高度、动画速度等，并使用`$.extend()`方法合并用户自定义的参数与默认参数。插件的核心功能在于`init`和`show`两个函数。 1. `init`函数：负责初始化轮播图。遍历...
JQuery学习总结及实例中文WORD版
07-22
资源名称：JQuery 学习总结及实例 中文WORD版内容简介：普通Javaｓｃｒｉｐｔ的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对Javaｓｃｒｉｐｔ 的封装库，比如Prototype、Dojo、ExtJS、JQuery等，这些库对Javaｓｃｒｉｐｔ进行了封装，简化了开发。这些库是对 Javaｓｃｒｉｐｔ的封装，也就是咱们调用JQuery 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
javascript实训
03-22
在学校完成的javascript的实训 项目：购物网站 基本功能： 网站显示商品分类和商品信息，提供搜索商品、浏览商品的功能； 用户能够注册后购物，查看订单、购物车和个人信息； 实现效果： 图片放大特效，浮动广告，文字滚动，商品秒杀活动，用户注册验证等。
JavaScript课程设计实训大作业：购物网站（含源代码+运行截图+实训报告）
06-05
基本功能： 网站显示商品分类和商品信息，提供搜索商品、浏览商品的功能； 用户能够注册后购物，查看订单、购物车和个人信息； 管理员有管理商品和用户的功能。 实现效果： 图片放大特效，浮动广告，文字滚动，商品秒杀活动，用户注册验证等。 1.1功能介绍 基本实现了网站显示商品分类和商品信息，提供搜索商品、浏览商品的功能；注册和登录，查看订单、购物车和个人信息注册验证；图片放大特效，浮动广告，弹窗广告，文字滚动，商品秒杀活动等。 1.2开发技术 综合运用HTML+CSS+JavaScript技术。 2.1 系统模块划分 网页的模块主要由主页、栏目页、商品详情页、轮播页、个人信息登录页面、秒杀页、购物车、注册和登录、咨询跳转到微信和QQ页、流动广告、弹窗广告等
java script实训心得_javascript实训报告总结.docx
weixin_42524165的博客
02-24 1万+
javascript实训报告总结Javascript实训报告　　专业名称:计算机应用技术　　班级名称：　　学员姓名：　　指导教师：_______________　　完成日期：　　一、简介：　　Web标准并不是一个单一的标准，而是一个系列的标准的集合。Web标准中具有代表性的几种语言有：XML可扩展标记语言、XHTML可扩展超文本标记语言、CSS层叠样式表、DOM文档对象模型、JavaScript脚...
jQuery学习心得
热门推荐
小疯的代码健身房
01-02 1万+
我第一次接触jquery是在大二下学期的时候，当时我们课程在讲web基础，也就是html css和js那些，我在慕课网（一个不错的在线视频学习网站，现在也在用）上提前学习了jQuery和jQuery-UI。当时只是为了腾出点时间学习更多东西，想走在大多数人前面，时间久了，等到现在上这门课才真正领略到jquery（下面简称JQ）这个前端框架的魅力。 JQ是一个轻量级的js库，它的宗旨是write
JavaScript事件处理的例题
新白的博客
05-19 1191
知道的越多，所不知道的越多。如果带给你帮助，点赞支持一下。 JavaScript事件处理的例题1、表单验证2、验证数字输入3、利用document对象的bgColor属性改变背景色，添加鼠标悬停事件4.附加题（选做） 1、表单验证 要求：用户名不少于2位，并且用户名第一个字符需为字母! 密码长度必须在6~15之间。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>.
JavaScript -- jQuery网页开发案例笔记
m0_56387086的博客
08-08 1268
常用的JavaScript库：jQuery 、 Prototype 、 YUI 、 Dojo 、Ext JS 、 移动端的zepto这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的。1. 语法animate2. 参数（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。...............
JavaScript技术实验报告4
weixin_44788220的博客
06-27 3545
JavaScript技术实验报告4 2:函数求阶乘。 3. 判断是否是闰年 4.编写函数，计算圆的面积和周长 5. 编写函数，比较最大值：求出求两个数中的最大值；求出三个数中的最大值 6. 编写函数，计算并输出k以内的最大的10个能被13或17整除的自然数之和 7. 编写一个简单的计算器。...
JavaScript + jQuery 知识复习总结（附超实用jQuery中文文档）
OlarianBlog
11-25 825
目录一、注意点二、使用严格检查模式三、JavaScript 数据类型1. 字符串类型2. 数组类型3. 对象4. 流程控制5. Map和Set四、函数1. 定义函数2. 变量作用域 一、注意点 1. 在html中引入js文件的时候组件需要成对出现，即 <script src=""></script> 2. JS严格区分大小写 3. JS不区分小数和整数 4. 局部变量使用let定义(es6中) 5. Js中所有的键都是字符串,值是任意对象 6. 所有变量定义都放在函数头部 二
JavaScript与JQuery分享
07-19
本报告通过深入分析 JavaScript 和 JQuery 的共享与区别，旨在帮助开发人员更全面地掌握这两种技术，提高其前端开发能力。 首先，本报告从严格保密的角度出发，强调了 JavaScript 和 JQuery 的重要性以及正确的认识...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值