补充(className)、日期对象、setInterval不准

补充(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的情况呢??

就是因为setInterval循环定时器不精准的原因。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值