使用 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 鼠标拖动图标技术
Feb 07 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
JS实现鼠标按下拖拽效果
Jul 23 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实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
给Python初学者的一些编程技巧
2015/04/03 Python
python3序列化与反序列化用法实例
2015/05/26 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python获取当前路径实现代码
2017/05/08 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python函数的作用域及关键字详解
2019/08/20 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python线程指南分享
2019/11/19 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
伦敦一卡通:The London Pass
2018/11/30 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
银行自荐信范文
2013/10/07 职场文书
大型营销活动计划书
2014/04/28 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
党员承诺书格式范文
2015/04/28 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
Redis数据同步之redis shake的实现方法
2022/04/21 Redis