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

news2025/1/14 0:48:38

目录

一.前言

二.认识对象

在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
   //输出undefied
   console.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-59
   console.log(t1.getMinutes());
   let m = t1.getMinutes()

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

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

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

getMilliseconds()获取当前对象的毫秒数，范围是0-999 1s=1000ms
   console.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-59
   console.log(t1.getMinutes());
   let m = t1.getMinutes()
//getSeconds()获取当前的秒数，范围是0-59
   console.log(t1.getSeconds());
   let s = t1.getSeconds()
//getMilliseconds()获取当前对象的毫秒数，范围是0-999 1s=1000ms
   console.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;  //月 记得+1
    let 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（秒）); 这种方式注意：
    月份需要—1

    2. 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.coloradmin.cn/o/915115.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ethers.js2：provider提供商

ethers.js2：provider提供商

1、Provider类 Provider类是对以太坊网络连接的抽象&#xff0c;为标准以太坊节点功能提供简洁、一致的接口。在ethers中&#xff0c;Provider不接触用户私钥&#xff0c;只能读取链上信息&#xff0c;不能写入&#xff0c;这一点比web3.js要安全。 除了之前介绍的默认提供者d…
阅读更多...
DataSecurity Plus：守护企业数据安全的坚实屏障

DataSecurity Plus：守护企业数据安全的坚实屏障

在数字化时代&#xff0c;数据被誉为企业最重要的资产之一。然而&#xff0c;随着大数据的兴起和信息的日益增长&#xff0c;企业面临着前所未有的数据安全挑战。为了应对这些挑战&#xff0c;数据安全管理变得至关重要。在这个领域&#xff0c;ManageEngine的DataSecurity Plu…
阅读更多...
TCP滑动窗口

TCP滑动窗口

为什么会有滑动窗口 在计算机网络中&#xff0c;数据通常被分成小块&#xff08;也叫数据段&#xff09;在网络中传输&#xff08;为什么会被分成小块&#xff0c;请了解拥塞窗口和流量控制&#xff09;。这些小块可能会在传输的过程中遇到延迟、丢失或乱序等问题。为了保证数据…
阅读更多...
学习ts（六）数据类型（元组、枚举、Symbol、never）与类型推论

学习ts（六）数据类型（元组、枚举、Symbol、never）与类型推论

1.元组 元组&#xff08;Tuple&#xff09;是固定数量的不同类型的元素的组合。是数组的变种。 元组与集合的不同之处在于&#xff0c;元组中的元素类型可以是不同的&#xff0c;而且数量固定。元组的好处在于可以把多个元素作为一个单元传递。如果一个方法需要返回多个值&…
阅读更多...
适配器模式实现stack和queue

适配器模式实现stack和queue

适配器模式实现stack和queue 什么是适配器模式&#xff1f;STL标准库中stack和queue的底层结构stack的模拟实现queue的模拟实现 什么是适配器模式&#xff1f; 适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结)&#xff…
阅读更多...
微信小程序最新获取头像和昵称的方法 直接用！

微信小程序最新获取头像和昵称的方法 直接用！

调整背景 微信小程序获取用户头像和昵称一个开放接口是wx.getUserInfo&#xff0c;2021年4月5日被废弃&#xff0c;原因是很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗&#xff0c;如果用户点击拒绝&#xff0c;无法使用小程序&#xff0c;这种做法打断了用户正…
阅读更多...
Camunda_4:监听器相关

Camunda_4:监听器相关

Camunda的监听器非常之多&#xff0c;常见的如任务监听与执行监听。我们可以实现相关监听器进行相关操作。 首先明确的是&#xff0c;当执行到某一个节点时&#xff0c;会先进入执行监听&#xff0c;然后进入任务监听。 执行监听和任务监听主要监听以下阶段。 然后我们就能去…
阅读更多...
excel中如果A列中某项有多条记录，针对A列中相同的项，将B列值进行相加合并统计

excel中如果A列中某项有多条记录，针对A列中相同的项，将B列值进行相加合并统计

excel中如果A列中某项有多条记录&#xff0c;针对A列中相同的项&#xff0c;将B列值进行相加合并统计。 如&#xff1a; 实现方法&#xff1a; C1、D1中分别输入公式&#xff0c;然后下拉 IF(COUNTIF($A$1:A1,A1)1, A1,"") #A1根据实际情况调整&#xff0c;如果…
阅读更多...
学习笔记|课后练习解答|电磁炉LED实战|逻辑运算|STC32G单片机视频开发教程（冲哥）|第八集（下）：课后练习分析与解答

学习笔记|课后练习解答|电磁炉LED实战|逻辑运算|STC32G单片机视频开发教程（冲哥）|第八集（下）：课后练习分析与解答

课后练习解答 增加按键3&#xff0c;按下后表示启动&#xff0c;选择的对应的功能的LED持续闪烁&#xff0c;表示正在工作&#xff0c;且在工作的时候无法切换功能。 需求分解 1 增加按键3 #define KEY3 P34 //增加按键32 按下后表示启动 电平控制3 工作状态锁定 表示正在…
阅读更多...
IDEA项目实践——mybatis实践，创建一个父目录专门存放mybatis项目

