输入任意数(秒) 计算为对应的“时”精确到秒

博主分享了一段JavaScript代码,用于将任意秒数转换为时、分、秒格式,并在前端实现倒计时。通过分析和拓展代码,博主深化了对编程逻辑的理解,强调了逻辑在编程中的重要性。代码中使用了setInterval进行定时更新,并通过取余运算巧妙地计算时、分、秒。博客结尾鼓励大家多加实践,提升编程思维。
摘要由CSDN通过智能技术生成

输入任意数(秒) 计算为对应的“时”精确到秒

  • 为什么写这么一个东西?
    前端小白在做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");
            }

        }
    }

在这里插入图片描述
我领悟到逻辑对于代码真的是灵魂,做完后立马写下第一个博客,希望自己从此后能“真正”的敲代码。
加油同路人。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值