个人中心
gpt4 book ai didi

javascript - 简单的复选框绘图程序未加载

转载 作者：行者123 更新时间：2023-11-28 12:34:44 26 4
gpt4 key购买 nike

我正在使用 HTML 和 JavaScript 创建一个复选框绘图程序。它基本上(在这个早期阶段)涉及绘制一个 100 x 100 方形的复选框。问题是，每次我尝试加载页面时，它都无法加载。它只是永远显示旋转的半圆(我使用的是 Chrome )。你能告诉我我做错了什么吗？这是我的代码:

<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript">

function drawBoxes()
{
    for(var i = 0;i<100;i++)
    {
        for(var j = 0;j<100;j++)
        {
            document.getElementById('drawarea').innerHTML += "<input type = 'checkbox'>";
        }
        document.getElementById('drawarea').innerHTML += "<br />";
    }
}

</script>
<title>Checkbox drawer</title>
</head>
<body onload = "drawBoxes()">
<div id = "controlbar" style = "height:100px;float:top;background-color:#FF0000;"><p>hello</p></div>
<p id ="drawarea"></p>
</body>
</html>

更新:添加 jcubic 的 <input> 捕获后标签，第一个<div> (红色)加载，但复选框不加载。

最佳答案

无需操作 DOM 100*100 次，只需构建一个字符串并在循环结束时设置一次值即可:

var html = "";

for(var i = 0;i<100;i++)
{
   for(var j = 0;j<5;j++)
   {
       html += "<input type = 'checkbox'>";
   }
   html += "<br />";
}

document.getElementById('drawarea').innerHTML = html;

这是 JSFiddle，可以看到加载速度非常快:http://jsfiddle.net/8hVBQ/

关于javascript - 简单的复选框绘图程序未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18389789/

26 4 0
文章推荐： javascript - 我一直在使用 jQuery 来解析 XML，但它不保持大写。我缺少一面旗帜吗？
文章推荐： html - 如何更改 Foundation Zurb 背景？
文章推荐： css - 检查 Firebug 变化
文章推荐： jquery - 带有鼠标悬停动画的重复 jQuery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com