一、实验目的
1.熟悉CSS的使用方法,能熟练定义CSS选择器,熟练书写CSS样式表;
2.掌握利用JavaScript+CSS实现样式的动态变换。
3.掌握JavaScript内置对象Array、Math对象的使用
二、实验内容
内容一:JavaScript+CSS综合实验
1、打开页面questionnaire.html,效果如下图。
2、阅读代码questionnaire.html,补充JavaScript和CSS代码实现以下效果
①鼠标移入 div时,该div边框颜色变为红色,文字加粗显示,如下图。
②鼠标移出 div时,该div边框颜色恢复为黑色,文字正常显示。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 问卷调查 </TITLE>
<style type="text/css">
h1 {background-color: #00ff00;text-align:center}
div {width:500px;border: 2px solid ;padding:10px;}
span {position:absolute;left:50%;margin-left:-250px;}
/*********此处补充CSS代码***********/
.t1{
border: 2px solid red;
font-weight: bold;
}
.t2{
border: 2px solid black;
font-weight: normal;
}
/********end***********/
</style>
<script language="JavaScript" >
/*********此处补充js代码***********/
function a1(){document.getElementById("num").className="t1";}//className 属性设置或返回元素的 class 属性。
function a2(){document.getElementById("num").className="t2";}
function b1(){document.getElementById("time").className="t1";}
function b2(){document.getElementById("time").className="t2";}
/********end***********/
</script >
</HEAD>
<BODY>
<h1>高校"阳光体育"开展情况调查表</h1>
<form name="question" id="question">
<span>
<div id="num" onmouseover="a1()" onmouseout="a2()">
1.您每周锻炼次数是:<br>
<input type="radio" name="num" value="one" /> 1次
<br />
<input type="radio" name="num" value="two" /> 2次
<br />
<input type="radio" name="num" value="three" /> 3次
<br />
<input type="radio" name="num" value="threeover" /> 3次以上
</div>
<br />
<div id="time" onmouseover="b1()" onmouseout="b2()">
2.您平均每次锻炼时间是:<br>
<input type="radio" name="time" value="thirty" /> 30分钟以内
<br />
<input type="radio" name="time" value="sixty" /> 30分钟-60分钟
<br />
<input type="radio" name="time" value="ninty" /> 60分钟-90分钟
<br />
<input type="radio" name="time" value="nintyover" /> 90分钟以上
</div>
</span>
</form>
</BODY>
</HTML>
内容二:JavaScript内置对象的使用
按如下图所示的布局,完成下列功能:
(1)单击“随机产生20个整数”按钮时,能够随机产生20个4位整数(1000—9999),将产生的20个整数写入数据组中,将其从小到大进行排序,输出在多行文本框中;
(2)单击“找出能被5整除的整数”按钮时,从产生的20个随机整数中找出能够被5整除的整数,并在多行文本框中输出;
(3)单击“重置”按钮时,将多行文本框中的所有内容清空。
(4)网页命名为Random.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
span {position:absolute;left:50%;margin-left:-250px;}
</style>
<script type="text/javascript">
var arr1=new Array(20);
var arr2=new Array(20);
var brr=new Array(20);
var i,j;
var k;
chansheng = function (){
for(i=0;i<20;i++)
{
j = Math.floor(Math.random() * (9999 - 1000 + 1) + 1000);//返回介于 0(包含) ~ 1(不包含) 之间的一个随机数:Math.random();
arr1[i]=j;
}
arr2 = arr1.sort();
document.getElementById("text").innerHTML=("随机产生20个整数:");
for(i=0;i<20;i++)
document.getElementById("text").innerHTML=(document.getElementById("text").innerHTML +arr1[i]+",");
document.getElementById("text").innerHTML=(document.getElementById("text").innerHTML +"\n");
document.getElementById("text").innerHTML=(document.getElementById("text").innerHTML +"从小到大排序:"+"\n");
for(i=0;i<20;i++)
document.getElementById("text").innerHTML=(document.getElementById("text").innerHTML +arr2[i]+",")
document.getElementById("text").innerHTML=(document.getElementById("text").innerHTML +"\n");
}
zhengchu= function (){
k=0;
document.getElementById("text").innerHTML=(document.getElementById("text").innerHTML +"能被五整除的数:"+"\n");
for(i=0;i<20;i++)
{
if(arr2[i]%5==0)
{
brr[k] = arr2[i];
k++;
}
}
for(i=0;i<k;i++)
document.getElementById("text").innerHTML=(document.getElementById("text").innerHTML +brr[i]+",");
document.getElementById("text").innerHTML=(document.getElementById("text").innerHTML +"\n");
}
qingchu= function (){
document.getElementById("text").innerHTML="";
}
</script>
</head>
<body>
<span>
<textarea id="text" cols="50" rows="10"></textarea><br/><br/>
<button id="bt1" onclick="chansheng()">随机产生20个整数</button>
<button id="bt2" onclick="zhengchu()">找出能被5整除的整数</button>
<button id="bt3" onclick="qingchu()">重置</button>
</span>
</body>
</html>