IDEA项目实践——mybatis实践，创建一个父目录专门存放mybatis项目

系列文章目录 IDEA创建项目的操作步骤以及在虚拟机里面创建Scala的项目简单介绍_intellij 创建scala IDEA项目实践——创建Java项目以及创建Maven项目案例、使用数据库连接池创建项目简介 IDEWA项目实践——mybatis的一些基本原理以及案例 IDEA项目实践——动态SQL、关系映…
阅读更多...
方案：AI边缘计算智慧工地解决方案

方案：AI边缘计算智慧工地解决方案

一、方案背景 在工程项目管理中&#xff0c;工程施工现场涉及面广&#xff0c;多种元素交叉&#xff0c;状况较为复杂&#xff0c;如人员出入、机械运行、物料运输等。特别是传统的现场管理模式依赖于管理人员的现场巡查。当发现安全风险时&#xff0c;需要提前报告&#xff0…
阅读更多...
【SpringSecurity】四、登录处理器

【SpringSecurity】四、登录处理器

文章目录 1、登录成功处理器2、登录失败处理器3、无权限处理器4、登出&#xff08;退出&#xff09;处理器5、安全配置类WebSecurityConfig 前后端分离背景下&#xff0c;前后端通过json进行交互&#xff0c;登录成功或失败&#xff0c;返回的不是一个html页面&#xff0c;而是…
阅读更多...
python 基础篇 day 2 基本输入输出转换

python 基础篇 day 2 基本输入输出转换

文章目录 输入函数——input()原型示例注意 输出函数——print()原型示例 数据类型转换转换路径图示格式举例int(x)float(x)bool(x) 注意 格式化输出法一&#xff1a;%格式 类型表举例第二种&#xff1a;format格式类型表举例第三种&#xff1a;f &#xff08;format简化版&…
阅读更多...
论文速递 Nature 2023 | Heat-assisted detection and ranging

论文速递 Nature 2023 | Heat-assisted detection and ranging

注1:本文系“计算成像最新论文速览”系列之一,致力于简洁清晰地介绍、解读非视距成像领域最新的顶会/顶刊论文(包括但不限于 Nature/Science及其子刊; CVPR, ICCV, ECCV, SIGGRAPH, TPAMI; Light‐Science & Applications, Optica 等)。 本次介绍的论文是: 2023年,Nature,“…
阅读更多...
2023年国赛 高教社杯数学建模思路 - 案例：最短时间生产计划安排

2023年国赛 高教社杯数学建模思路 - 案例：最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 最短时…
阅读更多...
6个比较火的AI绘画生成工具

6个比较火的AI绘画生成工具

随着人工智能技术的发展&#xff0c;市场上出现了越来越多的人工智能图像生成工具。这些人工智能图像生成工具可以自动创建惊人的图像、艺术作品和设计&#xff0c;以帮助设计师和创意人员更快地实现他们的创造性想法。在本文中&#xff0c;我们将推荐7种最近流行的人工智能图像…
阅读更多...
Michael.W基于Foundry精读Openzeppelin第30期——ECDSA.sol

Michael.W基于Foundry精读Openzeppelin第30期——ECDSA.sol

Michael.W基于Foundry精读Openzeppelin第30期——ECDSA.sol 0. 版本0.1 ECDSA.sol 1. 目标合约2. 代码精读2.1 toEthSignedMessageHash(bytes32 hash) && toEthSignedMessageHash(bytes memory s)2.2 toTypedDataHash(bytes32 domainSeparator, bytes32 structHash)2.3…
阅读更多...
Just KNIME it[S2C21] 图像识别

Just KNIME it[S2C21] 图像识别

朋友们&#xff0c;Just KNIME it 还有在跟进吗? 本季已经到 21 期啦。 本期探讨的主题是图像识别问题&#xff0c;快随指北君一起看看吧。 挑战 21&#xff1a;帮助球童&#xff08;第 1 部分&#xff09; 级别&#xff1a;中 描述&#xff1a;球童汤姆是一位最受欢迎的高尔夫…
阅读更多...
thinkphp6.0 配合shell 脚本 定时任务

thinkphp6.0 配合shell 脚本 定时任务

1. 执行命令&#xff0c;生成自定义命令 php think make:command Custom<?php declare (strict_types 1);namespace app\command;use app\facade\AdmUser; use think\console\Command; use think\console\Input; use think\console\input\Argument; use think\console\i…
阅读更多...
第 6 章 递归(3)(八皇后问题)

第 6 章 递归(3)(八皇后问题)

6.7递归-八皇后问题(回溯算法) 6.7.1八皇后问题介绍 八皇后问题&#xff0c;是一个古老而著名的问题&#xff0c;是回溯算法的典型案例。该问题是国际西洋棋棋手马克斯贝瑟尔于1848年提出&#xff1a;在88格的国际象棋上摆放八个皇后&#xff0c;使其不能互相攻击&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023