使用 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 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
一道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
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
python分割文件的常用方法
2014/11/01 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
new修饰符是起什么作用
2015/06/28 面试题
关于青春的演讲稿三分钟
2014/08/22 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
捐书活动倡议书
2015/04/27 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
Python保存并浏览用户的历史记录
2022/04/29 Python