<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="timeshow" style="border: dashed 1px black; width: 20% ; height: 40px;">00时00分00秒</div>
<br />
<input type="button" onclick="startTime()" value="开始"/>
<input type="button" onclick="stopTime()" value="结束"/>
<input type="button" onclick="clearTime()" value="清零"/>
</body>
<script type="text/javascript">
var minute=0,hour=0,seconds=0;
var timeout;

function startTime(){
mark=0;
var date=new Date();
seconds++;
if(seconds>60){
seconds=0;
minute++;
if(minute>60){
minute=0;
hour++;
}
}
document.getElementById("timeshow").innerHTML=hour+"时"+minute+"分"+seconds+"秒";

timeout=setTimeout("startTime()",1000);

}

function stopTime(){
if(timeout!=""){
clearTimeout(timeout) ;
}

}
function clearTime (){
document.getElementById("timeshow").innerHTML="00时00分00秒";
clearTimeout(timeout) ;
}
</script>
</html>

js制作秒表的更多相关文章

  1. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  2. 基于node.js制作爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  3. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  4. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  5. JS制作图片切换

    <!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...

  6. 使用Vue.js制作仿Metronic高级表格（一）静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

  7. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. D3.js 制作中国地图 .net 公共基础类

    D3.js 制作中国地图 from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...

  9. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. koa 基础（二十）nodejs 操作mongodb数据库 --- 新增数据

    1.app.js /** * nodejs 操作mongodb数据库 * 1.安装 操作mongodb * cnpm install mongodb --save * 2.引入 mongodb 下面的 ...

  2. Node某个JS导出方法变量以及在其他地方引用的例子

    //modelJs.js var name="miyue"; function doSomething() { console.log("做一些事情"); } ...

  3. Jsp中的四个域对象

    四个域对象: pageContext      page域 request          request域 session          session域 application       ...

  4. 自定义可拖动的Toast

    package com.loaderman.toastdemo; import android.content.Context; import android.graphics.PixelFormat ...

  5. for...in 与 for...of

    在js中, 对于Object,一般for...in 来进行迭代,不能使用for...of     // let obj = {a:1,b:2} for(let i of obj){console.lo ...

  6. 八十九：redis之python操作redis

    安装:pip install redis 连接 字符串操作 插入值 获取 删除值 列表操作,更多操作见源码 添加 获取 集合操作,更多操作见源码 哈希操作,更多操作见源码 事务操作:cache.pip ...

  7. dbgrid中移动焦点到指定的行和

    dbgrid是从TCustomGrid继承下来的,它有col与row属性,只不过是protected的,不能直接访问,要处理一下,可以这样: TDrawGrid(dbgrid1).row:=row;  ...

  8. docker笔记、常遇问题、常用命令

    启动一个容器并且进到里面,退出后,容器结束 [root@bogon ~]# docker run --name mynginx -it nginx 启动一个容器,退出后自动删除 [root@bogon ...

  9. 利用delve（dlv）在Visual Code中进行go程序的远程调试-debug方式

    最近碰到一个问题,如何在Windows的IDE或者文本编辑器上,远程调试Linux服务器上的golang程序. 虽然想说gdb走你,但既然go有dlv这样的类似Java的jdwp的原生方案,而且我用的 ...

  10. PJzhang:python基础入门的7个疗程-six

    猫宁!!! 参考链接:易灵微课-21天轻松掌握零基础python入门必修课 https://www.liaoxuefeng.com/wiki/1016959663602400 第16天:开源模块 sy ...