HTML，JS，CSS工作中的jsfiddle但不是在SharePoint

我也這樣與它的jsfiddle作品（https://jsfiddle.net/h353rdzx/1/）HTML，JS，CSS工作中的jsfiddle但不是在SharePoint

但是我把在SharePoint以下，但櫃檯犯規顯示數字。只是箱子正在顯示。我甚至在該功能之前發出警報，並顯示警報。但是當我在該函數內部放置一個警報時，它不會彈出。任何想法？

<head> 
<link href="/SiteAssets/CountDown/CountDown.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript"> 
    var endtime = '4/29/2017'; 
    function getTimeRemaining(endtime) { 
     var t = Date.parse('4/29/2017') - 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 
     }; 

    } 
alert('test'); 
    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 = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); 
    initializeClock('clockdiv', deadline); 
    </script> 
</head> 
<body> 
<h1>Countdown Clock</h1> 
<div id="clockdiv"> 
    <div> 
    <span class="days"></span> 
    <div class="smalltext">Days</div> 
    </div> 
    <div> 
    <span class="hours"></span> 
    <div class="smalltext">Hours</div> 
    </div> 
    <div> 
    <span class="minutes"></span> 
    <div class="smalltext">Minutes</div> 
    </div> 
    <div> 
    <span class="seconds"></span> 
    <div class="smalltext">Seconds</div> 
    </div> 
</div> 

</body>

來源

2017-02-18 Fuji - H2O

檢查控制檯中是否有錯誤？ –

這個clockdiv正在由sharePoint生成？我建議你在這行之前加上命令'debugger;'var clock = document.getElementById（id）;'..打開你的DevTools ...並檢查你的var'clock'是否正在填充 – andrepaulo

語法錯誤在這一行

或者你可以做到這一點。

，而不是使用getElementById使用getElementsByClassName ...

，因爲我認爲你的div您的SharePoint是產生不同的元素ID。

見我還添加了一個class屬性到div <div id="clockdiv" class="js-clockdiv">，也改變了呼籲initializeClock('js-clockdiv', deadline);

var endtime = '4/29/2017'; 
 
    function getTimeRemaining(endtime) { 
 
     var t = Date.parse('4/29/2017') - 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 
 
     }; 
 

 
    } 
 
    alert('test'); 
 
    function initializeClock(id, endtime) { 
 
     var clock = document.getElementsByClassName(id)[0]; 
 
     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 = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); 
 
    initializeClock('js-clockdiv', deadline);

<head> 
 
    <link href="/SiteAssets/CountDown/CountDown.css" rel="stylesheet" type="text/css" /> 
 

 
    </head> 
 
    <body> 
 
    <h1>Countdown Clock</h1> 
 
    <div id="clockdiv" class="js-clockdiv"> 
 
     <div> 
 
     <span class="days"></span> 
 
     <div class="smalltext">Days</div> 
 
     </div> 
 
     <div> 
 
     <span class="hours"></span> 
 
     <div class="smalltext">Hours</div> 
 
     </div> 
 
     <div> 
 
     <span class="minutes"></span> 
 
     <div class="smalltext">Minutes</div> 
 
     </div> 
 
     <div> 
 
     <span class="seconds"></span> 
 
     <div class="smalltext">Seconds</div> 
 
     </div> 
 
    </div> 
 

 
    </body>

來源

2017-02-18 02:03:07 andrepaulo

我收到此錯誤控制檯。對象不支持屬性或方法'getElementsByClassName' –

你是不是這樣放？ 'var clock = document.getElementsByClassName（id）[0];'你測試了片段嗎？它的工作 – andrepaulo

是的先生。 https://jsfiddle.net/z577z12q。我認爲SharePoint處理方式不同。 –

相關問題