javascript - Google Sites HTML Box无法识别CSS或Javascript

因此，我搜索了一下，发现有些CSS不会在editor模式下加载，但会在previewer模式下加载，但是，并非所有CSS都能正常运行，并且Javascript完全失败了。

这是我尝试使用HTML Box的一些html和javascript：

  <table id="Killed" cellpadding="0" cellspacing="0" align="center">
    <tbody>
      <tr>
        <td>Buffalo</td>
        <td align="right">
          <span id="Kill_Count1"></span>
        </td>
      </tr>

      <tr>
        <td>Camels</td>
        <td align="right">
          <span id="Kill_Count2"></span>
        </td>
      </tr>

      <tr>
        <td>Cattle</td>
        <td align="right">
          <span id="Kill_Count3"></span>
        </td>
      </tr>

      <tr>
        <td>Chickens</td>
        <td align="right">
          <span id="Kill_Count4"></span>
        </td>
      </tr>

      <tr>
        <td>Ducks</td>
        <td align="right">
          <span id="Kill_Count5"></span>
        </td>
      </tr>

      <tr>
        <td>Goats</td>
        <td align="right">
          <span id="Kill_Count6"></span>
        </td>
      </tr>

      <tr>
        <td>Horses</td>
        <td align="right">
          <span id="Kill_Count7"></span>
        </td>
      </tr>

      <tr>
        <td>Pigs</td>
        <td align="right">
          <span id="Kill_Count8"></span>
        </td>
      </tr>

      <tr>
        <td>Sheep</td>
        <td align="right">
          <span id="Kill_Count9"></span>
        </td>
      </tr>

      <tr>
        <td>Turkeys</td>
        <td align="right">
          <span id="Kill_Count10"></span>
        </td>
      </tr>

    </tbody>
  </table><br><br>



 <script>
   window.addEventListener("load", function () {
   function Kill_Count(id,totalDeaths) {
     var deathsPerSecond = totalDeaths/365/24/60/60/4;
     var deaths = 0, result;
     var timer = 1;
     setInterval(function() {
       deaths = deathsPerSecond*timer;
       result = deaths.toFixed();
       document.getElementById(id).innerHTML = result;
       timer++;
     }, 250);
   }

   var killnum = "23199336 1501799 301275455 49877536490 2676365000 402611664 5018470 1375940758 564785251 635382008";
   killnum = killnum.split(" ");
   for (var i = 1; i <= 10; i++) {
     var num = i-1;
     var temp = killnum[num];
     Kill_Count('Kill_Count'+i,Number(temp));
   }
 });
 </script>

需要添加什么？这是网站https://support.google.com/sites/answer/2500646?hl=en

最佳答案

有趣的问题。我想我可能已经为您找到了一个不错的解决方案：

首先，Google的HTML Box将为您生成的ID自动生成新的ID标签。因此，通过id="Kill_Count1"的id="Kill_Count10"变成了id="id_3___"之类的东西

我所做的第一件事是将所有id都更改为Classes，并将所有id都设置为“ Kill_Text”：

<span class="Kill_Text"></span>

接下来，我编写了一些JavaScript代码来收集这些类所在的元素，并将其ID重新设置为“ Kill_Count1”，就像以前一样：

var spans = document.getElementsByClassName("Kill_Text");
// Reset auto-generated ids to Kill_Count#
for (var j = 1; j <= spans.length; j++) {
    spans[j-1].id = ("Kill_Count" + j);
}

从那里，您的代码按预期工作。

旁注：


最初，当我试图运行JavaScript时，我不得不将代码保存在框中，再次保存，然后刷新页面。希望如果您还不知道这会有所帮助:)
您使用过Chrome开发者工具吗？当调试网页时，它们非常有用。 [Ctl + Shift + I]
您的代码当前设置了10个计时器，在各个跨度上执行几乎相同的操作。一个计时器执行10个动作（每个跨度1个）会更有效


以供参考：

这是我在HTML框中使用的最终代码：

<table id="Killed" cellpadding="0" cellspacing="0" align="center">
    <tbody>
        <tr>
            <td>Buffalo</td>
            <td align="right">
                <span class="Kill_Text"></span>
            </td>
        </tr>
        <tr>
            <td>Camels</td>
            <td align="right">
                <span class="Kill_Text"></span>
            </td>
        </tr>
        <tr>
            <td>Cattle</td>
            <td align="right">
                <span class="Kill_Text"></span>
            </td>
        </tr>
        <tr>
            <td>Chickens</td>
            <td align="right">
                <span class="Kill_Text"></span>
            </td>
        </tr>
        <tr>
            <td>Ducks</td>
            <td align="right">
                <span class="Kill_Text"></span>
            </td>
        </tr>
        <tr>
            <td>Goats</td>
            <td align="right">
                <span class="Kill_Text"></span>
            </td>
        </tr>
        <tr>
            <td>Horses</td>
            <td align="right">
                <span class="Kill_Text"></span>
            </td>
        </tr>
        <tr>
            <td>Pigs</td>
            <td align="right">
                <span class="Kill_Text"></span>
            </td>
        </tr>
        <tr>
            <td>Sheep</td>
            <td align="right">
                <span class="Kill_Text"></span>
            </td>
        </tr>
        <tr>
            <td>Turkeys</td>
            <td align="right">
                <span class="Kill_Text"></span>
            </td>
        </tr>
    </tbody>
</table>
<script>
    function Kill_Count(id,totalDeaths) {
        var deathsPerSecond = totalDeaths/365/24/60/60/4;
        var deaths = 0, result;
        var timer = 1;
        setInterval(function() {
            deaths = deathsPerSecond*timer;
            result = deaths.toFixed();
            document.getElementById(id).innerHTML = result;
            timer++;
        }, 250);
    }

    var killnum = "23199336 1501799 301275455 49877536490 2676365000 402611664 5018470 1375940758 564785251 635382008";
    killnum = killnum.split(" ");

    var spans = document.getElementsByClassName("Kill_Text");

    // Reset auto-generated ids to Kill_Count#
    for (var j = 1; j <= spans.length; j++) {
        spans[j-1].id = ("Kill_Count" + j);
    }

    for (var i = 1; i <= 10; i++) {
        var num = i-1;
        var temp = killnum[num];
        Kill_Count('Kill_Count'+i,Number(temp));
    }
</script>