08、JavaScript-定时器

每天一句：如果，感到此时的自己很辛苦，那告诉自己：容易走的都是下坡路！坚持住，因为你正在走上坡路，走过去，你就一定会有进步。

一、window.onload使用

● 网页中的JS脚本代码往往需要在文档加载完成后才能够执行，否则可能导致无法获取对象的情况，为了避免这种情况发生，可以使用以下两种方式:

将脚本代码放在网页的底部，即可保证运行脚本代码时，要操作的对象已经加载完成(该方式比较凌乱，但推荐使用);
通过window.onload来执行脚本代码;(window.onload是一个事件，当文档加载完成之后就会触发该事件，即可以将要执行的脚本代码放在事件处理函数中);
注: window.onload只会执行一次;

二、获取元素样式

getComputeStyle() 非IE浏览器
  参数1: 需要获取样式的元素对象;
  参数2: 伪元素，例如 :hover, :first-letter, :before等，如果不需要伪元素则该参数为null或忽略不写;
  返回值: 对应元素的样式

  // 获取按钮宽度
  var style = getComputedStyle(oBt);
  alert(style.width);
currentStyle() IE浏览器
  // 获取按钮宽度
  alert( oBt.currentStyle.width );
兼容写法
  // 为了兼容的写法
  if(window.getComputedStyle){  
    width = getComputedStyle(oBt).width;
  } else {
    width = oBt.currentStyle.width;
  }
备注: style属性只能获取内联样式，获取不到外部样式和内部样式;

案例: 函数封装 — $符号的操作 (有助于之后学习jQuery)
案例: 函数封装 — 获取元素对应的属性

三、定时器/时钟

定时器的开启
  语法:
    setInterval(函数, 毫秒);
  说明:
    参数1: 函数名即可(不要括号，如果有带括号是函数调用);;
    参数2: 1000毫秒 = 1秒，另外最小是为10毫秒;
    返回值: 定时器对象;

  timer = setInterval(function(){
    console.log('hello');
  }, 2000);
定时器的关闭
// 并不表示时钟对象为null
clearInterval(定时器名);
 备注: 
  setInterval()和clearInterval()，定时器是重复执行的;
  setTimeout()和clearTimeout()，定时器只执行一次;

● 案例: 轮播图
● 案例: 汤姆猫
● 案例: 弹窗广告

四、Date类型

● Date类型使用UTC(国际协调时间又称世界统一时间1970年1月1日午夜(零时)开始经过的毫秒来保存日期

获取本地时间
  var nowTime = new Date();
获取当前时间距离1970年1月1日之间的毫秒数
  var nowTime = new Date();
  alert(nowTime.getTime);
获取年份(4位数)
  var year = nowTime.getFullYear();
获取月份(0-11)
  var month = nowTime.getMonth();
获取日期
  var date = nowTime.getDate();
获取星期(0-6)
  var day = nowTime.getDay();
获取时
  var hour = nowTime.getHours();
获取分
  var min = nowTime.getMinutes();
获取秒
  var sec = nowTime.getSeconds();
设置时间
  var timer = new Date();
  timer.setDate(6); // 设置日期
  timer.setHours(12);// 设置小时
  timer.setMinutes(10);// 设置分钟
  timer.setSeconds(50);// 设置秒

● 案例: 将当前日期格式化输出为'2017年01月06日 星期五 16:33:30'，并时间会走动
● 案例: 倒计时效果

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。