这篇文章主要是在重写时钟的过程遇到的问题的简单整理，其中有一些不太熟悉的地方拿出来举几个例子。
1、和时间相关的API
- Date()
console.log(Date())
直接调用Date()不管有没有参数都会返回当前时间，返回值是字符串
- new Date() 会返回一个对象实例，不加参数的话默认指向当前时间
var now = new Date()
console.log(now) //Wed May 31 2017 14:41:40 GMT+0800 (CST)
如果要加参数的话，至少有年和月，如果没有就会被当成望毫秒数解析
var time = new Date(2017,0)
console.log(time) // Sun Jan 01 2017 00:00:00 GMT+0800 (CST)
- Date.now()
Date.now() //返回现在距离1970年1月1日的UTC毫秒数
Date.parse('2017-1-1') //接收字符串作为参数，返回距离1970年1月1日零点的毫秒数
- get类方法
var time = new Date()
console.log('getFullYear(): ', time.getFullYear()) //返回四位数年份
console.log('getYear(): ', time.getYear()) //返回距离1900年的年份
console.log('getMonth(): ', time.getMonth()) // 返回当前月份，从0开始
console.log('getDay(): ', time.getDay()) //返回当天星期几
console.log('getHours(): ',time.getHours()) //返回当前小时数，24小时制
console.log('getMinutes(): ',time.getMinutes()) //返回当前分钟数
console.log('getSeconds(): ',time.getSeconds()) //返回当前秒数
console.log('getMilliseconds(): ',time.getMilliseconds()) //返回当前毫秒数
- set类方法，用于设置实例对象的各个方面，很多地方可以和get类方法相照应。
2、transition
transition是一个缩写，包含4个属性：transition-property,transition-duration,transition-timing-function和transition-delay。
transition-property:width;/all; //指定过渡效果的具体属性名，而且这个属性名必须在代码块中出现过，这里以前吃过亏。
transition-duration:1s; //具体的过渡时间。
transition-delay:2s; //过渡多久以后才开始；
重点来理解一下transition-timing-function这个属性，这个属性和animation-timing-function有想像的地方。它规定了过渡效果以什么的速度从开始到结束。
transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out;
以上是它常见的几个值，ease规定了慢速开始中间变快慢速结束，ease-in规定了慢速开始等等。重要地方
在于，它们这些值都是可以用贝塞尔曲线来表示的。
屏幕快照 2017-05-31 下午5.09.19.png
这个曲线用两个值来表示，一个酒红色的点的坐标和那个浅蓝色点的坐标。横轴表示时间，纵轴表示距离，比如说cubic-bezier(0.17,0.67,0.83,0.67)，前两个数字是酒红色点的坐标，后两个数字是浅蓝色点的坐标。一般来说是不超过1的，X轴超过1会失效，因为是时间嘛，但是两个点的Y轴是可以超过1的，超过1就会产生回弹效果，这也是时钟里秒针的回弹效果原因。
3、transform-origin
transform的属性的东西还比较多，今天就重点整理一个东西，就是transform-origin这个属性，这个属性规定了旋转等变形的原点。
菜鸟教程的这个生成器对于理解transform-origin挺不错的
transform-origin:50% 50% 0; //默认值
transform-origin:0 50% 0; //围绕左侧中心点变形
transform-origin:0 0 0； //围绕左上角变形
它有三个值，分别是横轴，纵轴和Z轴。当然也可以使用left,right,center等关键字。
4、ES6占位符和模板字符串
就是${}和``这个玩意
模板字符串使用反引号 (
) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以在通过该函数对模板字符串来进行操作处理。
这段话是从mdn里抄来的。
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
看这个例子就好了。
网友评论