JavaScript写秒表
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写秒表的更多相关文章
- 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签
今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...
- JavaScript写在Html页面的<head></head>中
JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...
- JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...
- javascript写在<head>和<body>里的区别
Javascript写在哪里?概括起来就是三种形式:1. 内部:Html网页的<body></body>中:2. 内部:Html网页的<head></head ...
- 原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
- javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数
javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...
- 用JavaScript写一个区块链
几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...
- 怎么分别javascript写在<head>里还是<body>里面?
怎么分别javascript写在<head>里还是<body>里面? 具体哪些语句写在<body>里,哪些语句写在<head>里 满意答案 BeginN ...
- 用javascript写原生ajax(笔记)
AJAX 的全名叫做 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...
随机推荐
- CSS中的包含块
1.初始包含块,浏览器viewport大小 2.非根元素,position:relative/static,包含块为最近的块级框,表格单元或行内祖先框的内容区 3.非根元素,position:abso ...
- VMware中卸载安装Ubuntu系统 ——Ubuntu系统配置(一)
由于之前配置给Ubuntu的磁盘空间不足,进行了扩展磁盘空间,结果Ubuntu无法开机了,试了很多种办法都没成功,也有些后悔没有记录下配置过程,于是决定卸载Ubuntu进行重新安装和配置. 一.VMw ...
- python简介以及简单代码——python学习笔记(一)
学习来源:https://www.liaoxuefeng.com/wiki/1016959663602400 了解python 简单编写并实现python代码 命令行模式和python交互模式 了解p ...
- 沉珂日重的Java项目 Spring真的帮到我们了吗?
开局三连图. 这是刚开始时的程序结构,虽清晰已经有混乱的前兆. 业务增加,人员增加后就会沉珂日重. 几年后,最后的模样会让使用者和维护者都很无奈. 人们喜欢把Java程序的层次结构比作建筑,实际却最像 ...
- Cassandra使用 —— 一个气象站的例子
使用场景: Cassandra非常适合存储时序类型的数据,本文我们使用一个气象站的例子(该气象站每分钟需要存储一条温度数据). 一.方案1:每个设备占用一行 这个方案的思路就是给每个数据源创建一行,比 ...
- IDAPython 安装和设置(windows+linux)
安装步骤: 我采用的是IDA 6.8 windows安装: 机器上安装了Python,到Python的官网—http://www.python.org/getit/下载2.7的安装包.注意对应操作系统 ...
- Mybatis动态SQL配置
使用 if where foreach标签对映射配置文件中sql语句进行动态配置 1.首先在dao接口中设置两个查询方法 package sun.dao; import sun.domain.Quer ...
- oracle数据处理之exp/imp
oracle 导出/导入数据方法一 exp/imp工具:1 将数据库oracle01完全导出,DBA:sys,密码:123456:用户名Scott 密码123456 导出到D:\emp.dmp中 ex ...
- [极客大挑战 2019]Havefun wp
很少见的很简单的一道题 查看源代码 获得一段被注释的代码 直接?cat=dog即可得flag
- SpringBoot中使用切面的每次传的参数,进行解析,验签,并返回解码后的参数
目的,在每次请求的时候,对每次传的参数,进行解析,验签,并返回解码后的参数, 以json传递: 例子背景: IOT平台提供对外可访问的接口, 需要对所有参数的传递做到 不泄露.认证的目的:所以需要在每 ...