使用 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 相关文章推荐
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
简明json介绍
2008/09/28 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
Vue中props的详解
2019/05/16 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
实现vuex原理的示例
2020/10/21 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
树莓派升级python的具体步骤
2020/07/05 Python
如何让python的运行速度得到提升
2020/07/08 Python
Python 实现一个计时器
2020/07/28 Python
10张动图学会python循环与递归问题
2021/02/06 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
小学作文评语大全
2014/04/21 职场文书
2014组织生活会方案
2014/05/19 职场文书
消防宣传口号
2014/06/16 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
招商银行工作证明
2015/06/17 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript