TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

08、JavaScript-定时器

zyz
2018-05-05
/
0 评论
/
775 阅读
/
正在检测是否收录...
05/05

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

赞(0)
评论 (0)