首页 > 试题广场 >

倒计时

[编程题]倒计时
  • 热度指数：8170 时间限制：C/C++ 2秒，其他语言4秒 空间限制：C/C++ 256M，其他语言512M
  • 算法知识视频讲解
倒计时是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/CSS/JavaScript
Emery123头像 Emery123 
    function second(second) {
      const day = Math.floor(second / (3600 * 24))
      const hour = Math.floor(second % (3600 * 24) / 3600) >= 24 ?
        Math.floor(second % (3600 * 24) / 3600) % 24 : Math.floor(second % (3600 * 24) / 3600)
      const minute = Math.floor(second % (3600 * 24) / 60) >= 60 ?
        Math.floor(second % (3600 * 24) / 60) % 60 : Math.floor(second % (3600 * 24) / 60)
      const second1 = Math.floor(second % (3600 * 24)) >= 60 ?
        Math.floor(second % (3600 * 24)) % 60 : Math.floor(second % (3600 * 24))
      return {
        day: +day,
        hour: +hour,
        min: +minute,
        second: +second1
      }
    }

 function render(data) {
      const {
        day,
        hour,
        min,
        second
      } = data
      const jsCountdown = document.querySelector('#jsCountdown')
      const reg = /(\d+)天\s(\d+):\s(\d+):\s(\d+)/
      const res = jsCountdown.innerText.replace(reg, () =>
        `<span>${day<10?'0'+day:day}天</span> <span>${hour<10?'0'+hour:hour}:</span> <span>${min<10?'0'+min:min}:</span> <span>${second<10?'0'+second:second}</span>`
      )
      jsCountdown.innerHTML = res
      if (day === 0) {
        jsCountdown.children[0].className = 'hide'
      }
    }

发表于 2022-12-02 14:08:01 回复(0)
HTML/CSS/JavaScript
牛客55845467号头像 牛客55845467号
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>
<style>
    .hide {
        display: none;
    }
</style>

<body>
    <div id="jsCountdown">
        <span>01天</span>
        <span>02:</span>
        <span>03:</span>
        <span>04</span>
    </div>
    <script>
        function second(second) {
            let day = Math.floor(second / (3600 * 24))
            let hour = Math.floor((second - day*(3600*24)) / 3600)
            let min = Math.floor((second - day*(3600*24)- hour * 3600) / 60);
            let seconds = second -day*(3600*24)- hour * 3600 - min * 60;
            return {
                day,
                hour,
                min,
                second: seconds
            }

        }
        function format(data) {
            if (data < 10) {
                return '0' + data
            }
            return data
        }
        function render(data) {
            let { day, hour, min, second } = data
            let spans = [].slice.call(document.getElementById('jsCountdown').getElementsByTagName('span'))
            if (day == 0) {
                spans[0].className = 'hide'
            }
                spans[0].innerText = format(day) + '天'
                spans[1].innerText = format(hour) + ':'
                spans[2].innerText = format(min) + ':'
                spans[3].innerText = format(second)
            let timer = setInterval(() => {
                if (second > 0) {
                    second--
                } else {
                    second = 59
                    if (min > 0) {
                        min--
                    } else {
                        min = 59
                        if (hour > 0) {
                            hour--
                        } else {
                            hour = 59
                            if (day > 0) {
                                day--
                            } else {
                                spans[0].className = 'hide'
                            }
                        }

                    }
                }
                if (day == 0 & hour == 0 & min == 0 & second == 0) {
                    clearInterval(timer)
                }
                spans[0].innerText = format(day) + '天'
                spans[1].innerText = format(hour) + ':'
                spans[2].innerText = format(min) + ':'
                spans[3].innerText = format(second)
            }, 1000);
        }
       
        render(second(5))
    </script>
</body>
//我还以为做一个真正的倒计时效果  但是这样也通过了
</html>

发表于 2022-10-17 10:45:54 回复(0)
HTML/CSS/JavaScript
凡夫俗子1.0头像 凡夫俗子1.0
为什么不行 在vscode上可以呀
function second(second) {
            function times(e) {
                if (e < 10) {
                    return e = '0' + e
                } else {
                    return e
                }
            }
            let day = times(Math.floor(second / 60 / 60 / 24))
            let hour = times(Math.floor(second / 60 / 60 % 24))
            let min = times(Math.floor(second / 60 % 60))
            let seconds = times(Math.floor(second % 60))
            return data = { day: day, hour: hour, min: min, second: seconds }
        }

        function render(data) {
            let div = document.querySelector('#jsCountdown')
            if (data.day == 0) {
                div.children[0].setAttribute('class', 'hide')
            }
            let arr = []
            for (let i in data) {
                arr.push(data[i])
            }
            let spans = Array.from(div.querySelectorAll('span'))
            for (let i in spans) {
                let text = div.children[i].innerText
                text = text.replace(/\d{2}/g, arr[i])
                div.children[i].innerText = text
            }
        }
发表于 2022-09-10 14:25:16 回复(0)
HTML/CSS/JavaScript
kkkr头像 kkkr 
function second(second) {
    return {
        day : parseInt(second / 60 / 60 / 24),
        hour : parseInt(second / 60 / 60 % 24),
        min : parseInt(second / 60 % 60),
        second : parseInt(second % 60)
    } 
}
 
function render(data) {
    const div = document.querySelector('#jsCountdown');
    div.innerHTML = `
          <span class=${data.day === 0 ? 'hide' : ''}>${data.day < 10 ? '0' + data.day : data.day}天</span>
          <span>${data.hour < 10 ? '0' + data.hour : data.hour}:</span>
          <span>${data.min < 10 ? '0' + data.min : data.min}:</span>
          <span>${data.sec < 10 ? '0' + data.sec : data.sec}</span>
    `;
 
}

发表于 2022-08-17 17:16:51 回复(0)
HTML/CSS/JavaScript
timegogo头像 timegogo
倒计时这题，测试数据有点恶心，示例给的天、时、分、秒之间有空格，但是到了测试数据的时候没有空格
发表于 2022-07-19 15:24:02 回复(0)
HTML/CSS/JavaScript
趴姿菜狗头像 趴姿菜狗 
<div id="jsCountdown">
    <span id="day">01天</span>
    <span id="hour">02:</span>
    <span id="min">03:</span>
    <span id="second">04</span>
</div>

function second(second) {
    let day = parseInt(((second / (60 * 60)) / 24))
    let hour = parseInt(second / (60 * 60)) - day * 24
    let min = parseInt(parseInt(second % (60 * 60)) / 60)
    let sec = second - (day * 24 * (60 * 60) + hour * (60 * 60) + min * 60)
    return {
        day: day,
        hour: hour,
        min: min,
        second: sec
    }
}

function render(data) {
    const daySpan = document.querySelector('#day')
    const hourSpan = document.querySelector('#hour')
    const minSpan = document.querySelector('#min')
    const secSpan = document.querySelector('#second')
    
    function format(num, length) {
        return (Array(length).join("0") + num).slice(-length);
    }
    
    const day = parseInt(daySpan.innerHTML, 10)
    
    if(data.day === 0) {
        daySpan.classList.add('hide')
    }
    daySpan.innerHTML = (data.day < 10 ? format(data.day, 2) : data.day) + '天' 

    hourSpan.innerHTML = (data.hour < 10 ? format(data.hour, 2) : data.hour) + ':'
    minSpan.innerHTML = (data.min < 10 ? format(data.min, 2) : data.min) + ':'
    secSpan.innerHTML = (data.second < 10 ? format(data.second, 2) : data.second)
}

发表于 2022-05-08 14:56:24 回复(0)
HTML/CSS/JavaScript
16级老腊肉头像 16级老腊肉
function second(second) {
    let dateObj = { // 算时间当然得从最大的开始除，求余的都是捡上面吃剩的漏
        day: parseInt(second/60/60/24),
        hour: parseInt(second/60/60%24),
        min: parseInt(second/60%60),
        second: parseInt(second%60)
    };
    return dateObj;
}

function render(data) {
    let children = document.getElementById('jsCountdown').getElementsByTagName('span'); // 直接用childNodes是过不了的，它会把空的文本节点当成节点，比如换行
    if(data.day === 0){ // 如果day为0，隐藏天数对应的span，其余还是正常展示
        children[0].className = 'hide';
    } else {
        children[0].innerHTML = ('0' + data.day).slice(-2) + '天';
    }
    children[1].innerHTML = ('0' + data.hour).slice(-2) + ':';
    children[2].innerHTML = ('0' + data.min).slice(-2) + ':';
    children[3].innerHTML = ('0' + data.second).slice(-2);
}
发表于 2022-02-18 14:10:14 回复(0)
HTML/CSS/JavaScript
huaxifn头像 huaxifn 
function second(second) {
    return obj = {
        day:parseInt(second/60/60/24),
        hour:parseInt(second/60/60%24),
        min:parseInt(second/60%60),
        second:parseInt(second%60)
    }
}

