前端开发一个倒计时

前端总体开发流程
前端开发程序流程图
业务前端开发流程

实现倒计时的思路:
1、设定一个未来的时间
2、获取当前的时间
3、设置一个定时器;每次更新当前时间
4、两者差值转换成时间

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
        <meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
        <title>Document</title>
    </head>
    <body>
        剩余时间:<span>00:00:00</span>
    </body>
    <script>
        var time = document.querySelector(‘span’)
        //设置未来的时间
        var t = new Date(‘2018 3 12 12:12:12’)
        t = t.getTime()
        click()
        var t1 = setInterval(click, 1000)
        function click() {
            var now = Date.now() //获取当前时间戳
            var count = Math.round((t – now) / 1000) //获取两者差值
            var h = ~~(count / 3600) //小时
            var m = ~~((count – h * 3600) / 60) //分钟
            var s = count % 60 //秒数
            time.innerHTML = add(h) + ‘:’ + add(m) + ‘:’ + add(s)
        }
        function add(n) {
            return n < 10 ? ‘0’ + n : n
        }
    </script>
</html>
web前端开发业务流程
组件化的前端开发流程
前端开发业务流程
» 本文来自:前端开发者 » 《前端开发一个倒计时》
» 本文链接地址:https://www.rokub.com/7766.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!