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处理方式不同。 –

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

相关问题