html版电子表，秒表，倒计时

电子表：

<button onclick="fullscreen()">全屏切换</button>
<button onclick="fontsizeup()">变大</button>
<button onclick="fontsizedown()">变小</button>
<button onclick="fontsizereset()">恢复</button>
<div style="margin:0 auto; text-align:center">
	<div style="font-size:48px; color: blue;" id="date">
		<span id="year">2017</span>-<span id="month">01</span>-<span id="day">01</span>
	</div>

	<div style="font-size:140px; color: blue;" id="time">
		<span id="h">12</span>:<span id="m">00</span>:<span id="s">00</span>.<span id="sss">000</span>
	</div>
</div>
<script>

var bfullscreen = false;
function fullscreen() {
	//document.documentElement.webkitRequestFullScreen();
	//var docElm = document.documentElement;
	//console.log(docElm)
	if (!bfullscreen) {
		if (document.requestFullscreen) { // w3c
			document.requestFullscreen();
		} else if (document.mozRequestFullScreen) { // FireFox
			document.mozRequestFullScreen();
		} else if (document.webkitRequestFullScreen) { // chrome
			document.webkitRequestFullScreen();  
		} else if (document.msRequestFullscreen) { // IE11
			document.msRequestFullscreen();
		}
		bfullscreen = true;
	} else {
		if (document.exitFullscreen) {
		    document.exitFullscreen();
		} else if (document.mozCancelFullScreen) {
		    document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
		    document.webkitCancelFullScreen();
		} else if (document.msExitFullscreen) {
		      document.msExitFullscreen();
		}
		bfullscreen = false;
	}
}
function fontsizereset() {
	var ed = document.getElementById("date");
	var et = document.getElementById("time");
	ed.style.fontSize = "48px";
	et.style.fontSize = "160px";
}
function fontsizeup() {
	var ed = document.getElementById("date");
	var et = document.getElementById("time");
	var vd = ed.style.fontSize;
	var vt = et.style.fontSize;
	vd = parseInt(vd.substring(0, vd.length - 2)) + 16;
	vt = parseInt(vt.substring(0, vt.length - 2)) + 24;
	if (vd > 240)
		vd = 240;
	if (vt > 360)
		vt = 360;
	ed.style.fontSize = vd + "px";
	et.style.fontSize = vt + "px";
}
function fontsizedown() {
	var ed = document.getElementById("date");
	var et = document.getElementById("time");
	var vd = ed.style.fontSize;
	var vt = et.style.fontSize;
	vd = parseInt(vd.substring(0, vd.length - 2)) - 20;
	vt = parseInt(vt.substring(0, vt.length - 2)) - 20;
	if (vd < 12)
		vd = 12;
	if (vt < 16)
		vt = 16;
	ed.style.fontSize = vd + "px";
	et.style.fontSize = vt + "px";
}

// -------------------------------
function updateDate(y, m, d) {
	if (m < 10)
		m = "0" + m;
	if (d < 10)
		d = "0" + d;
	document.getElementById("year").innerHTML = y;
	document.getElementById("month").innerHTML = m;
	document.getElementById("day").innerHTML = d;
}

function updateTime(h, m, s, sss) {
	if (h < 10)
		h = "0" + h;
	if (m < 10)
		m = "0" + m;
	if (s < 10)
		s = "0" + s;
	document.getElementById("h").innerHTML = h;
	document.getElementById("m").innerHTML = m;
	document.getElementById("s").innerHTML = s;
	document.getElementById("sss").innerHTML = sss;
}

function update(){
	var date = new Date();
	updateDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
	updateTime(date.getHours(), date.getMinutes(), date.getSeconds(), parseInt(date.getMilliseconds() / 100));

};
setInterval("update()",100); // 用延时的话间隔1s多1ms

</script>

秒表：

<button onclick="start()">开始</button>
<button onclick="stop()">停止</button>
<button onclick="record()">记录</button>
<button onclick="clean()">清空</button>
<div style="margin:0 auto; text-align:center; height: 400px;">
	<div style="font-size:140px; color: blue;" id="time">
		<span id="h">00</span>:<span id="m">00</span>:<span id="s">00</span>.<span id="sss">000</span>
	</div>
	<pre id="result"></pre>
</div>
<script>

// -------------------------------
function updateTime(h, m, s, sss) {
	if (h < 10)
		h = "0" + h;
	if (m < 10)
		m = "0" + m;
	if (s < 10)
		s = "0" + s;
	if (sss < 10)
		sss = "00" + sss;
	else if (sss < 100)
		sss = "0" + sss;
	document.getElementById("h").innerHTML = h;
	document.getElementById("m").innerHTML = m;
	document.getElementById("s").innerHTML = s;
	document.getElementById("sss").innerHTML = sss;
}
var _time = new Date().getTime();
function update(){

	var time = new Date().getTime() - _time;
	console.log(time);
	var ms = time % 1000;
	time = (time - ms) / 1000;
	var s = time % 60;
	time = (time - s) / 60;
	var m = time % 60;
	time = (time - m) / 60;
	var h = time % 60;
	time = (time - h) / 60;
	updateTime(h, m, s, ms);
	
};
var interval = null;
function start() {
	if (interval != null) return;
	var h = document.getElementById("h").innerHTML;
	var m = document.getElementById("m").innerHTML;
	var s = document.getElementById("s").innerHTML;
	var sss = document.getElementById("sss").innerHTML;
	//console.log("" + parseInt(sss) +"-"+ parseInt(s) + "-" + parseInt(m)  + "-" + parseInt(h));
	var time = parseInt(sss) + parseInt(s) * 1000 + parseInt(m) * 60000 + parseInt(h) * 3600000;
	//console.log("time=" + time);
	_time = new Date().getTime() - time;
	interval = setInterval("update()",1); // 用延时的话间隔1s多1ms
}
function stop() {
	if (interval == null) return;
	clearInterval(interval);
	interval = null;
}
function record() {
	var e = document.getElementById("result");
	var t = e.innerHTML;
	var h = document.getElementById("h").innerHTML;
	var m = document.getElementById("m").innerHTML;
	var s = document.getElementById("s").innerHTML;
	var sss = document.getElementById("sss").innerHTML;
	e.innerHTML = t + "\n" + h +":"+ m +":"+ s +"."+ sss;
}
function clean() {
	_time = new Date().getTime();
	update();
	document.getElementById("result").innerHTML = "";
}

</script>

倒计时：

<button onclick="start()">开始</button>
<button onclick="stop()">停止</button>
<button onclick="clean()">清空</button>
<div style="margin:0 auto; text-align:center" id="main">
	<div style="font-size:24px;" id="timeset">
		<input type="number" id="hh" min="0" max="23" value="0"> :
		<input type="number" id="mm" min="0" max="59" value="0"> :
		<input type="number" id="ss" min="0" max="59" value="30"> .
		<input type="number" id="ssss" min="0" max="999" value="0">
		<button onclick="set()">设置定时</button>
	</div>
	<div style="font-size:140px; color: blue;" id="time">
		<span id="h">00</span>:<span id="m">00</span>:<span id="s">00</span>.<span id="sss">000</span>
	</div>
	<pre id="result"></pre>
</div>
<script>
function set() {
	var h = document.getElementById("hh").value;
	var m = document.getElementById("mm").value;
	var s = document.getElementById("ss").value;
	var sss = document.getElementById("ssss").value;
	
	h = parseInt(h);
	m = parseInt(m);
	s = parseInt(s);
	sss = parseInt(sss);
	
	updateTime(h, m, s, sss);
}
// -------------------------------
function updateTime(h, m, s, sss) {
	if (h < 10)
		h = "0" + h;
	if (m < 10)
		m = "0" + m;
	if (s < 10)
		s = "0" + s;
	if (sss < 10)
		sss = "00" + sss;
	else if (sss < 100)
		sss = "0" + sss;
	document.getElementById("h").innerHTML = h;
	document.getElementById("m").innerHTML = m;
	document.getElementById("s").innerHTML = s;
	document.getElementById("sss").innerHTML = sss;
}
var _time = new Date().getTime();
function update(){
	var time = _time - new Date().getTime();
	var end = false;
	if (time <= 0) {
		time = 0;
		end = true;
	}
	//console.log(time);
	var ms = time % 1000;
	time = (time - ms) / 1000;
	var s = time % 60;
	time = (time - s) / 60;
	var m = time % 60;
	time = (time - m) / 60;
	var h = time % 60;
	time = (time - h) / 60;
	updateTime(h, m, s, ms);
	if (end) {
		stop();
		warn();
		return;
	}
};

var interval = null;
function start() {
	if (interval != null) return;
	var h = document.getElementById("h").innerHTML;
	var m = document.getElementById("m").innerHTML;
	var s = document.getElementById("s").innerHTML;
	var sss = document.getElementById("sss").innerHTML;
	//console.log("" + parseInt(sss) +"-"+ parseInt(s) + "-" + parseInt(m)  + "-" + parseInt(h));
	var time = parseInt(sss) + parseInt(s) * 1000 + parseInt(m) * 60000 + parseInt(h) * 3600000;
	//console.log("time=" + time);
	_time = new Date().getTime() + time;
	//console.log(_time);
	document.getElementById("time").style.backgroundColor = "#fff";
	interval = setInterval("update()", 1);
}
function stop() {
	document.getElementById("time").style.backgroundColor = "#fff";
	if (interval == null) return;
	clearInterval(interval);
	interval = null;
}

function clean() {
	stop();
	_time = new Date().getTime();
	updateTime(0,0,0,0);
}

function warn() {
	console.log("wann, end");
	document.getElementById("time").style.backgroundColor = "red";
	//alert("到时间了");
}
</script>

扫描二维码关注公众号，回复： 3091194 查看本文章