使用 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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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 等比例缩放图片详解及实例代码
2016/09/18 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
Electron 调用命令行(cmd)
2019/09/23 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
工作过失检讨书
2014/02/23 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
中职生求职信
2014/07/01 职场文书
护士求职自荐信范文
2015/03/04 职场文书
Python函数对象与闭包函数
2022/04/13 Python