javascript基础实验心得 js的实验报告

转载

Python数据分析 2024-04-10 13:33:28

文章标签 javascript基础实验心得 html javascript 用户名 文章分类 JavaScript 前端开发

实验一： 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>

javascript基础实验心得 js的实验报告_javascript基础实验心得

打印九九乘法表

<!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>

javascript基础实验心得 js的实验报告_用户名_02

通过弹出框提示用户输入时间信息，根据用户输入的时间弹出问候信息。

<!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基础实验心得 js的实验报告_html_03

javascript基础实验心得 js的实验报告_javascript基础实验心得_04

实验二：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>

javascript基础实验心得 js的实验报告_javascript_05

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>

javascript基础实验心得 js的实验报告_用户名_06

javascript基础实验心得 js的实验报告_javascript基础实验心得_07

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基础实验心得 js的实验报告_用户名_08

实验三：JavaScript事件处理

表单验证
要求：用户名不少于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>

javascript基础实验心得 js的实验报告_javascript基础实验心得_09

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>

javascript基础实验心得 js的实验报告_javascript_10

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>

javascript基础实验心得 js的实验报告_javascript基础实验心得_11

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基础实验心得 js的实验报告_html_12

实验四：JavaScript常用文档对象

JavaScript的文档对象的常用事件有哪些？
     答：常用事件有：
onblur():元素或窗口本身失去焦点时触发 
onclick():单击鼠标左键时触发
onfocus():任何元素或窗口本身获得焦点时触发
onkeydown()：键盘上的按键被按下时触发
onkeyup():释放键盘上的按键时触发
onmousedown():单击任何一个鼠标按键时触发
onscroll():在任何滚动条的元素或窗口上滚动时触发
onmouseover():鼠标移到某个元素上时触发
onmouseout():将鼠标从指定的元素上移开时触发

设计一个含有表单的页面，在表单上放入一个文本框，编写程序，当鼠标在页面上移动时，鼠标的坐标将显示在这个文本框中。

<!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>

javascript基础实验心得 js的实验报告_html_13

应用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>

javascript基础实验心得 js的实验报告_javascript基础实验心得_14

javascript基础实验心得 js的实验报告_javascript基础实验心得_15

使用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>

javascript基础实验心得 js的实验报告_用户名_16