使用 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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
javascript事件模型实例分析
2015/01/30 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
vuex的简单使用教程
2018/02/02 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python assert语句的简单使用示例
2019/07/28 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Intersport西班牙:在线体育商店
2019/11/06 全球购物
住房公积金接收函
2014/01/09 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
Python+tkinter实现高清图片保存
2022/03/13 Python