十一、使用 JavaScript 制作页面效果

朱雀 2023-01-13 09:48 15阅读 0赞

### 文章目录 ###

*  十一、使用 JavaScript 制作页面效果
 *   *  11.1 DOM 编程
     *  11.2 在 JS 查找页面中的元素
     *   *  11.2.1 动态时间
         *  11.2.2 全选全不选功能

--------------------

# 十一、使用 JavaScript 制作页面效果 #

## 11.1 DOM 编程 ##

DOM 编程(Document Object Model)文档对象模型  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]  
在 DOM 编程中，把整个页面看成一个 document 对象，其中的 html 元素为具体对象，在 DOM 中的核心在于找到相对应的 HTML 元素对象，然后对进行操作(属性或样式的修改)还可以生成新的 HTML 元素对象

## 11.2 在 JS 查找页面中的元素 ##

1.  通过表单的 name 包含关系找到对象:`document.calForm.num1`
2.  通过 HTML 元素的 id 属性获得某个 HTML 元素对象:  
    `document.getElementById(id)`
3.  通过 HTML 元素的 name 属性获得多个 name 属性值相同的 HTML 元素对象返回一个数组，该数组中存放所有同 name 属性的对象`document.getElementsByName(name)`
4.  通过 HTML 元素的标签名获得多个同标签的 HTML 元素对象  
    `document.getElementsByTagName(tagName)`

### 11.2.1 动态时间 ###

在页面上显示的时间是动态走动的,当页面启动时显示时间,时间分两种:

1.  服务端时间（通过 Java 获取)；
2.  客户端时间（通过 JS 获取）,根据每个客户端上的时间来显示。  
    ![在这里插入图片描述][20210417185105836.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]

### 11.2.2 全选全不选功能 ###

![在这里插入图片描述][20210417185245970.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]: /images/20221022/31bcb5daeb2f4750856411f9edcc5f3e.png
[20210417185105836.png]: /images/20221022/ffef38c58d06414595d023dd2532a077.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]: /images/20221022/d796c94c13ba47dcb49629fe4e7cbc8e.png
[20210417185245970.png]: /images/20221022/c20a440c0d6b4aa6be2f98cdaccf489a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]: /images/20221022/923bb17cfdf14e3e98777010a8eec0b5.png