<!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. ubuntu 下vscode 修改主题 注释斜体

    找到vscode的程序目录 全局搜索extensions 找到目录 /home/your_usr_name/.vscode/extensions 这里修改 注释字体 直接删掉fontStyle for ...

  2. 2018-2019-20175329 实验三敏捷开发与XP实践《Java开发环境的熟悉》实验报告

    2018-2019-20175329 实验三敏捷开发与XP实践<Java开发环境的熟悉>实验报告 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)>&l ...

  3. Robotframework之SSHLibrary库

    Robotframework之SSHLibrary库     使用robotframework做自动化测试,在流程中可能需要远程连接机器做一些简单操作,比如连接linux服务器,外面平时用的工具去连接 ...

  4. github搜索不到代码的问题

    Hi team, Please check the following three query url :https://github.com/Konctantin/GreyMagic/search? ...

  5. oc 计算 带括号 式子

    下面代码实现可以计算 类似以下的字符窜. @"(1+2*(3+4)+3)/2" 自写一个简单 stack .不知道 OC为什么不提供Stack类. #import <Foun ...

  6. vue.js-动态绑定class 利用index实现导航

    <template> <div class="stock"> <div class="buin_leftcont nav_ctrl" ...

  7. 代码实现:键盘录入一个int类型的整数,对其求二进制表现形式

    package com.loaderman.test; import java.math.BigDecimal; import java.math.BigInteger; import java.ut ...

  8. Android中图片的三级缓存

    为什么要使用三级缓存 如今的 Android App 经常会需要网络交互,通过网络获取图片是再正常不过的事了 假如每次启动的时候都从网络拉取图片的话,势必会消耗很多流量.在当前的状况下,对于非wifi ...

  9. 内存数据库：Redis与Memcached的区别

    Redis与Memcached的区别 传统MySQL+ Memcached架构遇到的问题 实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都 ...

  10. centos6.5 内核 ：2.6.32 升级内核

    问题:    CentOS 6.5 的内核一般都是2.6,在2.6的内核下,Docker运行会比较卡,所以一般会选择升级到更高版本,本次教程升级版本为4.4.102 一.升级内核 1.查看内核版本 u ...