使用 Javascript、HTML 和 CSS 的计数器不起作用答案

【问题标题】：Counter Using Javascript, HTML & CSS Not Working使用 Javascript、HTML 和 CSS 的计数器不起作用
【发布时间】：2017-12-14 17:48:34
【问题描述】：

谁能帮我让这个 (https://jsfiddle.net/hmatrix/v3jncqac/) 代码工作？

意图：我想创建一个递增的计数器。

我的 HTML：

<body onload="incrementCount(10)">
    <div class="main_container" id="id_main_container">
        <div class="container_inner" id="display_div_id">
        </div>
    </div>
</body>

我的 JS：

var counter_list = [10,10000,10000];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");

function incrementCount(current_count){
    setInterval(function(){
        // clear count
        while (display_div.hasChildNodes()) {
            display_div.removeChild(display_div.lastChild);
        }
        str_counter_0++;
        if (str_counter_0 > 99) {
            str_counter_0 = 0; // reset count
            str_counter_1++;    // increase next count
        }
        if(str_counter_1>99999){
            str_counter_2++;
        }
        display_str = str_counter_2.toString() + str_counter_1.toString() + str_counter_0.toString();
        for (var i = 0; i < display_str.length; i++) {
            var new_span = document.createElement('span');
            new_span.className = 'num_tiles';
            new_span.innerText = display_str[i];
            display_div.appendChild(new_span);
        }
    },1000);
}

【问题讨论】：

请点击 CSS 的 jsfiddle 链接
您将代码放在哪里？在<head> 中？还是在<body> 的末尾？代码很好在 DevTools 中检查你的控制台
如果你查看你的开发者控制台，你也会看到为什么它不工作。错误消息在日志中清楚地显示为一天。使用您的开发者工具。

标签： javascript jquery css counter countdowntimer

【解决方案1】：

    <body onload="incrementCount(10)">
    <div class="main_container" id="id_main_container">
        <div class="container_inner" id="display_div_id">
        </div>
    </div>
</body>
<script>
var counter_list = [10,10000,10000];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");

function incrementCount(current_count){
    setInterval(function(){
        // clear count
        while (display_div.hasChildNodes()) {
            display_div.removeChild(display_div.lastChild);
        }
        str_counter_0++;
        if (str_counter_0 > 99) {
            str_counter_0 = 0; // reset count
            str_counter_1++;    // increase next count
        }
        if(str_counter_1>99999){
            str_counter_2++;
        }
        display_str = str_counter_2.toString() + str_counter_1.toString() + 
str_counter_0.toString();
        for (var i = 0; i < display_str.length; i++) {
            var new_span = document.createElement('span');
            new_span.className = 'num_tiles';
            new_span.innerText = display_str[i];
            display_div.appendChild(new_span);
        }
    },1000);
}
</script>

JSFIDDLE：https://jsfiddle.net/v3jncqac/32/

您的 onload 函数找不到该函数，因为您的 js 在不同的文件中。您需要在 html 之上添加脚本 src 或如上所示。

【讨论】：