javaScript:七夕特辑-对象的认识与应用(包含日期对象及相关案例)

目录

一.前言

二.认识对象

在js中声明对象的方法

1.直接使用{}声明对象

2.使用构造函数创建对象

获取属性的值

 执行对象方法

解释

三.对象的应用

代码

效果图 

​编辑

 四.日期对象

1.Date 日期对象 

2. getFullYear() 获取当前年份

3.getMonth() 获取当前日期对象中的月份

4.getDate()获取当前日期对象中的月份的第几天

5.getDay() 表示一周中的第几天

6.getHours()获取当前对象的小时数

7.getMinutes() 获取当前对象的分钟数

8.getSeconds()获取当前的秒数

9.getMilliseconds()获取当前对象的毫秒数

10. 获取1970年1月1日8时到当前时间的毫秒数,称为时间戳  

完整代码

五.日期对象的使用

1.通过日期对象渲染出当前的动态时间

效果图

 实现代码(完整)

2.渲染距离到某某天的倒计时

实现效果图

 实现代码(完整)


一.前言

         当我们编写JavaScript代码时,对象是非常重要的概念和数据类型之一。对象可以被认为是一种复合的数据结构,可以存储和组织键值对。它们具有属性和方法,允许我们存储和操作相关数据。在JavaScript中,对象可以通过对象字面量表示法或通过构造函数创建。我们可以使用对象字面量表示法直接创建简单对象,或者使用构造函数创建更复杂的对象。对象的属性和方法可以通过点符号或方括号访问和修改。

        对象广泛应用于不同的编程场景和需求。它们可以用于存储和组织数据、封装功能和行为、模拟实体等。通过对象的属性和方法,我们可以对数据进行处理、执行操作以及传递信息。理解对象的概念和应用对于编写高效和灵活的JavaScript代码至关重要。不仅如此,在许多流行的JavaScript框架和库中,对象也扮演着重要的角色,例如React、Angular和Vue.js。

        在接下来的讨论中,我们将深入研究JavaScript对象的各个方面,包括对象的创建、属性和方法的访问和修改、对象的遍历和复制等。我们还将探索如何使用对象来解决实际的编程问题。通过深入学习对象的认识与应用,我们将能够更好地利用JavaScript的强大功能,编写可维护、可扩展和高效的代码。

二.认识对象

在js中万物皆对象!!!!

在js中声明对象的方法

1.直接使用{}声明对象

obj= {key:value key 表示属性名,value表示属性值,如果属性值是一个函数,则该属性成为对象方法}

2.使用构造函数创建对象

let obj = new Object();

获取属性的值

        获取属性的值,obj.key

        也可以通过 obj[key]的形式获取和设置属性值,并且该形式支持属性名为变量

  console.log(obj2.name);

 执行对象方法

解释

        执行对象的方法 obj.key();key此时是方法名, 该形式{key:value}也可以成为字面量形式,如果写成{"key":"value"}成为json格式

         obj.key = function(){}给对象设置方法key

         obj.key();调用对象的方法

//声明一个对象let obj1={name:'女娲',age:5000,act:function(){console.log('女娲补天');  //输出act:f f表示函数 方法}}console.log(obj1);let obj2 = {name:'精卫',age:5,act:function(){console.log('精卫填海');}}console.log(obj2);//获取属性的值console.log(obj2.name);//执行对象的方法obj2.act();
 //使用构造函数声明对象let obj3 = new Object();//给对象设置属性和方法obj3.name = '刑天';obj3.age = 230;obj3.act = function(){console.log('刑天舞干戚');};console.log(obj3);obj3.act()obj1.sex = '女'console.log(obj1);let aa = 'name'// .操作符等级较高,obj1.aa//输出undefiedconsole.log(obj1.aa,obj1[aa],obj1['age']);