function render(data) {
    var jsCountdown = document.getElementById('jsCountdown');
    var span = jsCountdown.querySelectorAll('span');
    Object.keys(data).forEach((el,index)=>{
        data[el] = data[el]<10?'0'+data[el]:data[el];
        span[index].innerHTML = el=='day'?data[el]+'天': (el=='second'?data[el]:data[el]+':');
        el=='day' && parseInt(data[el])==0? span[index].className='hide':span[index].className='';
    })
}

发表于 2022-02-17 10:30:17 回复(0)
HTML/CSS/JavaScript
♈FourBrother✅已认证♉头像 ♈FourBrother✅已认证♉
这又是为啥跑不过呢 
function second(second) {
    const s = second % 60
    const m = ~~(second / 60) % 60
    const h = ~~(second / 3600) % 24
    const d = ~~(second / 86400)
    return {
        second: s,
        min: m,
        hour: h,
        day: d
    }
}

function render(data) {
    const [day, hour, min, second] = jsCountdown.children
    day.innerText = String(data.day).padStart(2, '0') + '天'
    if (day.innerText === '00天') day.classList.add('hide')
    hour.innerText = String(data.hour).padStart(2, '0') + ':'
    min.innerText = String(data.min).padStart(2, '0') + ':'
    second.innerText = String(data.second).padStart(2, '0')
}

发表于 2021-11-29 15:40:15 回复(0)
HTML/CSS/JavaScript
monze头像 monze 
// 传入参数为整数 时间长(s)
function second(second) {
  // 初始化时间单位
  let sec = 1
  let min = sec * 60
  let hr = min * 60
  let day = hr * 24
  // 返回结果
  let res = {
    day: parseInt(second / day),
    hour: parseInt(second % day / hr),
    min: parseInt(second % hr / min),
    second: parseInt(second % min)
  }
  return res
}

// 传入参数为second方法的输出
function render(data) {
  // 补0
  function addZero(param) {
    if (param < 10) {
      param = '0' + param
    }
    return param
  }
  var dom = document.getElementById('jsCountdown')
  let renderHtml = `
    <span class="${data.day == 0 ? 'hide' : ''}">${addZero(data.day)}天</span>
    <span>${addZero(data.hour)}:</span>
    <span>${addZero(data.min)}:</span>
    <span>${addZero(data.second)}</span>
  `
  dom.innerHTML = renderHtml
}
发表于 2021-11-25 14:06:03 回复(0)
HTML/CSS/JavaScript
Banker头像 Banker 
function second(second) {
    var oneDay = 3600 * 24;
    var Day = Math.floor(second / oneDay);
    var Hour = Math.floor((second % oneDay) / 3600);
    var Min = Math.floor((second % oneDay % 3600) / 60);
    var Sec = Math.floor((((second % oneDay) % 3600) % 60) % 60);
    return{day: Day,hour:Hour,min:Min,second:Sec}
}

function render(data) {
    for(var item in data) {
        if(data[item] < 10) {
            data[item] = "0" + data[item];
        }
    }
    var spans = document.getElementById("jsCountdown").getElementsByTagName("span");
    if(data.day == "00") {
        spans[0].className = "hide";
    } else {
        spans[0].innerHTML = data.day + "天";
    }
    spans[1].innerHTML = data.hour + ":";
    spans[2].innerHTML = data.min + ":";
    spans[3].innerHTML = data.second;
    
}

发表于 2021-09-08 10:59:02 回复(0)
HTML/CSS/JavaScript
像一颗滚石头像 像一颗滚石 
function second(second) {
    return {
        day: Math.floor(second / 3600 / 24),
        hour: Math.floor(second / 3600 % 24),
        min:  Math.floor(second / 60 % 60),
        second: second % 60
    }
}

function render(data) {
    const d = document.getElementById('jsCountdown');
    d.innerHTML = `
        <span class=${data.day === 0 ? 'hide' : ''}>${('0' + data.day).slice(-2)}天</span>
        <span>${('0' + data.hour).slice(-2)}:</span>
        <span>${('0' + data.min).slice(-2)}:</span>
        <span>${('0' + data.second).slice(-2)}</span>
    `;
}

发表于 2021-08-18 22:45:56 回复(0)
提交观点

问题信息

C++工程师 iOS工程师 安卓工程师 运维工程师 模拟 前端工程师 算法工程师 2018 PHP工程师 百度 Javascript Java工程师
上传者：小小
难度：
13条回答 3361浏览

热门推荐

通过挑战的用户

查看代码

相关试题

倒计时

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号