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

Question

任何人都可以帮助我使这个 (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);
}

Answer 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 或如上所示。

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

Counter Using Javascript, HTML & CSS Not Working

javascript

css

jquery

counter

countdowntimer