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).它最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并 ...
随机推荐
- let与const认识
es2015之前 在es2015之前JavaScript并没有块级作用域这个说法,只有全局和函数级的变量,let的出现使JavaScript语言有了块级作用域 在外面访问 { var a=5; l ...
- python3之print()函数
print语法格式 print()函数具有丰富的功能,详细语法格式如下: print(value, -, sep=' ', end='\n', file=sys.stdout, flush=False ...
- 原生JDK网络编程BIO
服务端提供IP和监听端口,客户端通过连接操作想服务端监听的地址发起连接请求,通过三次握手连接,如果连接成功建立,双方就可以通过套接字进行通信. 传统的同步阻塞模型开发中,ServerSocket负责绑 ...
- leetcode刷题-51N皇后
题目 n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 给定一个整数 n,返回所有不同的 n 皇后问题的解决方案. 每一种解法包含一个明确的 n 皇后问 ...
- Selenium-WebDriver安装
一.chrome浏览器: 根据chrome浏览器版本,下载对应的驱动 chromedriver版本 支持的Chrome版本 v2.37 v64-66 v2.36 v63-65 v2.35 v62-64 ...
- python基础:面向对象
一.定义 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类:一个种类,一个模型. 对象:指具体的东西,模型造出来的东西叫做对象. 实例:实例和对象是一样的. 实例化:实例化就 ...
- [剑指Offer]65-不用加减乘除做加法
题目 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 题解 用位运算模拟加法的三步: 无进位加法:异或运算. 进位:与运算再左移一位. 直到进位为0结束. 代码 pub ...
- python获取倒数第k个结点
思路:定义快慢两个指针,快指针走k步后慢指针开始走,当快指针走到链表尾时快慢指针距离相隔k,倒数第K个结点就是慢指针所指的结点 # -*- coding:utf-8 -*- # class ListN ...
- rabbitmq的安装&学习
主要按照 https://www.cnblogs.com/web424/p/6761153.html https://www.cnblogs.com/qiyebao/p/4822583.html 学习 ...
- 【JAVA】mysql数据库常见知识点
目录 1.事务四大特性 2.数据库隔离等级 3.Mysql两种存储引擎的区别 4.哈希索引和B+树索引 5.聚簇索引和非聚簇索引 6.索引的优缺点,什么时候使用索引,什么时候不能使用索引 7.索引的底 ...