HTML-страница Google Sites не распознает CSS или Javascript
Итак, я немного поискал и обнаружил, что некоторые из CSS не загружаются в editor режим, но загрузится в previewer В режиме, однако, не все CSS работают нормально, а Javascript полностью выходит из строя.
Вот некоторые html а также javascript Я пытался с помощью HTML Box:
<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
1 ответ
Интересная проблема. Я думаю, что, возможно, нашел достойное решение для вас:
Во-первых, HTML Box Google автоматически генерирует новые идентификаторы для созданных вами идентификаторов. Так, id="Kill_Count1" через id="Kill_Count10" превращается в нечто вроде id="id_3___"
Первое, что я сделал, это изменил все идентификаторы на классы, все они установлены на "Kill_Text":
<span class="Kill_Text"></span>
Затем я написал некоторый код javascript для сбора элементов, в которых находились эти классы, и установил их идентификаторы на "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>