您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

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

<!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>

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进