1、HTML部分

<div id="div1">
<span id="hour">00</span>
<span>:</span>
<span id="min">00</span>
<span>:</span>
<span id="sec">00</span>
<br />
<button id="start">开始</button>
<button id="reset">复位</button>
</div>

2、css部分

#div1 {
width: 100px;
height: 200px;
padding: 50px;
background-color: orange;
border: 1px solid #000000;
margin: auto;
}
span{
font-size: 20px;
}
#div1 button{
width: 100px;
height: 30px;
font-size: 16px;
margin-top: 20px;
background-color: black;
color: white;
}

3、JavaScript部分

function $(id) {
return document.getElementById(id);
}
var i = 0;
var timer = null;
var judge = true;
window.onload = function(){
//获取按钮
function startTime(){
timer = setInterval(function(){
i++;
$("sec").innerHTML = doubleNum(i % 60);
$("min").innerHTML = doubleNum(parseInt(i / 60) % 60);
$("hour").innerHTML = doubleNum(parseInt(i / 3600));
},1000);
} function stopTime(){
clearInterval(timer);
} $("start").onclick = function(){
if(judge){
$("start").innerHTML = "继续";
judge = false;
startTime();
}else{
$("start").innerHTML = "开始";
judge = true;
stopTime();
}
} $("reset").onclick = function(){
clearInterval(timer);
i = 0;
judge = true;
$("start").innerHTML = "开始";
$("sec").innerHTML = "00";
$("min").innerHTML = "00";
$("hour").innerHTML = "00";
}
}
function doubleNum(n){
if(n < 10){
return "0" + n;
}else{
return n;
}
}

JavaScript写秒表的更多相关文章

  1. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  2. JavaScript写在Html页面的<head></head>中

    JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...

  3. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  4. javascript写在<head>和<body>里的区别

    Javascript写在哪里?概括起来就是三种形式:1. 内部:Html网页的<body></body>中:2. 内部:Html网页的<head></head ...

  5. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  6. javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

  7. 用JavaScript写一个区块链

    几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...

  8. 怎么分别javascript写在<head>里还是<body>里面?

    怎么分别javascript写在<head>里还是<body>里面? 具体哪些语句写在<body>里,哪些语句写在<head>里 满意答案 BeginN ...

  9. 用javascript写原生ajax(笔记)

    AJAX  的全名叫做  Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...

随机推荐

  1. 面试【JAVA基础】类加载机制

    1.类加载过程 1.1.加载 查找和导入class文件. 1.2.链接 验证 检验载入的class文件的正确性,完整性. 准备 给类的静态变量分配存储空间,会赋对象类型的默认值. 解析 将class常 ...

  2. 跟我一起学.NetCore之中间件(Middleware)应用和自定义

    前言 Asp.NetCore中的请求管道是通过一系列的中间件组成的,使得请求会根据需求进行对应的过滤和加工处理.在平时开发中会时常引用别人定义好的中间件,只需简单进行app.Usexxx就能完成中间件 ...

  3. 06_Python异常处理机制

    1.异常概述 1.什么是错误: 错误是指有逻辑或语法等导致一个程序无法正常执行的问题     2.什么是异常: 异常时程序出错时标识的一种状态,程序不会向下执行而转去调用此函数的地方等待处理错误并恢复 ...

  4. PHP复杂变量

    eval($str="${${phpinfo()}}";)     →   可以执行phpinfo() ${phpinfo()} = {${phpindo()}} PHP复杂变量 ...

  5. vue 通过css实现输入框居中输入

    今天开发时突然想写blog了,水一下(o゚v゚)ノ css代码 .inputStyle { text-align: center;/*主要就是这个,下面的都是样式*/ width: 6rem; hei ...

  6. oracle之三存储库及顾问框架

    AWR存储库及顾问框架(PPT-I-349-360) 14.1 Oracle数据库采样ASH和AWR. 1) ASH(Active Session History) ASH收集的是活动会话的样本数据, ...

  7. Git使用教程与基本原理和Sourcetree基本使用探微

    什么是GIT Git是一个强调速度的分布式版本控制软件和源代码管理系统(SCM,source code management).Git最初是由Linus Torvalds为内核开发而设计的管理软件.自 ...

  8. Badboy脚本录制工具

    Badboy 目录 Badboy 1.Badboy安装 2.脚本的录制 1.Badboy安装 下载地址: http://www.badboy.com.au/download/index 安装其实傻瓜式 ...

  9. day50:django:有名/无名分组&FBV/CBV

    目录 1.URL有名分组和无名分组 2.FBV和CBV URL有名分组和无名分组 有名分组 使用简单的正则表达式分组匹配(通过圆括号)来捕获URL中的值并以位置参数形式传递给视图 urls.py fr ...

  10. java安全编码指南之:堆污染Heap pollution

    目录 简介 产生堆污染的例子 更通用的例子 可变参数 简介 什么是堆污染呢?堆污染是指当参数化类型变量引用的对象不是该参数化类型的对象时而发生的. 我们知道在JDK5中,引入了泛型的概念,我们可以在创 ...