三.对象的应用

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对象的应用</title><style>*{margin: 0;padding: 0;}.li-1{display: flex;width: 600px;height: 200px;margin: 20px auto;background-color: #eee;}.li-1 .div-img{flex: 1;}.li-1 .div-wz{flex: 3;}h2{margin-bottom: 30px;}</style>
</head>
<body><button id="btn">点击添加数据</button><ul id="txt"></ul></body>
</html>
<script>
let arr= [{name:'女娲',msg:'女娲补天,女娲补天,女娲补天,女娲补天',url:'./images/5e88cd8020b8781bc601ae8e761f1aa.jpg'},{name:'嫦娥',msg:'吃月饼,吃月饼,吃月饼',url:'./images/199.png'},{name:'杨玉环',msg:'杨玉环吃荔枝,杨玉环吃荔枝,杨玉环吃荔枝,杨玉环吃荔枝,杨玉环吃荔枝,杨玉环吃荔枝',url:'./images/5325f59994ba2055636149e107f3a53.jpg'},{name:'貂蝉',msg:'貂蝉快开大',url:'./images/de2f0d368577bd080c1ab37f75e0282.jpg'}
]
let txt = document.getElementById('txt')
let btn = document.getElementById('btn')
btn.onclick = function(){let str = ''for (let i = 0; i < arr.length; i++) {str += `<li class="li-1"><div class="div-img"><img src="${arr[i].url}" width="150px" height="200px" alt=""></div><div class="div-wz"><h2>${arr[i].name}</h2><p>${arr[i].msg}</p></div></li>`}txt.innerHTML+=str}
</script>

效果图 


 四.日期对象

js中具有一个专门用来操作日期的对象类型

    使用 Date()构造函数

     

    如果函数中没有任何参数,则此时得到的结果是当前电脑的系统时间

1.Date 日期对象 

let t1 = new Date()  //日期对象console.log(t1);console.log(typeof t1) //object

2. getFullYear() 获取当前年份

//getFullYear() 获取当前年份console.log(t1.getFullYear());let yy = t1.getFullYear();

3.getMonth() 获取当前日期对象中的月份

 //getMonth() 获取当前日期对象中的月份,月份从0开始//0 表示 一月 console.log(t1.getMonth());let mon = t1.getMonth()

4.getDate()获取当前日期对象中的月份的第几天

 //getDate()获取当前日期对象中的月份的第几天console.log(t1.getDate());let dd = t1.getDate();/*

5.getDay() 表示一周中的第几天

getDay() 表示一周中的第几天,也就是星期几 0 表示周日返回值是 0-6*/console.log(t1.getDay());

6.getHours()获取当前对象的小时数

getHours()获取当前对象的小时数,范围是 0-23
*/    console.log(t1.getHours());let hh = t1.getHours()

7.getMinutes() 获取当前对象的分钟数

//getMinutes() 获取当前对象的分钟数,范围是0-59console.log(t1.getMinutes());let m = t1.getMinutes()

8.getSeconds()获取当前的秒数

//getSeconds()获取当前的秒数,范围是0-59console.log(t1.getSeconds());let s = t1.getSeconds()

9.getMilliseconds()获取当前对象的毫秒数

getMilliseconds()获取当前对象的毫秒数,范围是0-999 1s=1000msconsole.log(t1.getMilliseconds());

10. 获取1970年1月1日8时到当前时间的毫秒数,称为时间戳  

   获取1970年1月1日8时到当前时间的毫秒数,成为时间戳  */console.log(t1.getTime());

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>日期对象</title>
</head>
<body><p id="times"></p>
</body>
</html>
<script>/*js中具有一个专门用来操作日期的对象类型使用 Date()构造函数如果函数中没有任何参数,则此时得到的结果是当前电脑的系统时间*/let t1 = new Date()  //日期对象console.log(t1);console.log(typeof t1) //object//getFullYear() 获取当前年份console.log(t1.getFullYear());let yy = t1.getFullYear();//getMonth() 获取当前日期对象中的月份,月份从0开始//0 表示 一月 console.log(t1.getMonth());let mon = t1.getMonth()//getDate()获取当前日期对象中的月份的第几天console.log(t1.getDate());let dd = t1.getDate();/*getDay() 表示一周中的第几天,也就是星期几 0 表示周日返回值是 0-6*/console.log(t1.getDay());
/*
getHours()获取当前对象的小时数,范围是 0-23
*/    console.log(t1.getHours());let hh = t1.getHours()
//getMinutes() 获取当前对象的分钟数,范围是0-59console.log(t1.getMinutes());let m = t1.getMinutes()
//getSeconds()获取当前的秒数,范围是0-59console.log(t1.getSeconds());let s = t1.getSeconds()
//getMilliseconds()获取当前对象的毫秒数,范围是0-999 1s=1000msconsole.log(t1.getMilliseconds());times.innerHTML = `${yy}-${mon+1}-${dd}-${hh}:${m}:${s}`;/*获取1970年1月1日8时到当前时间的毫秒数,成为时间戳  */console.log(t1.getTime());</script>

五.日期对象的使用

1.通过日期对象渲染出当前的动态时间

效果图

 实现代码(完整)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>日期对象的使用</title>
</head>
<body><p id="aa"></p>
</body>
</html>
<script>
//封装设置当前日期的函数
function seTime(){let myDate = new Date();let yy = myDate.getFullYear();  //年let mm = myDate.getMonth()+1;  //月 记得+1let dd = myDate.getDate();      //日let hh = myDate.getHours();     //时let m = myDate.getMinutes();     //分let s = myDate.getSeconds();      //秒let week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];let day = myDate.getDay();  //一周的第几天aa.innerHTML = `${yy}-${mm<10?'0'+mm:mm}-${dd<10?'0'+dd:dd} ${hh<10?'0'+hh:hh}:${m<10?'0'+m:m}:${s<10?'0'+s:s} 今天是${week[day]}`
}
seTime()
//设置计时器
setInterval(seTime,1000);
</script>

2.渲染距离到某某天的倒计时

实现效果图

 实现代码(完整)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倒计时</title>
</head>
<body><p id="msg"></p>
</body>
</html>
<script>/*获取固定日期的时间对象,必须在 Date()中传入参数传入参数的几种方法1. Date(2023(年),7(月),28(日),0(时),0(分),0(秒)); 这种方式注意:月份需要—12. Date('月 日 年 时:分:秒')3.Date('月 日 ,年 时:分:秒')*/let t1 = new Date(2023,7,28,0,0,0);console.log(t1);let t2 = new Date('8 28 2023 0:0:0');console.log(t2);let t3 = new Date('8 28 ,2023 0:0:0')console.log(t3);function showDate(){//获取当前日期对象let now = new Date();console.log(now);//两个日期对象相减,就得到了两个日期对象相差的时间戳(毫秒数)let time = t3-now;console.log(time);let day =  Math.floor(time/1000/60/60/24) ;console.log(day);let hour = Math.floor(time%86400000/1000/60/60)  ;console.log(hour);let nim = Math.floor(time%86400000/1000/60%60) ;console.log(nim);let sec = Math.floor(time%86400000/1000%60) ;console.log(sec);msg.innerHTML = `距离放假还有${day}天${hour}小时${nim}分钟${sec}秒`;}showDate();setInterval(showDate,1000)</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/103064.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

协议的分层结构

1.1TCP/IP 协议 为了使各种不同的计算机之间可以互联&#xff0c;ARPANet指定了一套计算机通信协议&#xff0c;即TCP/IP 协议(族). 注意TCP /IP 协议族指的不只是这两个协议 而是很多协议&#xff0c; 只要联网的都使用TCP/IP协议族 为了减少 协议设计的复杂度 &#xff0c;大…

每日后端面试5题 第八天

1.UDP和TCP协议的区别 1.UDP无连接&#xff0c;速度快&#xff0c;安全性低&#xff0c;适合高速传输、实时广播通信等。 2.TCP面向连接&#xff0c;速度慢&#xff0c;安全性高&#xff0c;适合传输质量要求高、大文件等的传输&#xff0c;比如邮件发送等。 &#xff08;还…

Grafana 安装配置教程

Grafana 安装配置教程 一、介绍二、Grafana 安装及配置2.1 下载2.2 安装2.2.1 windows安装 - 图形界面2.2.2 linux安装 - 安装脚本 三、Grafana的基本配置3.1 登录3.2 Grafana设置中文 四、grafana基本使用 一、介绍 Grafana是一个通用的可视化工具。对于Grafana而言&#xff0…

基于IDEA使用maven创建hibernate项目

1、创建maven项目 2、导入hibernate需要的jar包 <!--hibernate核心依赖--><dependency><groupId>org.hibernate</groupId><artifactId>hibernate-core</artifactId><version>5.4.1.Final</version></dependency><!--…

ChatGPT影响大学生思想行为模式的三个维度

ChatGPT作为新一代AI技术的代表&#xff0c;深刻嵌入并影响着大学生的日常学习和生活场景&#xff0c;其在提升学习研究效率、拓宽认知阈限、重塑人机互动模式等方面带来极大突破&#xff0c;也会对大学生的思想行为模式产生潜在的影响&#xff0c;这些影响可以从个体、关系与社…

MinDoc:针对IT团队的文档、笔记系统

作为一名IT从业者&#xff0c;无论是在公司团队中&#xff0c;还是在平时自己写一些笔记、博客等文档&#xff0c;我都习惯使用markdown来进行书写。在使用过许多支持markdown语法的系统或软件&#xff08;如Typora、未知、我来、思源、觅道等&#xff09;后&#xff0c;我总觉…

C++信息学奥赛1135:配对碱基链

#include <iostream> #include <string> using namespace std;int main() {string arr;cin >> arr; // 输入字符串for (int i 0; i < arr.length(); i) {if (arr[i] A) {cout << "T"; // 如果当前字符是A&#xff0c;则输出T}else if…

安防监控视频平台EasyCVR视频汇聚平台和税务可视化综合管理应用方案

一、方案概述 为了确保税务执法的规范性和高效性&#xff0c;国家税务总局要求全面推行税务系统的行政执法公示制度、执法全过程记录制度和重大执法决定法制审核制度。为此&#xff0c;需要全面推行执法全过程记录制度&#xff0c;并推进信息化建设&#xff0c;实现执法全过程的…

整理mongodb文档:聚合管道

个人博客 整理mongodb文档:聚合管道 个人博客&#xff0c;求关注&#xff0c;电脑版看体验更加&#xff0c;如果不够清晰&#xff0c;请指出来&#xff0c;谢谢 文章概叙 文章主要通过几个常用的聚合表达式来介绍聚合管道的使用&#xff0c;以及从索引的角度来介绍聚合管道…

MQTT 常用客户端库介绍 (全面涵盖c,c++,java,c#,python)

MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的通信协议&#xff0c;被广泛应用于物联网和分布式系统中。它以其简单、可靠和高效的特性而备受推崇&#xff0c;成为连接设备和应用程序的首选协议。MQTT的重要性不言而喻&#xff0c;它为实时通…

无涯教程-Perl - wait函数

描述 该函数等待子进程终止,返回已故进程的进程ID。进程的退出状态包含在$?中。 语法 以下是此函数的简单语法- wait返回值 如果没有子进程,则此函数返回-1,否则将显示已故进程的进程ID Perl 中的 wait函数 - 无涯教程网无涯教程网提供描述该函数等待子进程终止,返回已故…

云计算技术应用专业实训室建设方案

一、 云计算技术应用系统概述 云计算技术是一种基于互联网的计算模式&#xff0c;通过将计算资源&#xff08;如服务器、存储、数据库、网络、软件等&#xff09;提供为一种服务&#xff0c;使用户能够按需获取和使用这些资源&#xff0c;而无需拥有和管理实际的物理设备。云计…

【Leetcode】118.杨辉三角

一、题目 1、题目描述 给定一个非负整数 numRows,生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中,每个数是它左上方和右上方的数的和。 示例1: 输入: numRows = 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例2: 输入: numRows = 1 输出: [[1]]提示: …

安防视频能力平台EasyNVR视频汇聚平台关闭匿名登陆的问题的解决步骤

EasyNVR是基于RTSP/Onvif协议的安防视频能力平台&#xff0c;它可实现设备接入、实时直播、录像、检索与回放、存储、视频分发等视频能力服务&#xff0c;可覆盖全终端平台&#xff08;pc、手机、平板等终端&#xff09;&#xff0c;在智慧工厂、智慧工地、智慧社区、智慧校园等…

4G工业路由器的功能与选型!详解工作原理、关键参数、典型品牌

随着工业互联网的发展,4G工业路由器得到越来越广泛的应用。但是如何根据实际需求选择合适的4G工业路由器,是许多用户关心的问题。为此,本文将深入剖析4G工业路由器的工作原理、重要参数及选型要点,并推荐优质的品牌及产品,以提供选型参考。 一、4G工业路由器的工作原理 4G工业…

ReactNative 密码生成器实战

效果展示图 使用插件 Formik 负责表单校验、监听表单提交、数据校验错误信息展示 Yup 负责表单校验规则 分析页面 从上述的展示图我们可以看到的主要元素有&#xff1a;输入框、单选按钮和按钮。其中生成的密码长度不可能很大也不可能为负数和 0&#xff0c;所以我们可以限…

各种文件类型

1.配置文件 json app.json 是当前⼩程序的全局配置&#xff0c;包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底 部 tab 等。 普通快速启动项⽬ ⾥边的 app.json 字段的含义 1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径&#xff0c;这是为了让微信客⼾端知道…

【day8】驱动

作业&#xff1a;通过GPIO子系统编写LED灯的驱动&#xff0c;应用程序测试 在led驱动中设置一个定时器&#xff0c;实现底板三盏灯一秒亮一秒灭 1.找引脚 led1---->gpioz组5号引脚 led2---->gpioz组6号引脚 led3---->gpioz组7号引脚 2.加设备树节点 //led的设备树节点…

无涯教程-PHP - 移除的扩展

以下扩展已从PHP 7开始删除- eregmssqlmysqlsybase_ct 以下SAPI已从PHP 7开始删除- aolserverapacheapache_hooksapache2filtercaudiumcontinuityisapimilternsapiphttpdpi3webroxenthttpdtuxwebjames PHP - 移除的扩展 - 无涯教程网无涯教程网提供以下扩展已从PHP 7开始删除…

2023年国赛 高教社杯数学建模思路 - 案例:感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…