输入任意数(秒) 计算为对应的“时”精确到秒
- 为什么写这么一个东西?
前端小白在做webapi复习的时候做一个输入任意秒进行倒计时的小案例,案例中显示对应的“分”精确到秒。当时这个思路我还真是没想明白,用了好几个 if elseif …后来看了看案例源码,发现他是这样写的:
下面展示一些内联代码片
。
window.onload = function () {
var btn = document.getElementsByTagName("button")[0];
var inputS = document.getElementsByTagName("input");
btn.onclick = function () {
var num = inputS[0].value;
setInterval(timeChange,1000);
timeChange();
function timeChange() {
var a = num % 60;
var b = (num - a)/60;
inputS[1].value = format(b);
inputS[2].value = format(a);
num--;
}
function format(c) {
return c.toString().replace(/^(\d)$/,"0$1");
}
}
}
我的天,关于var a,b的定义几个字符就搞定?
在我贯彻学习之后,为了训练自己编程思维能力,我拓展出了 从“时”精确到秒的写法 如下:
- 第一步 分析秒化为(时,分,秒)算法
num(输入的时间称为num)
H(小时数)
M(分钟数)
S(秒数)
首先:H:num去掉s和m*60后再除3600
接着分析M:num%3600再去掉s再除60
最后S:num%3600%60
- 设计实例公式
通过前面的分析,发现我需要先从S开始明确
S: num % 3600 %60
M:(num%3600-s)/60
H:(num-s-60m)/3600 - 我的代码
window.onload = function () {
var btn = document.getElementsByTagName("button")[0];
var inputS = document.getElementsByTagName("input");
btn.onclick = function () {
clearInterval(btn.timeid);
var num = inputS[0].value;
btn.timeid = setInterval(timeChange,1000);
timeChange();
function timeChange() {
var s = num % 3600 %60;
var m = (num%3600-s)/60;
var h = (num-s-60*m)/3600;
inputS[1].value = format(h);
inputS[2].value = format(m);
inputS[3].value = format(s);
num--;
if(num < 0 ){
clearInterval(btn.timeid);
}
}
function format(c) {
return c.toString().replace(/^(\d)$/,"0$1");
}
}
}
我领悟到逻辑对于代码真的是灵魂,做完后立马写下第一个博客,希望自己从此后能“真正”的敲代码。
加油同路人。