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，全部设置为＆＃34; Kill_Text＆＃34;：

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

接下来，我编写了一些javascript代码来收集这些类所在的元素，并将其ID设置回＆＃34; Kill_Count1＆＃34;就像你以前一样：

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>

Google协作平台HTML Box无法识别CSS或Javascript

1 个答案: