使用Javascript,HTML和CSS的计数器无法正常工作

布赖恩·哈里斯

谁能帮助我获得此(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);
}
艾哈迈德·乌尔德(Ahmed Ulde)
    <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或如上所述进行操作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

我的JavaScript计数器无法正常工作

来自分类Dev

TinyMCE的计数器无法正常工作

来自分类Dev

递减计数器无法正常工作

来自分类Dev

似乎无法使此计数器正常工作

来自分类Dev

JavaScript Rock Paper Scissors游戏的游戏计数器无法正常工作

来自分类Dev

使用CSS计数器

来自分类Dev

在计算中使用CSS计数器

来自分类Java

Java线程安全计数器无法按预期工作

来自分类Dev

定位在html和CSS中无法正常工作

来自分类Dev

香草javascript和CSS图像滑块无法正常工作

来自分类Dev

如何使用Redux增加简单计数器和带有对象组件的计数器

来自分类Dev

使用CSS计数器,如何创建可以设置计数器初始值的类?

来自分类Dev

计数器不断在HTML / CSS中重置

来自分类Dev

初学者Javascript数组和计数器

来自分类Dev

循环和if语句计数器变量作用域的Javascript

来自分类Dev

相当于CSS计数器的jQuery / Javascript?

来自分类Dev

javascript递归计数器

来自分类Dev

Clojure:替代使用互斥锁/锁定和计数器

来自分类Dev

使用TF Dataset和Eager创建状态计数器

来自分类Dev

使用CSS关键帧创建计数器

来自分类Javascript

使用JavaScript将HTML表格数据导出到Excel / jQuery在Chrome浏览器中无法正常工作

来自分类Dev

HTML colspan和rowpan无法正常工作

来自分类Javascript

在JavaScript中使用for…of语法获取循环计数器/索引

来自分类Dev

使用JavaScript的实时点击计数器?

来自分类Dev

Javascript提取和映射无法正常工作

来自分类Dev

自定义页面计数器在新会话中无法正常运行

来自分类Dev

如何在不让用户在命令提示符下使用lodctr进行重建的情况下使性能计数器正常工作?

来自分类Dev

JavaScript中的内部HTML无法正常工作

来自分类Dev

使用原子操作的计数器和使用互斥量的计数器之间的Go区别吗?

TOP 榜单

热门标签

归档