首页 >web前端 >js教程 > 正文

如何使用JavaScript制作页面效果

转载2021-04-19 11:04:190725
本篇文章给大家详细介绍一下使用JavaScript制作页面的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

使用 JavaScript 制作页面效果

DOM 编程

DOM 编程(Document Object Model)文档对象模型
在这里插入图片描述
在 DOM 编程中,把整个页面看成一个 document 对象,其中的 html 元素为具体对象,在 DOM 中的核心在于找到相对应的 HTML 元素对象,然后对进行操作(属性或样式的修改)还可以生成新的 HTML 元素对象

在 JS 查找页面中的元素

通过表单的 name 包含关系找到对象:

document.calForm.num1

通过 HTML 元素的 id 属性获得某个 HTML 元素对象:

document.getElementById(id)

通过 HTML 元素的 name 属性获得多个 name 属性值相同的 HTML 元素对象返回一个数组,该数组中存放所有同 name 属性的对象

document.getElementsByName(name)

通过 HTML 元素的标签名获得多个同标签的 HTML 元素对象

document.getElementsByTagName(tagName)

动态时间

在页面上显示的时间是动态走动的,当页面启动时显示时间,时间分两种:

  1. 服务端时间(通过 Java 获取);
  2. 客户端时间(通过 JS 获取),根据每个客户端上的时间来显示。
    在这里插入图片描述
    在这里插入图片描述

全选全不选功能

在这里插入图片描述
在这里插入图片描述

【推荐学习:javascript高级教程

以上就是如何使用JavaScript制作页面效果的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除

  • 相关标签:JavaScript
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    醉折花枝作酒筹

    飞花飘絮,霓裳翩翩舞,几多情愫心飞扬。

    最近文章
    css如何设置指定网格的大小和位置463
    css如何定义网格线大小1153
    教你一招搞定css背景图的大小835
    推荐视频教程
  • JavaScript基础精讲视频教程JavaScript基础精讲视频教程
  • JavaScript基本语法及基本语句视频教程JavaScript基本语法及基本语句视频教程
  • JavaScript OOP调试技巧视频教程JavaScript OOP调试技巧视频教程
  • JavaScript对象与常用设计模式JavaScript对象与常用设计模式
  • JavaScript 经典案例JavaScript 经典案例
  • 视频教程分类