补充(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());
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
循环定时器不精准的原因。