首页 \ 问答 \ html,js,css在jsfiddle中工作,但不在sharepoint中(html, js, css works in jsfiddle but not in sharepoint)

html,js,css在jsfiddle中工作,但不在sharepoint中(html, js, css works in jsfiddle but not in sharepoint)

我有这个,它在jsfiddle( https://jsfiddle.net/h353rdzx/1/

不过,我把以下内容放在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>

I have this and it works in jsfiddle (https://jsfiddle.net/h353rdzx/1/)

However I put the following in SharePoint but the counter doesnt show the number. Just the boxes are showing. I even put a alert before the function and it shows the alert. But when I put an alert inside the function then it doesn't pop up. Any idea?

<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>

原文:https://stackoverflow.com/questions/42310141
更新时间:2021-06-08 09:06

最满意答案

或者你可以做到这一点。

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

因为我认为你的Sharepoint正在为你的div生成一个不同的元素ID。

看到我还为div <div id="clockdiv" class="js-clockdiv">添加了一个class属性,并且还更改了对initializeClock('js-clockdiv', deadline);的调用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>


This code worked. No matter what I do I could not get the original or suggested code to work in SharePoint.

<div id='clockCountDown'></div>
<script>
function countdown(id,endtime){
  var timer=setInterval(function () {
    var t = endtime - new Date();
    if (t>0) {
      var HTML='{0:D2} days {1:HH}:{1:mm}:{1:ss}';
      document.getElementById(id).innerHTML = String.format(HTML,~~(t/864e5),new Date(t));
    } else {
      clearInterval(timer);
    }
  }, 1000);
  return(timer);
};
var timer1=countdown('clockCountDown' , new Date('4/29/2017'));
</script>

相关问答

更多

jQuery在jsFiddle中工作但不在html中工作(jQuery working in jsFiddle but not in html)

尝试[运行] jsFiddle中的小提琴,然后使用http://jsfiddle.net/draft/中的代码。这将为您提供jsFiddle上使用的确切代码。 这肯定会奏效。 Try to [Run] the fiddle in jsFiddle and then use code from http://jsfiddle.net/draft/ This will give you the exact code used on jsFiddle. This will definitely work ...

我的标记在jsfiddle中工作,但不在任何浏览器中(My markup works in jsfiddle but not in any browser)

在</script>之前有一个不可见的无效字符。 删除它,没关系。 You have an invisible invalid character just before the </script>. Remove it and it's OK.

jQuery draggable在jsfiddle中工作但不在webserver上工作(jQuery draggable working in jsfiddle but not on webserver)

好的,这就是我解决它的方式。 如果我将stoppropagation函数放在另一个函数中,然后从可编辑div中的onclick事件调用该函数,那么一切正常 <!doctype html> <html lang="en"> <head> <style> .dragbox { position:absolute; width:10px; height:25px; paddin ...

JSFiddle工作但不在Blogger网站上:jQuery cookies(JSFiddle works but not on Blogger site: jQuery cookies)

您在代码中引用了jquery.js,但是(从我的测试页面可以看出)您的站点中没有jquery.js。 尝试下载jquery.js文件并将其放在您的网站上或更改: <script type="text/javascript" src="jquery.js"></script> 至: <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> You are refering ...

html,js,css在jsfiddle中工作,但不在sharepoint中(html, js, css works in jsfiddle but not in sharepoint)

或者你可以做到这一点。 而不是使用getElementById使用getElementsByClassName ... 因为我认为你的Sharepoint正在为你的div生成一个不同的元素ID。 看到我还为div <div id="clockdiv" class="js-clockdiv">添加了一个class属性,并且还更改了对initializeClock('js-clockdiv', deadline);的调用initializeClock('js-clockdiv', deadline); ...

为什么jquery悬停在jsfiddle中工作但不在我的html布局中?(Why is jquery hover working in jsfiddle but not in my html layout?)

您需要在$( document ).ready()运行代码,如下所示: $( document ).ready(function() { $("#login").hover(function() { $("#login-form").slideToggle(); }); }); 这将确保您的代码仅在文档对象模型(DOM)准备好后执行。 并记得添加jQuery库: <script src="http://code.jquery.com/jquery-1.11.0.min ...

JavaScript下拉式在jsfiddle中工作,但不在html文件中(Javascript drop down works in jsfiddle but not in html file)

斜线方向是错误的。 应该是text/javascript不是text\javascript 同时将函数的内容移至全局范围。 The slash direction is wrong. Should be text/javascript not text\javascript Also move the contents of the function to the global scope.

脚本在JSFiddle中工作,但在实际上不起作用(Script works in JSFiddle but not on actual)

有两个很重要的原因可以让你看到你的代码在JSBin和本地工作正常: 如果右键单击输出元素并查看它的结构,您将看到所有脚本都转换为在开始和结束正文标记内运行,这与编写代码的方式相反。 我假设您在查看Vimeo API页面上的文档时将样本放在一起。 请注意页面顶部的红色框表示您无法在本地运行此框。 在Web服务器上托管以下代码,您将能够看到它按照您的预期执行。 通常,将所有标记放在<head></head>标记或<body></body>标记内是个好主意。 请参阅注释中的讨论将<script>标记放在 ...

我的弹出窗口在jsfiddle中工作,但不在我的网站上(My popup window works in jsfiddle but not on my site)

您必须在依赖于它的其他脚本之前加载jQuery。 <script src="jquery-1.8.2.min.js"></script> <script src="bPopup.js"></script> You have to load jQuery before your other script that is dependant on it. <script src="jquery-1.8.2.min.js"></script> <script src="bPopup.js"></scr ...

html css的行为与jsfiddle中的行为不同(html css behaves differently than it does in jsfiddle)

当我尝试注释<link rel="stylesheet" href="/css/bootstrap.min.css">它可以工作时 - 该列将被截断。 但是,我需要bootstrap.min.css所以我取消注释并尝试: .PLRSNAME-col { /*width: 100%; min-width: 1px;*/ max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-s ...

相关文章

更多

最新问答

更多
  • 如何从远程文件拉取文件而不覆盖本地文件?(How do I pull files from remote without overwriting local files?)
  • Reactjs:状态改变时重新渲染iframe(Reactjs: re-renders iframes when state changed)
  • 奇怪的网址,以及跟随php页面流程的困难(odd url, and difficulty in following the php page flow)
  • 标签活动无效(Tab Activity is not working)
  • JavaME合适的语法编译器建议?(JavaME-suitable grammar compiler recommendations?)
  • 指定参数(Specifying arguments)
  • 可以通过Ruby插件或控制台覆盖Sketchup中的键盘快捷键吗?(Can one override keyboard shortcuts in Sketchup through the a Ruby Plugin or Console?)
  • 计算Java EE Web App中用户数的最佳方法(Best way to count number of users in a Java EE web App)
  • 无法使用templateUrl加载cordova中的外部模板(unable to load external templates in cordova with templateUrl)
  • PHPExcel:写入期间无法使用缓存(PHPExcel: Unable to use cache during write)
  • 在javascript中嵌套这个指针(nested this pointer in javascript)
  • 谁跟领航致远培训过,有问题问下啊
  • 控制器要求在入门时下载(Controller ask to download on entry)
  • 未能通过conda安装Asyncio(Failure to install Asyncio via conda)
  • 如何查找已完成项目的总长度?(How to find length of total completed items?)
  • 如何检查OleInitialize是否已被调用?(How to check if OleInitialize has already been called?)
  • SQL在特定范围内返回列中具有最大值的行(SQL Returning rows with max value in column, within a specific range)
  • preg_match从url获取id(preg_match get the id from url)
  • 如何在运算符中为make方程转换perl变量?(How to convert a perl variable in a operator for make equations?)
  • 在导航上方添加空格/标题。(Add a white space/ header above navigation.)
  • MeetingItem已保存;(MeetingItem saved; but change now shown in Calendar)
  • c#vb:我们应该使用System.Lazy进行资源密集型任务吗?(c# vb: Should we use System.Lazy for resource-intensive task? (when threading is not needed))
  • 为什么在armeabi代码中使用armeabi-v7a代码?(Why use armeabi-v7a code over armeabi code?)
  • 获取请求的自定义标头(Java HTTP)(Fetching a custom header of a request (Java HTTP))
  • 是否可以在嵌套的if语句中从varchar转换为numeric以动态评估参数?(Is it possible to convert from varchar to numeric within a nested if statement in order to dynamically evaluate a parameter?)
  • 如何将Html.ActionLink转换为链接到Ajax调用的按钮?(How to convert from Html.ActionLink to a button linked to Ajax call?)
  • 应用程序如何处理Windows符号链接?(How are Windows symbolic links treated by the apps?)
  • html,js,css在jsfiddle中工作,但不在sharepoint中(html, js, css works in jsfiddle but not in sharepoint)
  • 从Ruby脚本调用Elasticsearch Rest API(Calling Elasticsearch Rest API from Ruby script)
  • 如何将嵌套setTimeouts转换为承诺(How to convert nested setTimeouts to promises)