首页 > 软件开发 > 编程语言 >

JavaScript如何写个简单的定时器

来源:互联网 2023-03-17 00:01:06 86

用setTimeout实现一个定时器功能xV2办公区 - 实用经验教程分享!

工具/原料

  • 文本编辑器

HTML

  • 1

    用HTML写个容器和一个开关,用来存放定时器的显示,开始和结束按钮来控制定时器的运行和关闭;代码下文或者如图:xV2办公区 - 实用经验教程分享!

    html>xV2办公区 - 实用经验教程分享!

    head>xV2办公区 - 实用经验教程分享!

    title>定时器/title>xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    /head>xV2办公区 - 实用经验教程分享!

    body>xV2办公区 - 实用经验教程分享!

    input type = "text" id=content>xV2办公区 - 实用经验教程分享!

    input type = button id=start value="开始">xV2办公区 - 实用经验教程分享!

    input type = button id=stop value="结束">xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    /body>xV2办公区 - 实用经验教程分享!

    /html>xV2办公区 - 实用经验教程分享!

    JavaScript如何写个简单的定时器xV2办公区 - 实用经验教程分享!

  • 1本页面未经许可获取自百度经验
  • JavaScript

  • 1

    用js对HTML进行控制,在适当的地方添加js代码,代码使用动态绑定事件,实现行为和结构分离,代码如下或者如图xV2办公区 - 实用经验教程分享!

    script>xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    var s;xV2办公区 - 实用经验教程分享!

    function $(id){xV2办公区 - 实用经验教程分享!

    return document.getElementById(id);xV2办公区 - 实用经验教程分享!

    }xV2办公区 - 实用经验教程分享!

    function display(){xV2办公区 - 实用经验教程分享!

    var date = new Date();xV2办公区 - 实用经验教程分享!

    var str = date.getTime();xV2办公区 - 实用经验教程分享!

    $("content").value = str;xV2办公区 - 实用经验教程分享!

    s = setTimeout('display()',1000);xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    }xV2办公区 - 实用经验教程分享!

    window.onload = function(){xV2办公区 - 实用经验教程分享!

    $("start").onclick =function(){display();}xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    $("stop").onclick = function(){clearTimeout(s);}xV2办公区 - 实用经验教程分享!

    }xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    /script>xV2办公区 - 实用经验教程分享!

    JavaScript如何写个简单的定时器xV2办公区 - 实用经验教程分享!

  • 全部代码

  • 1

    吧上述的HTML和JavaScript代码进行整合到一起,形成如下代码:xV2办公区 - 实用经验教程分享!

    直接双击就可以运行了;xV2办公区 - 实用经验教程分享!

    html>xV2办公区 - 实用经验教程分享!

    head>xV2办公区 - 实用经验教程分享!

    title>定时器/title>xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    script>xV2办公区 - 实用经验教程分享!

    var s;xV2办公区 - 实用经验教程分享!

    function $(id){xV2办公区 - 实用经验教程分享!

    return document.getElementById(id);xV2办公区 - 实用经验教程分享!

    }xV2办公区 - 实用经验教程分享!

    function display(){xV2办公区 - 实用经验教程分享!

    var date = new Date();xV2办公区 - 实用经验教程分享!

    var str = date.getTime();xV2办公区 - 实用经验教程分享!

    $("content").value = str;xV2办公区 - 实用经验教程分享!

    s = setTimeout('display()',1000);xV2办公区 - 实用经验教程分享!

    }xV2办公区 - 实用经验教程分享!

    window.onload = function(){xV2办公区 - 实用经验教程分享!

    $("start").onclick =function(){display();}xV2办公区 - 实用经验教程分享!

    $("stop").onclick = function(){clearTimeout(s);}xV2办公区 - 实用经验教程分享!

    }xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    /script>xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    /head>xV2办公区 - 实用经验教程分享!

    body>xV2办公区 - 实用经验教程分享!

    input type = "text" id=content>xV2办公区 - 实用经验教程分享!

    input type = button id=start value="开始">xV2办公区 - 实用经验教程分享!

    input type = button id=stop value="结束">xV2办公区 - 实用经验教程分享!

    xV2办公区 - 实用经验教程分享!

    /body>xV2办公区 - 实用经验教程分享!

    /html>xV2办公区 - 实用经验教程分享!

    JavaScript如何写个简单的定时器xV2办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!xV2办公区 - 实用经验教程分享!


    标签: JAVASCRIPTHTML编程

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码