使用 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 radio 联动效果
Mar 04 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 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
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
python带参数打包exe及调用方式
2019/12/21 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
机关作风建设工作总结
2014/10/23 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
主婚人致辞精选
2015/07/28 职场文书
勤俭节约主题班会
2015/08/13 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL