倒计时实现

最新推荐文章于 2021-07-05 19:29:35 发布

山鬼谣弋痕夕

最新推荐文章于 2021-07-05 19:29:35 发布

阅读量497

点赞数

分类专栏：笔试题js 文章标签：倒计时

本文链接：https://blog.csdn.net/weixin_30363263/article/details/81260481

版权

笔试题js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

倒计时是web开发中常见的组件，请完成second和render两个函数，完成倒计时的显示部分
1、second函数的输入为整数，返回{day: Int, hour: Int, min: Int, second: Int}
2、render函数的输入为second函数的输入，将数据在页面对应的DOM元素上显示出来，格式如html所示
3、如果day为0，隐藏对应的DOM元素，否则显示（请直接使用已经实现的css代码）
4、数值不足两位，前面补充0

HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。

function second(second) {
    var res,
        diff;
    res = {};
    diff = new Date(second*1000);
    res.day = diff.getUTCDate() - 1;
    res.hour = diff.getUTCHours();
    res.min = diff.getUTCMinutes();
    res.second = diff.getUTCSeconds();
    return res;
}
function render(data) {
   var node;
   node = document.getElementById("jsCountdown");
    daySpan = node.children[0];
    hourSpan = node.children[1];
    minSpan = node.children[2];
    secSpan = node.children[3];
    if (data.day === 0) {
        daySpan.setAttribute("class", "hide");
    } else {
        daySpan.innerHTML = (data.day < 9 ? ("0"+data.day) : data.day) + "天";
    }
    hourSpan.innerHTML = (data.hour < 9 ? ("0"+data.hour) : data.hour) + ":";
    minSpan.innerHTML = (data.min < 9 ? ("0"+data.min) : data.min) + ":";
    secSpan.innerHTML = (data.second < 9 ? ("0"+data.second) : data.second);
}