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'，并时间会走动
案例: 倒计时效果