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. Docker 搭建 Redis Cluster 集群环境

    使用 Docker 搭建 Redis Cluster,最重要的环节就是容器通信的问题,这一块我们在之前的文章中已经给大家解决了<Docker 网络模式详解及容器间网络通信>,本篇文章主要练 ...

  2. js转换人民币金额 小写到大写

    u.bigNum=function(n) { var fraction = ['角', '分']; var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒 ...

  3. C#知识点:ref和Out关键字浅谈

    首先我们要知道ref和out在C#里面是什么? 答:它们俩是C#里面的关键字. 他们俩是干啥的呢? 答:他们俩是方法参数的修饰符号,一但使用,方法定义和方法都用都要使用这个关键字,这一点是死规定. 好 ...

  4. 面试官问我:看过sharding-jdbc的源码吗?我吧啦吧啦说了一通!!

    写在前面 在产品初期快速迭代的过程中,往往为了快速上线而占据市场,在后端开发的过程中往往不会过多的考虑分布式和微服务,往往会将后端服务做成一个单体应用,而数据库也是一样,最初会把所有的业务数据都放到一 ...

  5. .NET Core 下使用 Apollo 配置中心

    Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理场景.服务 ...

  6. Aggressive cows(POJ 2456)

    原题如下: Aggressive cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20524   Accepted: ...

  7. python面向对象单继承,多继承和super()调用

    python 目录 python 1.继承 1.单继承 2.多继承 3.子类重写父类的同名属性和方法 核心点: 4.多层继承 5.super()的使用 1.继承 1.单继承 说明: 虽然子类没有定义_ ...

  8. java事件触发

    工作遇到一个问题:用netty实现服务和设备的交互,服务发送了一组指令,需要再等待时间内获取结果,如果结果提前全部返回,就进一步处理,如果等待时间内没有全部返回,就视为失败处理. 这个场景我遇到的困难 ...

  9. 一文搞懂Cookie,Session,Token,JWT

    HTTP协议是无状态的,无状态意味着,服务器无法给不同的客户端响应不同的信息.这样一些交互业务就无法支撑了.Cookie应运而生. Cookie 通过F12开发者工具,先瞅瞅Cookie的颜值 从图中 ...

  10. MySql约束_设计_备份还原(资料二)

    今日内容 1. DQL:查询语句 1. 排序查询 2. 聚合函数 3. 分组查询 4. 分页查询 2. 约束 3. 多表之间的关系 4. 范式 5. 数据库的备份和还原 DQL:查询语句 1. 排序查 ...