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. python小白入门基础(一:注释)

    # 注释:就是对代码的解释,方便大家阅读代码.注释后的代码程序不会执行.# 注释的分类:单行注释和多行注释# (1)单行注释# 在代码前面加个#字符print("hello world&qu ...

  2. ACwing 你能回答这些问题吗(线段树求最大连续字段和)

    给定长度为N的数列A,以及M条指令,每条指令可能是以下两种之一: 1.“1 x y”,查询区间 [x,y] 中的最大连续子段和,即 maxx≤l≤r≤ymaxx≤l≤r≤y{∑ri=lA[i]∑i=l ...

  3. [bash]调用linux命令获得结果存入变量的两种方式

    代码: #!/bin/bash ls=$(ls) echo $ls whoami=`whoami` echo $whoami 执行结果: [os-××××××××101z ~]$ sh cmd2.sh ...

  4. linux 增加新用户无法使用sudo命令解决办法

    昨天一不小心把自己的系统搞崩了,也没有快照,没法进行还原操作,所以只能重装系统解决了,装完系统以后一切正常,当我新增了一个用户,使用sudo命令切换到root用户时,发现怎么都切换不过去,经过百度发现 ...

  5. 初探nmap

    nmap 也就是Network Mapper用来扫描电脑开发的端口 主要功能: 探测主机在线情况 扫描主机开发端口和对应的大概服务命令: nmap 127.0.0.1 查看该主机开放的端口和端.端口类 ...

  6. 2020BJDCTF

    diff: 不得不说这种题目挺有意思的,现在记录一下阶梯过程: 先登录远程,发现有两个文件: 虽然直接能卡到flag文件,但是我们是以ctf用户登录的,并不能直接打开flag文件.仔细观察diff文件 ...

  7. SpringMVC-整合SSM

    整合SSM 目录 整合SSM 1. 设计流程 2. 创建一个数据库表 3. 配置依赖 4. 准备项目框架 5. Mybatis层 1. 编写实体类 2. 编写Mapper接口和xml 1. Mappi ...

  8. (python)生产者消费者模型

    生产者消费者模型当中有两大类重要的角色,一个是生产者(负责造数据的任务),另一个是消费者(接收造出来的数据进行进一步的操作). 为什么要使用生产者消费者模型? 在并发编程中,如果生产者处理速度很快,而 ...

  9. oracle之SQL的基本函数

    SQL的基本函数 2.1 单行函数与多行函数 单行函数:指一行数据输入,返回一个值的函数.所以查询一个表时,对选择的每一行数据都返回一个结果. SQL>select empno,lower(en ...

  10. [算法与数据结构]使用Java泛型实现栈

    ###题解 1 实现内部类node 2 维护top为头节点的链表 3 操作 操作1:push() 操作2: pop() 操作3: isEmpty() ###代码 package Exam; class ...