这篇文章主要是在重写时钟的过程遇到的问题的简单整理,其中有一些不太熟悉的地方拿出来举几个例子。
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规定了慢速开始等等。重要地方
在于,它们这些值都是可以用贝塞尔曲线来表示的。
这个曲线用两个值来表示,一个酒红色的点的坐标和那个浅蓝色点的坐标。横轴表示时间,纵轴表示距离,比如说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}.`);
看这个例子就好了。