使用 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 相关文章推荐
jquery实现手风琴效果实例代码
Nov 15 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
QML实现圆环颜色选择器
Sep 25 Javascript
JS回调函数深入理解
Oct 16 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
一道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
php中filter_input函数用法分析
2014/11/15 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
python读取ini配置文件过程示范
2019/12/23 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
关于毕业的广播稿
2014/01/10 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
民政局未婚证明
2015/06/15 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
新入职员工工作总结
2015/10/15 职场文书