Question

如果希望这不是重复到另一个问题，我尝试创建网站并使用倒数计时器到特定的结束日期，如婚礼邀请网站的倒计时。

这里是wedding.js

function getTimeRemaining(endtime){
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime){
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock(){
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if(t.total<=0){
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock,1000);
}

var deadline = 'February 12 2017 00:00:50 UTC+0700';
initializeClock('clockdiv', deadline);

和调用倒计时的代码

<div id="clockdiv">
<span class="days"></span> Day 
<span class="hours"></span> Hour 
<span class="minutes"></span> Minute 
<span class="seconds"></span> Second 
</div>

如果使用外部js调用wedding.js工作正常，但我需要包含一些PHP代码，所以我尝试将其转换为内联javascript，如此

<!DOCTYPE html>
<html>

<head>
    <title>Title</title>

    <script>
function getTimeRemaining(endtime){
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

  function initializeClock(id, endtime){
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock(){
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if(t.total<=0){
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock,1000);
}

var deadline = 'February 12 2017 00:00:50 UTC+0700';
initializeClock('clockdiv', deadline);
    </script>

</head>

<body>
<div class="wrapper">
    <div class="container">
        <div class="blocks">

                <!-- start countdown -->
                <div class="fic">
                    <div id="clockdiv">
                        <span class="days"></span> Day<br/>
                        <span class="hours"></span> Hour<br/>
                        <span class="minutes"></span><br/>
                        <span class="seconds"></span> 
                    </div>
                </div>
                <!-- end countdown -->

            </div>
        </div>
    </div>
</div>
</body>
</html>

但是HTML没有显示任何内容，需要帮助来修复此内联JavaScript代码

将外部Javascript转换为内联Javascript

0 个答案: