使用 JavaScript 制作页面效果


Posted in Javascript onApril 21, 2021

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

11.1 DOM 编程

DOM 编程(Document Object Model)文档对象模型
使用 JavaScript 制作页面效果
在 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 获取),根据每个客户端上的时间来显示。
    使用 JavaScript 制作页面效果
    使用 JavaScript 制作页面效果

11.2.2 全选全不选功能

使用 JavaScript 制作页面效果
使用 JavaScript 制作页面效果

Javascript 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
一道JS算法面试题——冒泡、选择排序
Apr 21 #Javascript
吃通javascript正则表达式
Apr 21 #Javascript
Ajax是什么?Ajax高级用法之Axios技术
在HTML5 localStorage中存储对象的示例代码
Apr 21 #Javascript
canvas多重阴影发光效果实现
JavaScript+HTML实现学生信息管理系统
浅谈vue2的$refs在vue3组合式API中的替代方法
You might like
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
jquery移动节点实例
2015/01/14 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python实现的检测网站挂马程序
2014/11/30 Python
python传递参数方式小结
2015/04/17 Python
详解python3中tkinter知识点
2018/06/21 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python制作朋友圈九宫格图片
2019/11/03 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
市优秀教师事迹材料
2014/02/05 职场文书
老公保证书范文
2014/04/29 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电