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

JavaScript如何写个简单的定时器

来源:互联网 2023-03-17 00:01:06 版权归原作者所有,如有侵权,请联系我们

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

工具/原料

  • 文本编辑器

HTML

  • 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 全部代码

  • 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


    标签: JAVASCRIPTHTML编程

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