实验二、Javascript

一、实验目的

1．掌握JavaScript脚本的编写方法；

2．掌握Javascript脚本操作DOM元素及常用方法调用；

3．掌握HTML页面与Javascript脚本关联使用。

二、实验内容

1．编写一个能够输入学生成绩的界面；

2．编写Javascript代码，增加输入框并计算总成绩；

3．编写一个显示当前时间的DIV文本块。

三、实验步骤

1. 编写一个能够计算学生成绩的界面；

1) 需要实现的界面如下：

2) 要求单击“增加”按钮后，能够增加一行学生信息；单击“计算”按钮后，能够计算出学生的平均分和学生人数；

3) 下面是本界面的部分源代码，请将其补充完整；

<html>

<head>

<title>JavaScript</title>

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>

学生成绩录入：

<hr>

学生平均分:<input type="text" id="txtAverage" size=4>

学生人数：<input type="text" id="txtTotal" size=4><br />

<hr>

<br />

document.write(getStudents(num));

</script>

</div>

<hr>

</form>

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}

实验结果如图：

第二篇：JavaScript实验题

JavaScript实验题

相关推荐