一、实验目的
- 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;}
/*********begin***********/
.txt1{
border: 2px solid red;
font-weight:bold;
}
.txt2{
border: 2px solid black;
font-weight:normal;
}
// 此处补充CSS代码
/********end***********/
</style>
<script language="JavaScript" >
/*********begin***********/
//此处补充js代码
function aa(){document.getElementById("div1").className="txt1";}
function bb(){document.getElementById("div1").className="txt2";}
function cc(){document.getElementById("div2").className="txt1";}
function dd(){document.getElementById("div2").className="txt2";}
/********end***********/
</script >
</HEAD>
<BODY>
<h1>高校"阳光体育"开展情况调查表</h1>
<form name="question" id="question">
<span>
<div id="div1" onMouseOver = "aa()" onMouseOut = "bb()">
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="div2" onMouseOver = "cc()" onMouseOut = "dd()">
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,若使用JQuery框架完成该功能,并现场演示,计分在95分以上。
代码: (未采用JQuery)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
</style>
<script language="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);
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>
<textarea name="" id="text" cols="50" rows="10"></textarea>
<br><br>
<button onclick="chansheng()">随机产生20个整数</button>
<button onclick="zhengchu()">找出能被5整除的数</button>
<button onclick="qingchu()">重置</button>
</BODY>
</HTML>
采用JQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
textarea{
width:500px;
height:200px;
}
</style>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<form>
<textarea id="text"></textarea><br>
<input type="button" id="create" value="随机产生20个整数"></input>
<input type="button" id="find" value="找出能被5整除的整数"></input>
<input type="button" id="reset" value="重置"></button>
</form>
<script>
var str=[]
var flag=0;
$('#create').click(function () {
var s=[]
while (s.length<20){
var temp=Math.round(Math.random()*8999+1000);
s.push(parseInt(temp))
}
$('#text').text("随机产生20个4位整数,分别如下:\n"+s+"\n从小到大排序后结果为:\n"+s.sort());
str=s;
flag=0;
})
$('#find').click(function () {
if(flag)return ;
if(str=="")return ;
var temp=$('#text').text();
var t=[]
for(var i=0;i<str.length;i++){
if(str[i]%5==0)t.push(parseInt(str[i]));
}
$('#text').text(temp+"\n"+"能被5整除的整数有:\n"+t);
flag=1;
})
$('#reset').click(function () {
$('#text').text("");
str=[]
flag=0
})
</script>
</body>
</html>
太多了, 如果需要,建议直接复制:
jquery-3.6.0.js,上传到我的资源啦!
【小编真是越来越懒了啊,作业老是拖着了,不行啊,我要快点做,冲鸭~今天的早餐奶味道不错,O(∩_∩)O哈哈,卤肉卷依旧好吃,不过第一层卷破了,所以店家又给我加了一层皮,好吃好吃!】
句子君:
——别忘了和妈妈打电话
“听说神不能无处不在,所以创造了妈妈。到了妈妈的年龄,妈妈仍然是妈妈的守护神。妈妈这个词,只是叫一叫,也触动心弦。”
——《请回答1988》 龙应台说:“所谓父母子女,只不过意味着目送他的背影渐行渐远。”但是我相信我们会一直陪伴,因为我们真正分享过彼此的心跳。
白发带花君莫笑,岁月从不败美人!