JavaScript综合实验（作业四）

最新推荐文章于 2024-04-23 09:00:12 发布

进击攻城狮

最新推荐文章于 2024-04-23 09:00:12 发布

阅读量495

点赞数 22

分类专栏： JavaScript 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/yi_chen_c/article/details/124640275

版权

JavaScript 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

📋 作者介绍：友友们好我是乱披风锤，大二学生党一枚
💖作者主页：乱披风锤的个人博客主页.跳转到个人简介
🔥我和友友们一样喜欢编辑，天天敲代码🤭，沉迷学习，日渐消瘦。很荣幸能向大家分享我的所学，和大家一起进步。如果文章有错误，欢迎在评论区指正。那么开始今天的学习吧！
🎉 支持我：点赞👍+收藏⭐️+留言📝

JavaScript综合实验

一、实验目的
二、实验内容
- 1.内容一：JavaScript+CSS综合实验
- 2.内容二：JavaScript内置对象的使用
总结

一、实验目的

1.熟悉CSS的使用方法，能熟练定义CSS选择器，熟练书写CSS样式表；
2.掌握利用JavaScript+CSS实现样式的动态变换。
3.掌握JavaScript内置对象Array、Math对象的使用

二、实验内容

1.内容一：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>
    <meta charset="UTF-8">
    <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代码***********/
        .test1{
    border: 2px solid red;
    font-weight: bolder;
}
        .test2{
            border: 2px solid black;
            font-weight: normal;
        }
        /********end***********/
    </style>
    <script language="JavaScript"  >
        /*********此处补充js代码***********/
function fun1(){document.getElementById("div1").className="test1"}
        function fun2(){document.getElementById("div1").className="test2"}
        function fun3(){document.getElementById("div2").className="test1"}
        function fun4(){document.getElementById("div2").className="test2"}
        /********end***********/

    </script >

</HEAD>

<BODY>
<h1>高校"阳光体育"开展情况调查表</h1>
<form name="question" id="question">
<span>
  <div id="div1" onmouseover="fun1()" onmouseout="fun2()">
     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="fun3()" onmouseout="fun4()">
     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>

2.内容二：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">
    <title>Title</title>
  <style>

  </style>
  <script >
var a=new Array(20);
var b=new Array(20);
var c=new Array(20);
var j;var k;
zhengshu1=function () {
  for (var i = 0; i < 20; i++) {
    j = Math.floor(Math.random() * 9000 + 1000);
    a[i] = j;
  }
  document.getElementById("text").innerHTML = ("随机产生20个整数:")
  document.getElementById("text").innerHTML = (document.getElementById("text").innerHTML + "\n");
  b = a.sort();
  for (var i = 0; i < 20; i++) {
    document.getElementById("text").innerHTML = (document.getElementById("text").innerHTML + a[i] + ",");
  }
  document.getElementById("text").innerHTML = (document.getElementById("text").innerHTML + "\n");
  document.getElementById("text").innerHTML = (document.getElementById("text").innerHTML + "从小到大排序");
  document.getElementById("text").innerHTML = (document.getElementById("text").innerHTML + "\n");
  for (var i = 0; i < 20; i++) {
    document.getElementById("text").innerHTML = (document.getElementById("text").innerHTML + b[i] + ",");
  }
  document.getElementById("text").innerHTML = (document.getElementById("text").innerHTML + "\n");
}
  zhengshu2 = function () {
  k=0;
    document.getElementById("text").innerHTML = (document.getElementById("text").innerHTML + "能被5整除的数");
    for (var i = 0; i < 20; i++) {
      if (b[i] % 5 == 0) {
        c[k] = b[i];
        k++
      }
    }
    for (var i = 0; i < k; i++) {
      document.getElementById("text").innerHTML = (document.getElementById("text").innerHTML + c[i] + ",");
    }
  }
  chongzhi=function (){
  document.getElementById("text").innerHTML=" "
  }

  </script>
</head>
<body>
<form method="post">

    <textarea id="text" rows="20" cols="40" ></textarea><br/><br/>
  <input type="button" onclick="zhengshu1()" value="随机产生20个整数">
  <input type="button" onclick="zhengshu2()" value="能被5整除的数">
  <input type="reset" onclick="chongzhi()" value="重置">

</form>
</body>
</html>