资源描述
实验二、Javascript
一、实验目的
1． 掌握JavaScript脚本的编写方法；
2． 掌握Javascript脚本操作DOM元素及常用方法调用；
3． 掌握HTML页面与Javascript脚本关联使用。
二、实验内容
1． 编写一个能够输入学生成绩的界面；
2． 编写Javascript代码，增加输入框并计算总成绩；
3． 编写一个显示当前时间的DIV文本块。
三、实验步骤
1. 编写一个能够计算学生成绩的界面；
1) 需要实现的界面如下：
2) 要求单击“增加”按钮后，能够增加一行学生信息；单击“计算”按钮后，能够计算出学生的平均分和学生人数；
3) 下面是本界面的部分源代码，请将其补充完整；
<!--单击、计算平均分、增加行、使用数组。-->
<html>
<head>
<title>JavaScript</title>
<script language="JavaScript">
var num=2;
var names=new Array();
var scores=new Array();
var timerId;
var flage=0;
for(i=0;i<num;i++)
{ names[i]= "abc";
scores[i]=60;}
function calculate(){
var total=0;
for(i=0;i<num;i++){
total=total+scores[i];}
frmMain.txtAverage.value=parseInt(total/num);
frmMain.txtTotal.value=num;
}
function getStudents(n){
var content="";
for(i=0;i<n;i++){
content+="学生姓名：<input type='text' id='txtName' size=8 value='"+names[i]+"'> ";
content+="学生成绩：<input type='text' id='txtScore' name='txtScore' size=5 value='"+scores[i]+"'><br />";}
return content;}
function getStudent(n){
var content="";
content+="学生姓名：<input type='text' id='txtName' size=8 value='"+names[i]+"'> ";
content+="学生成绩：<input type='text' id='txtScore' name='txtScore' size=5 value='"+scores[i]+"'><br />";
return content;}
function addStudent(){
num++;
names[num-1]= "abc";
scores[num-1]=60;
document.getElementById("students").innerHTML +=getStudent(num);}
</script>
</head>
<link type="text/css" rel=stylesheet href="2-2.css">
<body onLoad="show_date()">
学生成绩录入：
<hr>
<p id="demo"></p>
<form id="frmMain">
学生平均分:<input type="text" id="txtAverage" size=4>
学生人数：<input type="text" id="txtTotal" size=4><br />
<hr>
<br />
<div id="students">
<script type="text/JavaScript">
document.write(getStudents(num));
</script>
</div>
<hr>
<input type="button" value="计算" onClick="calculate()">
<input type="button" value="增加" onClick="addStudent()">
</form>
<div class="di" id="div2" onMouseOver="stop_move()" onMouseOut="show_date()">
<script type="text/JavaScript" language="JavaScript">
function show_date(){
var d=new Date();
var msg=(d.getFullYear())+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+"<br>"+d.getHours()+"时"+d.getMinutes()+"分"+d.getSeconds()+"秒"
var obj=document.getElementById("div2");
var left=parseInt(obj.style.left);
var top=parseInt(obj.style.top);
var sumtop=parseInt(document.body.clientHeight);
var sumleft=parseInt(document.body.clientWidth);
if(isNaN(left)){left=5};
if(isNaN(top)){top=300};
if(flage==0)
{
obj.style.top=(top+10)+'px';
obj.style.left=(left+25)+'px';
if(top>=630||left>=1200)
flage=1;
}
if(flage==1)
{
obj.style.top=(top-15)+'px';
obj.style.left=(left+25)+'px';
if(left>=1290||top<=50)
flage=2;
}
if(flage==2)
{
obj.style.top=(top-10)+'px';
obj.style.left=(left-35)+'px';
if(top<=30||left<=120)
flage=3;}
if(flage==3){
obj.style.top=(top+10)+'px';
obj.style.left=(left-25)+'px';
if(left<=50||top>=sumtop)
flage=0;}
obj.innerHTML=msg;
timerId=window.setTimeout("show_date()",1000);}
function stop_move(){
clearTimeout(timerId);}
</script>
</div>
</body>
</html>
2. 在该界面的基础上增加一个时钟，其样式如下：
CSS样式代码：.di{background-color:yellow;position:absolute;top:200px;left:150px;z-index:2}
实验结果如图：
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
