JavaScript综合实验

最新推荐文章于 2023-11-25 09:51:58 发布

是君倩

最新推荐文章于 2023-11-25 09:51:58 发布

阅读量473

点赞数

分类专栏： JAVAWEB 文章标签： javascript css css3

本文链接：https://blog.csdn.net/m0_52949203/article/details/124601189

版权

JAVAWEB 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、实验目的

	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>

是君倩

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript综合实验

一、实验目的 1.熟悉CSS的使用方法，能熟练定义CSS选择器，熟练书写CSS样式表； 2.掌握利用JavaScript+CSS实现样式的动态变换。 3.掌握JavaScript内置对象Array、Math对象的使用二、实验内容内容一：JavaScript+CSS综合实验1、打开页面questionnaire.html，效果如下图。2、阅读代码questionnaire.html，补充JavaScript和CSS代码实现以下效果①鼠标移入 div时，该div边框颜色变为红色，文字加粗显示
复制链接

扫一扫