JavaScript实现简易计时器

最新推荐文章于 2019-04-08 18:09:00 发布
最新推荐文章于 2019-04-08 18:09:00 发布
阅读量1.8k 收藏 3
点赞数 1
分类专栏： eclipse 文章标签： 计时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40919128/article/details/81536211
版权

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>计时器</title>

  <script>

    var hour=0;//时

     var minute=0;//分

     var second=0;//秒

     var millisecond=0;//毫秒

    var init;  

   function startTimer()//开始

    {

      init=setInterval(timer,50);

    }

  

    function timer()//计时

    {

      millisecond=millisecond+50;

      if(millisecond>=1000)

      {

        millisecond=0;

        second=second+1;

      }

      if(second>=60)

      {

        second=0;

        minute=minute+1;

      }

  

      if(minute>=60)

      {

        minute=0;

        hour=hour+1;

      }

       document.getElementById('timetext').value=hour+':'+minute+':'+second+':'+millisecond;

 

    }

  </script>

</head>

<body>

<div >

  <input type="text" id="timetext" value="00:00:00:000" >

  <button type="button" onclick="startTimer()">开始</button>

</div>

</body>

</html>

天宇_任
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript制作计时器
yan_suansuan的博客
10-03 748
javascript制作计时器 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高
用JS写的一个简易计时器
u011137087的博客
05-04 5967
运行结果如图：点击开始计时，就会显示系统时间，然后这个时钟会每秒更新，点击停止计时，这个时间就会停止。这个是简易版本。代码如下：    1 &lt;!DOCTYPE html&gt;    2 &lt;html lang="en"&gt;    3 &lt;head&gt;    4         &lt;metacharset="UTF-8"&gt;    5         &lt;titl
JavaScript制作一个计时器
渔闻520的博客
07-30 2194
利用setTimeout()和clearTimeout()方法可以很容易的在一个特定 的时间后来执行代码。前面有展示过利用这个原理制作的点钟https://blog.csdn.net/weixin_41060905/article/details/81262840。 语法： var t=setTimeout("javascript语句，可以是某个函数",毫秒）； 这个t，即该方法的返回值很...
javascript实现计时器
01-05
js实现计时器，只需要将设定的开始时间修改为你需要的开始时间就可以使用，制作个人网站，纪念重要日期非常实用。
JS简易秒表计时器
前端向朔
06-06 2万+
<html lang="en"> <head> <meta charset="UTF-8"> <title>js计时器</title> </head> <body> <input type="text" value="00:00"> <input type="button" value="开始"> <input type="button" value="结束"> <input type="butto
js实现简易计时器
12-29
自己实现的简单的倒计时器，发现网上关于这方面的代码有是有，但写的界面都不堪入目，乱七八糟的。我自己用js手写了一个分享给大家，界面比较简洁，后面会再写一个比较酷炫的。如果没有积分还想下载的小伙伴可以加qq...
vue实现简易计时器组件.docx
01-21
在 Vue 中实现一个简易计时器组件可以帮助开发者处理实时更新数据或创建动态效果的需求。本篇文章将详细介绍如何使用 Vue 来实现一个计时器组件。 首先，计时器的核心是 JavaScript 的定时器函数。`window....
【JavaScript源代码】vue实现简易计时器组件.docx
12-29
本文将深入探讨如何使用 Vue.js 创建一个简易计时器组件，并讲解定时器的基础知识。 首先，让我们了解JavaScript中的两种主要定时器方法：`window.setTimeout()` 和 `window.setInterval()`。`setTimeout` 用于在...
javascript实现简易数码时钟
12-28
本文实例为大家分享了javascript实现简易数码时钟的具体代码，供大家参考，具体内容如下 通过这个小例子复习一下Date对象的基本使用. 还可以用Date对象做定时器，计时器等等. 效果如图： 可以自己去找炫一点的图片...
js计时器源码文档资料
02-05
以下是一个简单的计时器实现示例： ```html <!DOCTYPE html> <title>JS计时器 #timer { font-size: 24px; } <div id="timer">00:00 开始/停止 let timerElement = document.getElementById('...
Time计时器
03-20
学习完GUI之后，用java语言编写实现简单计时器功能，GUI做图形化界面，新手可以参考，不惜勿喷。
时间计时器
02-24
使用工具是android studio ,涉及到Broadcast Service activity等知识点，多看看有助于了解服务和广播，不懂的或者有问题的，请给我留言。
24小时计时器
12-20
图片 数字电子电路用74LS160设计24小时计时器，采用六个四位数码管。
用JS实现一个秒表计时器
热门推荐
gao000000的博客
04-08 3万+
秒表计时器的实现： 效果图如下： 附代码，已调试运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
JavaScript—简易计时器
qq_41139281的博客
05-25 1101
制作显示年、月、日、星期几，并且显示上午（AM）和下午（PM）的十二进制的时钟(动态显示)，代码如下所示：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod
【JavaScript】关于js实现计时器的方法
sun337939896的博客
01-17 478
function timer() {         var today = new Date();         //定义具体时间时，月份要比实际月份少1，且不加时分秒的话默认为上午八点整，而不是零点         var firstDay = new Date(2014,7,3,13,35,36);         var date =
游戏倒计时
lkktyz的博客
10-10 1137
关于小游戏倒计时的案例<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> button:hover{ cursor: pointer; } </st
bootstrap时间插件【带时分秒和不带时分秒的两个插件】
u013810758的专栏
04-19 1万+
一、带时分秒： 1.引入css bootstrap-datetimepicker.min.css 2.引入js bootstrap-datetimepicker.min.js bootstrap-datetimepicker.zh-CN.js 3.调用$('.date-picker').datetimepicker({format:"yyyy-mm-dd hh:ii",lan
js计时器方法的使用
05-15 97
js中计时器重要使用window.setInterval()方法和window.setTimeout()方法， 其中setInterval()方法的作用是每隔一段时间执行一次方法，而window.setTimeout()在一段时间内调用函数。 setTimeout()方法一般通过调用自身迭代的方式实现计时器。与这两个方法对应的，还有清除这两个函数效果的 两个方法，分别是window...
JavaScript实现计时器
最新发布
05-02
下面是一个简单的 JavaScript 实现计时器的代码示例： ``` var count = 0; function startTimer() { count += 1; console.log(count); } setInterval(startTimer, 1000); ``` 这段代码使用了 `setInterval` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值