我要招人

去企业版

首页 > 试题广场 >

请用代码实现如下倒计时组件（包括HTML，JS，CSS代码）

[问答题]

请用代码实现如下倒计时组件（包括HTML，JS，CSS代码），要求：支持单页面多次调用及移动端显示；

不完美卡卡

没写翻页，写了倒计时

dow.onload = function(){
    function countTime(){
        //获取当前时间
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      var endDate = new Date("04/10/2018");
      var end = endDate.getTime();
      //时间差
      var leftTime = end-now;
      //定义变量 d,h,m,s保存倒计时的时间
      var d,h,m,s;
      if (leftTime>=0) {
      d = Math.floor(leftTime/1000/60/60/24);
      h = Math.floor(leftTime/1000/60/60%24);
      m = Math.floor(leftTime/1000/60%60);
      s = Math.floor(leftTime/1000%60);
      }
      //将倒计时赋值到div中
      document.getElementById("day").innerHTML = d;
      document.getElementById("hour").innerHTML = h;
      document.getElementById("minute").innerHTML = m;
      document.getElementById("mount").innerHTML = s;

    }
    setInterval(countTime,1000);

发表于 2018-04-09 15:39:16 回复(0)

little0_0

贡献上我的代码，希望小伙伴们给出整改意见

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>倒计时</title>

    <style> #box { background-color: black;  border-radius: 5px;  padding: 5px 10px;  display: flex;  -webkit-display: flex;  color: white;  justify-content: space-between;  align-items: center;  width: 240px;  height: 40px;  box-sizing: border-box;  } #box span, #box div { width: 20%;  text-align: center;  } #box div { position: relative;  overflow: hidden;  height: 100%;  } #item1, #item2 { display: block;  position: absolute;  left: 0;  right: 0;  margin: auto;  }
    </style>

</head>
<body>
<div id="box">
    <span id="day"></span> :  <span id="hour"></span> :  <span id="minute"></span> :  <div id="second">
        <span id="item1"></span>
        <span id="item2"></span>
    </div>
</div>

<script> var timer;  var date = new Date('3/30/2018');  function move() { var now = new Date();  var count = date - now;   console.log(count);   if(count <= 0) { timer = null;  } var time = calculate(count);   console.log(time);   document.getElementById('day').innerHTML =  (time.day < 10) ? ('0' + time.day) : time.day;  document.getElementById('hour').innerHTML =  (time.hour < 10) ? ('0' + time.hour) : time.hour;  document.getElementById('minute').innerHTML =  (time.minute < 10) ? ('0' + time.minute) : time.minute;   var item1 = document.getElementById('item1');  var item2 = document.getElementById('item2');   item1.innerHTML = time.second + 1;  item2.innerHTML = time.second;   item2.style.top = (Math.floor(time.ms / 100)*3) + 'px';  item1.style.top = (Math.floor(time.ms / 100)*3-30) + 'px';   timer = setTimeout(move, 100);  } function calculate(count) { var result = {
            day: 0,  hour: 0,  minute: 0,  second: 0,  ms: 0  };  result.ms = count % 1000;  count = (count - result.ms) / 1000;  if(!count) { return result;  }
        result.second = count % 60;  count = (count - result.second) / 60;  if(!count) { return result;  }
        result.minute = count % 60;  count = (count - result.minute) / 60;  if(!count) { return result;  }
        result.hour = count % 24;  count = (count - result.hour) / 24;  result.day = count;  return result;  } move(); </script>
</body>
</html>

发表于 2018-03-26 08:50:25 回复(1)

想在家办公的打工鸭爱读书

var totalTime=200000   
var counter=document.getElementById('counter')

function countTime(){
    if(this.totalTime<0) return
    var objTime=this.divideTime(this.totalTime)
    var res=objTime.hours+':'+objTime.minutes+':'+objTime.seconds+':'+objTime.milliseconds/100
    this.counter.innerHTML=res
    this.totalTime-=100
    setTimeout("countTime()",100)
}


function divideTime(totalMilliseconds){
    var hours,minutes,seconds,milliseconds;
    var rest
    milliseconds=totalMilliseconds%1000
    rest=Math.floor(totalMilliseconds/1000)
    seconds=rest%60
    rest=Math.floor(rest/60)
    minutes=rest%60
    rest=Math.floor(rest/60)
    hours=rest%24
    return {hours,minutes,seconds,milliseconds}
}

countTime()

发表于 2018-02-21 18:04:49 回复(0)

fghfghggh

http://flipclockjs.com/ 该插件上有所有的翻页时钟的源码，又能看懂的欢迎交流

发表于 2018-03-09 09:13:51 回复(3)

是函数不是方法

function countdown(date) {

var hour = parseInt((new Date(date) - new Date())/1000/60/60%24)

var minute = parseInt((new Date(date) - new Date())/1000/60%60)

var second = parseInt((new Date(date) - new Date())/1000%60)

var mileSecond = parseInt((new Date(date) - new Date())%1000)

hour = checkTime(hour)

minute = checkTime(minute)

second = checkTime(second)

document.getElementById("hour").innerHTML = hour

document.getElementById("minute").innerHTML = minute

document.getElementById("second").innerHTML = second

document.getElementById("mileSecond").innerHTML = mileSecond

}

function checkTime(time) {

if(time<10) {

time = '0'+time

}

return time;

}

setInterval(_ => {

countdown('2018-7-3 15:10:40')

},10)

发表于 2018-07-03 14:20:30 回复(0)

提交观点

问题信息

前端工程师 2018 蘑菇街

上传者：小小

难度：

5条回答 78收藏 3333浏览

请用代码实现如下倒计时组件（包括HTML，JS，CSS代码）

问题信息

热门推荐

相关试题