使用 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 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 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
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Python中删除文件的程序代码
2011/03/13 Python
python求crc32值的方法
2014/10/05 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
python利用faker库批量生成测试数据
2020/10/15 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
经典的班主任推荐信
2013/10/28 职场文书
思想汇报格式
2014/01/05 职场文书
校庆标语集锦
2014/06/25 职场文书
大学生简短的自我评价
2014/09/12 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python