使用 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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
es5 类与es6中class的区别小结
Nov 09 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
php实现的简单检验登陆类
2015/06/18 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
党员违纪检讨书
2014/02/18 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
前台接待员岗位职责
2015/04/15 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
MySQL 四种连接和多表查询详解
2021/07/16 MySQL