javascript - Google 协作平台 HTML 框无法识别 CSS 或 Javascript

Question

所以，我四处搜索了一下，发现有些 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

Answer 1

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

首先，Google 的 HTML Box 会为您创建的 ID 自动生成新的 ID 标签。所以，id="Kill_Count1" 到 id="Kill_Count10" 正在变成类似 id="id_3___"

的东西

我做的第一件事是将所有 id 更改为 Classes，全部设置为“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 个计时器，它们对各个 span 执行几乎相同的操作。让一个计时器执行 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>