                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /倒计时效果

倒计时的小问题？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}

#box{
margin: 100px 500px;
}

 .txtshow{
  font:20px blod '微软雅黑';
  color: purple;
  margin-bottom: 10px;
 }

   #timeShow,#timeNow{
    font:30px blod '隶书';
    color: red;
    background-color: #036;
    border: 2px solid purple;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius: 6px;
    -moz-box-shadow:0 0 15px;
    -webkit-box-shadow:0 0 15px;
    box-shadow: 0 0 15px;
   }
</style>

<script type="text/javascript">
window.onload = function () {
var t=setInterval(function () {

var endtime= new Date("2017,7,18"),
   now= new Date(),
   oEndMonth=(endtime.getMonth()+1),
   oEndDate=endtime.getDate(),
   oEndHour=endtime.getHours(),
   oEndMinutes=endtime.getMinutes(),
   oEndSeconds=endtime.getSeconds(),
   nowMonth=(now.getMonth()+1),
   nowDate=now.getDate(),
   nowHour=now.getHours(),
   nowMinutes=now.getMinutes(),
   nowMinutes=nowMinutes<10?'0'+nowMinutes:nowMinutes,
   nowSeconds=now.getSeconds(),
   nowSeconds=nowSeconds<10?'0'+nowSeconds:nowSeconds,
    leftM=(oEndMonth-nowMonth),
    leftD=(oEndDate-nowDate),
    leftH=24+(oEndHour-nowHour),
    leftm=59+(oEndMinutes-nowMinutes),
    leftm=leftm<10?'0'+leftm:leftm,
    leftS=60+(oEndSeconds-nowSeconds),
    leftS=leftS<10?'0'+leftS:leftS,
        lefttime=leftM+'月'+leftD+'日'+leftH+':'+leftm+':'+leftS;  
        document.getElementById('timeShow').innerHTML=lefttime;
        document.getElementById('timeNow').innerHTML=nowHour+':'+nowMinutes+':'+nowSeconds;
        // if (leftS==60) {//这里如何让倒计时的秒数是60时，秒数变为‘00’
        //  leftS="00";    //而分钟数还没有减一位
        //  leftm=leftm+1;//比如现在倒计时2:41:60；按理说，正常的应该是2:42:00，是吧，怎么弄？我这个判断不起中用呢
        // }

    },500)

  
}
</script>
</head>
<body>
  <div id="box">
   <div>距离考试还有<span id="timeShow"></span></div>
   <div>现在准确时间<span id="timeNow"></span></div>
  </div>

</body>
</html>

请看注释处的问题

慕村1994845

2017-05-18

源自：倒计时效果 2-3

关注问题我要回答

1179

操作

收起

2 回答

慕村1994845 提问者
2017-05-19

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}

#box{
margin: 100px 500px;
}

 .txtshow{
  font:20px blod '微软雅黑';
  color: purple;
  margin-bottom: 10px;
 }

   #timeShow,#timeNow{
    font:30px blod '隶书';
    color: red;
    background-color: #036;
    border: 2px solid purple;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius: 6px;
    -moz-box-shadow:0 0 15px;
    -webkit-box-shadow:0 0 15px;
    box-shadow: 0 0 15px;
   }
</style>

<script type="text/javascript">
window.onload = function () {
var t=setInterval(function () {

var endtime= new Date("2017,7,18"),
   now= new Date(),
   oEndMonth=(endtime.getMonth()+1),
   oEndDate=endtime.getDate(),
   oEndHour=endtime.getHours(),
   oEndMinutes=endtime.getMinutes(),
   oEndSeconds=endtime.getSeconds(),
   nowMonth=(now.getMonth()+1),
   nowDate=now.getDate(),
   nowHour=now.getHours(),
   nowMinutes=now.getMinutes(),
   nowMinutes=nowMinutes<10?'0'+nowMinutes:nowMinutes,
   nowSeconds=now.getSeconds(),
   nowSeconds=nowSeconds<10?'0'+nowSeconds:nowSeconds;
    leftM=(oEndMonth-nowMonth);//这些变量不要用var就行了，作为全局变量
    leftD=(oEndDate-nowDate);
    if (leftD<0) {
     leftD=leftD+30;
     leftM=leftM-1;
    }
    leftH=24+(oEndHour-nowHour);
    leftm=59+(oEndMinutes-nowMinutes);
    leftm=leftm<10?'0'+leftm:leftm;
    leftS=60+(oEndSeconds-nowSeconds);
    if (leftS==60) {
     leftS=0;
     leftm=leftm+1;
    }
    leftS=leftS<10?'0'+leftS:leftS;
        lefttime=leftM+'月'+leftD+'日'+leftH+':'+leftm+':'+leftS; 
        // if (leftS==60) {
        //  leftS="00";
        //  leftm=leftm+1;
        // } 

        document.getElementById('timeShow').innerHTML=lefttime;
        document.getElementById('timeNow').innerHTML=nowHour+':'+nowMinutes+':'+nowSeconds;


    },500)

  
}
</script>
</head>
<body>
  <div id="box">
   <div>距离考试还有<span id="timeShow"></span></div>
   <div>现在准确时间<span id="timeNow"></span></div>
  </div>

</body>
</html>