作业13 Array对象（v2）

站长

2年前更新

460

任务详情

将执行结果截图粘贴到本文档对应题目下方（删掉示例截图），提交本文档和html源文件到云班课作业

文件在底部可直接下载

题目:

使用数组对象创建包含3本书本信息的数组，并在网页中通过点击书名读取书本的书名、作者、出版社信息。使用chrome浏览器验证HTML文件执行结果。

运行浏览:https://z7h.cn/JavaScript/13.html

代码：

<html>
    <head>
  <title>JavaScript数组对象应用案例</title>
  <meta charset="UTF-8">
              <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        #namewindow {
            background: linear-gradient(rgba(229, 255, 8, 0.841), rgba(0, 225, 255, 0.404));
            width: 250px;
            height: 200px;
            position: fixed;
            left: 100px;
            top: 80px;
            font: 20px/180% "Microsoft YaHei", "微软雅黑", "宋体";
            text-align: center;
        }
    </style>
  <script>
    function upBookInfo(titleInfo) {
      document.BookForm.BookTitle.value = titleInfo;
      document.BookForm.BookAuth.value = this.Auth;
      document.BookForm.BookPublisher.value = this.Publisher;
    }
    function Book(title, auth, publisher) {
      this.Title = title;
      this.Auth = auth;
      this.Publisher = publisher;
      this.UpInfo = upBookInfo;
    }
  </script>
  
</head>
<body>
  <script>
    var Books = new Array();
    Books[0] = new Book("算法与数据结构", "严蔚敏 陈文博", "清华大学出版社");
    Books[1] = new Book("XML/JSP网页编程教材", "吴艾", "北京希望电了出版社");
    Books[2] = new Book("英华大字典", "郑易里", "商务印书馆");
  </script>
  <font color="blue" face="隶书" size="5">单击按钮查阅详细信息</font>
  <form name="BookForm">
    书本1：<input type="button" value="算法与数据结构" onclick="Books[0].UpInfo('算法与数据结构')"><br><br>
    书本2：<input type="button" value="英华大字典" onclick="Books[2].UpInfo('英华大字典')"><br><br>
    书本3：<input type="button" value="XML/JSP网页编程教材" onclick="Books[1].UpInfo('XML/JSP网页编程教材')"><br><br><br><br>
    书名：<input type="text" name="BookTitle"><br><br>
    作者：<input type="text" name="BookAuth"><br><br>
    出版社：<input type="text" name="BookPublisher"><br><br>
  </form>
      <div id="namewindow">
        <p>姓名:罗xx</p>
        <br>
        <p>专业: 计算机应用技术x班</p>
        <br>
        <p>学号: 226501XXXXX</p>
    </div>
</body>

</html>

html文件下载:

860010a208123003.html

下载

html文件

2.1K

1人已评分

赞赏