使用 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学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
Vue精简版风格概述
Jan 30 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 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
PHP Array交叉表实现代码
2010/08/05 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
深入理解Django的自定义过滤器
2017/10/17 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
为什么要用EJB
2014/04/17 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
公积金转移接收函
2014/01/11 职场文书
校园十大歌手策划书
2014/02/01 职场文书
运动会解说词200字
2014/02/06 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
法人代表任命书范本
2014/06/05 职场文书
护理目标管理责任书
2014/07/25 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
个人求职自荐信范文
2015/03/06 职场文书
交通事故代理词范文
2015/05/23 职场文书
导游词之五台山
2019/10/11 职场文书