JavaScript定时器常见用法实例分析

 更新时间:2019年11月15日 09:27:11   作者:小飞侠v科比  
这篇文章主要介绍了JavaScript定时器常见用法,结合实例形式分析了JavaScript定时器常见功能、应用及相关操作技巧,需要的朋友可以参考下

本文实例讲述了JavaScript定时器常见用法。分享给大家供大家参考,具体如下:

定时器

定时器在javascript中的作用

1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法

/*
  定时器:
  setTimeout 只执行一次的定时器 
  clearTimeout 关闭只执行一次的定时器
  setInterval 反复执行的定时器
  clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
  alert('ok!');
}

课堂练习

1、定时器制作移动动画
2、定时器制作无缝滚动
3、定时器制作时钟

<script type="text/javascript">
  window.onload = function(){  
    var oDiv = document.getElementById('div1');
    function timego(){
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth()+1;
      var date = now.getDate();
      var week = now.getDay();
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();
      var str = '当前时间是:'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
      oDiv.innerHTML = str;
    }
    timego();
    setInterval(timego,1000);
  }
  function toweek(n){
    if(n==0)
    {
      return '星期日';
    }
    else if(n==1)
    {
      return '星期一';
    }
    else if(n==2)
    {
      return '星期二';
    }
    else if(n==3)
    {
      return '星期三';
    }
    else if(n==4)
    {
      return '星期四';
    }
    else if(n==5)
    {
      return '星期五';
    }
    else
    {
      return '星期六';
    }
  }
  function todou(n){
    if(n<10)
    {
      return '0'+n;
    }
    else
    {
      return n;
    }
  }
</script>
......
<div id="div1"></div>

4、定时器制作倒计时

<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('div1');
    function timeleft(){
      var now = new Date();
      var future = new Date(2016,8,12,24,0,0);
      var lefts = parseInt((future-now)/1000);
      var day = parseInt(lefts/86400);
      var hour = parseInt(lefts%86400/3600);
      var min = parseInt(lefts%86400%3600/60);
      var sec = lefts%60;
      str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
      oDiv.innerHTML = str; 
    }
    timeleft();
    setInterval(timeleft,1000);    
  }
</script>
......
<div id="div1"></div>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • 动态加载css方法实现和深入解析

    动态加载css方法实现和深入解析

    本文主要介绍了动态加载css的方法实现和深入解析。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 纯原生js实现table表格的增删

    纯原生js实现table表格的增删

    本文主要介绍了纯原生javascript实现table表格的增删的方法,文章底部提供了完整的代码。需要的朋友一起来看下吧
    2017-01-01
  • 微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

    微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例

    这篇文章主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • SharedWorker 多页面相互通信示例详解

    SharedWorker 多页面相互通信示例详解

    这篇文章主要为大家介绍了SharedWorker 多页面相互通信示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • js程序中美元符号$是什么

    js程序中美元符号$是什么

    $符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的
    2008-06-06
  • 纯js实现手风琴效果代码

    纯js实现手风琴效果代码

    这篇文章主要为大家详细介绍了纯js实现手风琴效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • js中对函数设置默认参数值的3种方法

    js中对函数设置默认参数值的3种方法

    这篇文章主要介绍了js中对函数设置默认参数值的3种方法吗,3种方法都具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-10-10
  • bootstrap滚动监控器使用方法解析

    bootstrap滚动监控器使用方法解析

    这篇文章主要为大家详细解析了bootstrap滚动监控器使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • webpack打包后index.html引用文件地址问题小结

    webpack打包后index.html引用文件地址问题小结

    在前端开发中,src 属性指定的相对路径是相对于当前 HTML 文件的路径,而不是相对于网站的根目录,这篇文章主要介绍了webpack打包后index.html引用文件地址问题,需要的朋友可以参考下
    2024-05-05
  • JavaScript时间死区的问题

    JavaScript时间死区的问题

    JavaScript中的时间死区是指从进入作用域到变量声明之间的区域,在这段时间内访问变量会抛出ReferenceError,本文就来介绍一下JavaScript时间死区,感兴趣的可以了解一下
    2025-03-03

最新评论