广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >js如何实现秒表计时器功能
  • 946
分享到

js如何实现秒表计时器功能

2024-04-02 19:04:59 946人浏览 泡泡鱼
摘要

这篇文章主要介绍了js如何实现秒表计时器功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果图: 下面贴代码:<!DOCT

这篇文章主要介绍了js如何实现秒表计时器功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

效果图:

 js如何实现秒表计时器功能

下面贴代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>计时器</title>
 <script>
  var hour,minute,second;//时 分 秒
  hour=minute=second=0;//初始化
  var millisecond=0;//毫秒
  var int;
  function Reset()//重置
  {
   window.clearInterval(int);
   millisecond=hour=minute=second=0;
   document.getElementById('timetext').value='00时00分00秒000毫秒';
  }
 
  function start()//开始
  {
   int=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+'毫秒';
 
  }
 
  function stop()//暂停
  {
   window.clearInterval(int);
  }
 </script>
</head>
<body>
<div >
 <input type="text" id="timetext" value="00时00分00秒" readonly><br>
 <button type="button" onclick="start()">开始</button> <button type="button" onclick="stop()">暂停</button> <button type="button" onclick="Reset()">重置</button>
</div>
</body>
</html>

感谢你能够认真阅读完这篇文章,希望小编分享的“js如何实现秒表计时器功能”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网node.js频道,更多相关知识等着你来学习!

--结束END--

本文标题: js如何实现秒表计时器功能

本文链接: https://www.lsjlt.com/news/66361.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js如何实现秒表计时器功能
    这篇文章主要介绍了js如何实现秒表计时器功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果图: 下面贴代码:<!DOCT...
    99+
    2022-10-19
  • QT设计秒表功能(跑步计时器)
    本文实例为大家分享了QT设计秒表功能的具体代码,供大家参考,具体内容如下 设计目标 1. 定时器开始 2.复位从0开始计时 3.记录--把记录的时间添加到QTextBrowser, ...
    99+
    2022-11-13
    QT 秒表
  • js实现计算器和计时器功能
    本文实例为大家分享了js实现计算器和计时器的具体代码,供大家参考,具体内容如下 完成简单的计算器 <!DOCTYPE html> <html>     <...
    99+
    2022-11-13
  • android秒表计时器怎么实现
    要实现一个Android秒表计时器,可以通过以下步骤实现:1. 创建一个新的Android项目,并在布局文件中添加一个TextVie...
    99+
    2023-08-17
    android
  • java秒表计时器怎么实现
    在Java中,可以使用`System.currentTimeMillis()`方法来实现秒表计时器。以下是一个简单的示例代码:```...
    99+
    2023-08-29
    java
  • 如何实现vue验证码60秒倒计时功能
    小编给大家分享一下如何实现vue验证码60秒倒计时功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下html<...
    99+
    2022-10-19
  • Linux用脚本实现“时分秒“倒计时功能
    1.怎样实现“时分秒“倒计时 在linux下,脚本的完成相对于C语言来说稍微随意一点,可以按照字的想法写,只要有逻辑就可以了。 示例: 注意: clean的功能 这个命令将会刷新屏幕,本质上只是让终端显示页向后翻...
    99+
    2022-06-04
    linux 时分秒倒计时 linux 倒计时
  • Android实现的秒表计时器示例
    本文实例讲述了Android实现的秒表计时器。分享给大家供大家参考,具体如下: package com.liu.time; import java.util.Timer; i...
    99+
    2022-06-06
    秒表计时器 示例 秒表 计时器 Android
  • JS怎么实现倒计时功能
    本篇内容主要讲解“JS怎么实现倒计时功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么实现倒计时功能”吧!HTML代码:<div id=...
    99+
    2022-10-19
  • js如何倒计时功能
    这篇文章主要介绍“js如何倒计时功能”,在日常操作中,相信很多人在js如何倒计时功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js如何倒计时功能”的疑惑有所帮助!接下来,...
    99+
    2022-10-19
  • JavaScript定时器实现限时秒杀功能
    本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 文件index.html 代码: <!DOCTYPE html> <...
    99+
    2022-11-12
  • 怎么在Linux中实现“时分秒“倒计时功能
    这篇文章给大家介绍怎么在Linux中实现“时分秒“倒计时功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1.怎样实现“时分秒“倒计时在Linux下,脚本的完成相对于C语言来说稍微随意一点,可以按照字的想法写,只要有逻...
    99+
    2023-06-09
  • js中如何实现计算器功能
    这篇文章将为大家详细讲解有关js中如何实现计算器功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。代码如下:<!DOCTYPE html> ...
    99+
    2022-10-19
  • 如何使用原生js实现倒计时功能
    这篇文章给大家分享的是有关如何使用原生js实现倒计时功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。<!DOCTYPE html><html&nbs...
    99+
    2022-10-19
  • js如何实现短信发送倒计时功能
    这篇文章将为大家详细讲解有关js如何实现短信发送倒计时功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。本文实例为大家分享了js短信发送倒计时的具体代码,供大家参考,具体...
    99+
    2022-10-19
  • JS中的计时功能怎么实现
    在JavaScript中,可以使用`setTimeout()`和`setInterval()`两个函数来实现计时功能。1. 使用`s...
    99+
    2023-09-26
    JS
  • Android自定义Chronometer实现短信验证码秒表倒计时功能
    本文实例为大家分享了Chronometer实现倒计时功能,Android提供了实现按照秒计时的API,供大家参考,具体内容如下 一、自定义ChronometerView 继续自...
    99+
    2022-06-06
    倒计时 验证码 秒表 短信验证码 Android
  • jQuery如何实现计时器功能
    小编给大家分享一下jQuery如何实现计时器功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在写项目的过程中遇到要前端60秒发...
    99+
    2022-10-19
  • js如何实现日期计算器功能
    这篇文章主要为大家展示了“js如何实现日期计算器功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js如何实现日期计算器功能”这篇文章吧。日期计算器html代码...
    99+
    2022-10-19
  • js版实现计算器功能
    本文实例为大家分享了js实现计算器功能的具体代码,供大家参考,具体内容如下 在老师的带领下完成了这个简单的计算器,这是一个神奇的过程,计算器的基本功能都是有的。虽然是个简单的计算器,...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作