使用 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 输入框内容格式验证代码
Feb 11 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
jquery实现动态画圆
Dec 04 Javascript
javascript实现在线客服效果
Jul 15 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
JS解惑之Object中的key是有序的么
May 06 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
与数据库连接
2006/10/09 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
vue下载二进制流图片操作
2020/10/26 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
python 域名分析工具实现代码
2009/07/15 Python
Python中一行和多行import模块问题
2018/04/01 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python 实现多维数组转向量
2019/11/30 Python
python 创建一维的0向量实例
2019/12/02 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
会计电算化学生个人的自我评价
2014/02/08 职场文书
公司财务部岗位职责
2015/04/14 职场文书
初中同学会致辞
2015/08/01 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA