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


Posted in Javascript onNovember 15, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
ExtJS 入门
Oct 29 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
AngularJS基础知识
Dec 21 Javascript
JS根据生日算年龄的方法
May 05 Javascript
Validform表单验证总结篇
Oct 31 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 Javascript
解决Layui 表格自适应高度的问题
Nov 15 #Javascript
layui前端时间戳转化实例
Nov 15 #Javascript
JavaScript变量基本使用方法实例分析
Nov 15 #Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 #Javascript
layui数据表格重载实现往后台传参
Nov 15 #Javascript
JS实现贪吃蛇游戏
Nov 15 #Javascript
Layui表格监听行单双击事件讲解
Nov 14 #Javascript
You might like
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
Python的Tornado框架异步编程入门实例
2015/04/24 Python
RC4文件加密的python实现方法
2015/06/30 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python数据集切分实例
2018/12/08 Python
python用Configobj模块读取配置文件
2020/09/26 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
技校生自我鉴定范文
2013/09/26 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
民间借贷协议书范本
2014/10/01 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
php字符串倒叙
2021/04/01 PHP
浅析Python实现DFA算法
2021/06/26 Python
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python