JavaScript综合实验

一、实验目的

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边框颜色恢复为黑色，文字正常显示。

代码：

html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  	<TITLE> 问卷调查 </TITLE>

	<style type="text/html" title=css>css">html" title=css>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）

html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/html" title=css>css">html" title=css>css">
</style>
<script language="JavaScript">html" title=javascript>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:

html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>html" title=css>css">
      textarea{
        width:500px;
        height:200px;
      }
    </style>
    <script src="html" title=jquery>jquery-3.6.0.js">html" title=javascript>javascript"></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>html" title=javascript>javascript">
  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>

太多了，如果需要，建议直接复制：

html" title=jquery>jquery-3.6.0.js,上传到我的资源啦！

【小编真是越来越懒了啊，作业老是拖着了，不行啊，我要快点做，冲鸭~今天的早餐奶味道不错，O(∩_∩)O哈哈，卤肉卷依旧好吃，不过第一层卷破了，所以店家又给我加了一层皮，好吃好吃！】

句子君：

——别忘了和妈妈打电话
“听说神不能无处不在，所以创造了妈妈。到了妈妈的年龄，妈妈仍然是妈妈的守护神。妈妈这个词，只是叫一叫，也触动心弦。”
——《请回答1988》

龙应台说：“所谓父母子女，只不过意味着目送他的背影渐行渐远。”但是我相信我们会一直陪伴，因为我们真正分享过彼此的心跳。

白发带花君莫笑，岁月从不败美人！