补充（className）、日期对象、setInterval不准

最新推荐文章于 2025-02-16 09:00:00 发布

原创最新推荐文章于 2025-02-16 09:00:00 发布 · 601 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#日期对象

JavaScript 专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍使用JavaScript操作DOM元素的技巧，包括设置CSS样式和类名，以及深入解析JavaScript中的日期对象，涵盖日期和时间的获取、设置及格式化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

补充（`className`）

通过JS设置CSS的属性

 var oBox = document.getElementById('box');//获取id元素
        //通过行内样式表设置CSS的属性
        oBox.style.width = '200px';
        oBox.style.height = '200px';
        oBox.style.backgroundColor = 'pink';

在这里插入图片描述
那么也可以如果这种方式设置多个CSS属性

如：

var oBox = document.getElementById('box');//获取id元素
        //通过行内样式表设置CSS的属性
        oBox.style.width = '200px';
        oBox.style.height = '200px';
        oBox.style.backgroundColor = 'pink';
        oBox.style.opacity = '0.5';
        oBox.style.fontSize = '30px';
        oBox.style.lineHeight = '200px';
        oBox.style.textAlign = 'center';

在这里插入图片描述
这种方式是能在JS中实现CSS的属性，但是这样JS代码会很长很长的。

那么我们可以把这些在JS中设置的CSS属性style标签里在设置样式（然后通过查询节点的方式设置或修改选择器）

       .on{
            width: 200px;
            height: 200px;
            background-color: pink;
            opacity: 0.5;
            line-height: 200px;
            font-size: 30px;
            text-align: center;
        }

var oBox = document.getElementById('box');
        oBox.className = 'on';//表示给节点设置class类名
        //oBox.id = 'banner';//表示给节点设置id

在这里插入图片描述

日期对象（`Date`）

什么是日期对象？？

日期对象是JS中提供的用于控制年份.日期.时间.的对象

那么如何获取日期对象？？

new Date()获取日期对象

var date = new Date();//获取日期对象
       //通过new方式启动函数，Date是个函数
       console.log(date);

在这里插入图片描述
那么检查一下这个日期对象是什么数据类型？？

var date = new Date();
       console.log(typeof date);

在这里插入图片描述
new Date()检查出来的结果是object对象

date.toLocaleString()获取本地日期字符串

var date = new Date();
       console.log(date.toLocaleString());

在这里插入图片描述
date.toLocaleDateString() ==> 获取本地(年/月/日)形式的字符串

var date = new Date();
       console.log(date.toLocaleDateString());

在这里插入图片描述
date.toLocaleTimeString()==> 获取本地(时/分/秒)形式的字符串

 var date = new Date();
       console.log(date.toLocaleTimeString());

在这里插入图片描述

date.toLocaleDateString()+date.toLocaleTimeString()=date.toLocaleString() 跟date.toLocaleString()没有大致的区别

 var date = new Date();
       console.log(date.toLocaleDateString()+date.toLocaleTimeString());

在这里插入图片描述
date.getFullYear() 获取年份

var date = new Date();
       console.log(date.getFullYear());

在这里插入图片描述
date.getMonth() 获取月份 0-11

 var date = new Date();
       console.log(date.getMonth());

在这里插入图片描述
获取当前月份，是获取的国外计算的月份，而不是国内计算的月份

date.getDate() 获取日期（1-31）

var date = new Date();
       console.log(date.getDate());

在这里插入图片描述
date.getHours() 获取小时

var date = new Date();
       console.log(date.getHours());

在这里插入图片描述
获取当前小时：是按24小时来获取的，而不是12小时获取的

date.getMinutes() 获取分钟

var date = new Date();
       console.log(date.getMinutes());

在这里插入图片描述
date.getSeconds() 获取秒钟

var date = new Date();
       console.log(date.getSeconds());

在这里插入图片描述
date.getMilliseconds ==>获取毫秒（1秒=1000毫秒）

var date = new Date();
       console.log(date.getMilliseconds());

在这里插入图片描述
date.getDay() ==>获取星期几（(0-6) 星期天是0）

var date = new Date();
       console.log(date.getDay());

在这里插入图片描述
date.getTime()==>获取时间到1970年1月1日午夜的毫秒数

var date = new Date();
       console.log(date.getTime());

在这里插入图片描述
为什么获取当前时间到1970年1月1日午夜的毫秒数

date.getTimezoneOffset()==> 获取时区的偏移时间（东8区是-480 单位是分钟）

var date = new Date();
       console.log(date.getTimezoneOffset());

在这里插入图片描述
什么是东八区？？

设置以上函数都是为了日期对象更好读一些

date.setFullYear() 设置年份

var date = new Date();
       console.log(date.setFullYear(2018));
       console.log(date.toLocaleString());

在这里插入图片描述
date.setMonth() 设置月份（0-11）

var date = new Date();
       console.log(date.setMonth(5));
       console.log(date.toLocaleString());

在这里插入图片描述
date.setDate() 设置日期（0-31）

var date = new Date();
       console.log(date.setDate(10));
       console.log(date.toLocaleString());

在这里插入图片描述
date.setHours() 设置小时

var date = new Date();
       console.log(date.setHours(10));
       console.log(date.toLocaleString());

在这里插入图片描述
date.setMinutes() 设置分钟

 var date = new Date();
       console.log(date.setMinutes(18));
       console.log(date.toLocaleString());

在这里插入图片描述
date.setSeconds() 设置秒钟

var date = new Date();
       console.log(date.setSeconds(59));
       console.log(date.toLocaleString());

在这里插入图片描述
如何我们想通过日期对象设置一个精准的时间会出现很多句代码的，那么怎么方便快捷的设置日期对象的精准时间呢？？

var newDate = new Date(2018, 5, 28, 10, 20, 20);
       console.log(newDate.toLocaleString());

在这里插入图片描述

var date = new Date();//new Date()括号里面不传参数，表示获取当前时间
var newDate = new Date(2018, 5, 28, 10, 20, 20); ==>在括号里面传参数表示（设置时间戳）
//设置时间为 2018年5月28日10小时 20分钟 20秒钟是(不填秒数是默认00)

new Date(2018, 5, 28, 10, 20, 20)里面传参第一个参数表示（年份），第二个参数表示（月份），第三个参数表示（日期），第四个参数表示（小时），第五个参数表示（分钟），第六个参数表示（秒钟）如果不填默认:0

那两个时间戳相减结果是什么？？

什么是时间戳？？：时间戳是一个能够记录时间的对象

var date = new Date();
       var newDate = new Date(2020, 6, 28, 10, 20);
       console.log(newDate-date);

在这里插入图片描述
两个时间戳相减结果是 毫秒数（表示相差的时间）

如何获取世界时间？？？

  var date = new Date();
        date.setHours(date.getHours()+date.getTimezoneOffset()/60)
        console.log(date.toLocaleString());

在这里插入图片描述

`setInterval`不准

那么怎么验证setInterval定时器不准的呢？？

 var start = new Date();//存储初始时间
      setInterval(function(){
         var now = new Date();//存放现在时间
         console.log(now - start);
      },100);

now（获取当前时间）100毫秒之后减去start（获取当前时间）=100毫秒一次往上累加

在这里插入图片描述
按理说是每隔100毫秒一次往上加，那为什么出现个位数不为0的情况呢？？