如何计算div并将总计附加到相应段落内的文本中？
计算div并将总计附加到相应段落内的文本中，可以通过以下步骤实现：
- 首先，使用前端开发技术（如HTML、CSS和JavaScript）创建一个包含多个段落的网页。每个段落都应该有一个带有数字的div元素，用于计算总计并显示结果。
- 在JavaScript中，使用DOM操作获取所有的段落元素，并遍历它们。
- 对于每个段落，使用JavaScript计算该段落内所有div元素的总和。可以通过遍历段落内的div元素，并将它们的值相加来实现。
- 将计算得到的总和附加到相应段落的文本中。可以通过创建一个新的文本节点，并将其插入到段落元素的末尾来实现。
以下是一个示例代码，演示如何计算div并将总计附加到相应段落内的文本中：
<!DOCTYPE html>
<html>
<head>
<title>计算div总计</title>
<script>
window.onload = function() {
// 获取所有段落元素
var paragraphs = document.getElementsByTagName('p');
// 遍历每个段落
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs[i];
var divs = paragraph.getElementsByTagName('div');
var total = 0;
// 计算div总和
for (var j = 0; j < divs.length; j++) {
total += parseInt(divs[j].innerText);
}
// 创建新的文本节点，包含总计信息
var totalText = document.createTextNode('总计：' + total);
// 将总计信息插入到段落末尾
paragraph.appendChild(totalText);
}
};
</script>
</head>
<body>
<p>
<div>10</div>
<div>20</div>
<div>30</div>
</p>
<p>
<div>5</div>
<div>15</div>
<div>25</div>
</p>
</body>
</html>上述示例代码中，我们使用JavaScript获取所有的段落元素，并遍历每个段落。对于每个段落，我们获取其内部的div元素，并计算它们的总和。然后，我们创建一个新的文本节点，包含总计信息，并将其插入到段落的末尾。
这样，每个段落的文本末尾都会显示计算得到的总计信息。
相关·内容
假设我有5个.1995类的div，3个.1996类的div和9个.1997类的div……假设我还有以下三个段落： <p>1995</p>、<p>1996</p>和<p>1997<p>。我想计算div(例如，使用1995类)，并将结果(在括号中)附加到段落中
浏览 3提问于2019-03-28得票数 2
回答已采纳
我有一个通过websockets显示比特币交易的程序，其数量也使用JSON。$('#messages').prepend("<p>" + calAmount + "</p>");
由于它继续生成新的段落元素，我如何将其添加到javascript或html中。我正朝着一个“<e
浏览 2提问于2016-06-04得票数 0
回答已采纳
3回答
我已经使用Wordpress创建了一个博客，并尝试在每个帖子中添加图片。不过，这些图像似乎不能“内联”工作。我尝试添加内联样式(使用Chrome开发工具)，但似乎无法使段落换行。
浏览 2提问于2013-01-24得票数 1
回答已采纳
1回答
我正在从json文件中添加段落。我如何计算它们(我尝试了使用.length)，如果少于10，我需要创建默认的，并将它们添加到页面上？例如，用户可以添加一些自定义文本的段落，如果他添加了3段，默认情况下我还想再添加7段。所以所有的时间10都出现在页面上。这是我的结构，目前它显示了4段，因为我在json文件中只有4段：
<div class="row&
浏览 0提问于2016-03-23得票数 0
回答已采纳
1回答
我试图在简历中插入空格，但这是行不通的。每件事都在一个接一个地运行。见: www.barbarahaveman.net自传。谢谢你的帮助，芭芭拉
浏览 0提问于2018-01-21得票数 0
2回答
我读了之前的帖子，并从一个绝对的位置改变了我的CSS，以便让文本环绕。然而，目前文本正在迫使div向下。<div id="top-image"> </div>
<p>dummy text dum
浏览 2提问于2013-04-15得票数 0
回答已采纳
2回答
“内部分词”按钮
、、、、
<div class="col-md-3 bg-primary p-1 align-content-center text-center mb-5"> @foreach (var item in Model.Data) <div> <&#
浏览 23提问于2021-04-01得票数 2
回答已采纳
2回答
我使用Word Interop来计算表中的行数。文本中出现的新行字符数为3。但是，由于第二文本的长度，它被扩展为第二行，导致4行。计算新行字符数的下列代码返回3。Word提供的单词计数工具提供了正确的<
浏览 3提问于2021-12-20得票数 0
回答已采纳
2回答
对于那些没有与Google Docs编辑器合作的人，下面简单地解释一下它是如何工作的：
谷歌文档没有可见的可编辑文本区域，或者elements.Google文档在单独的iFrame中监听按键/按压/向上，它们将OS光标放置在事件listening.When中，iFrame通过在可见文档上执行相应的操作来捕获事件。Google中的“插入符号”是一个DIV，其样式和
浏览 4提问于2012-04-10得票数 2
回答已采纳
1回答
发送的值不会显示在DOM上。 这是我的笔：https://codepen.io/unco0k3d/pen/rNedoRW </>
浏览 20提问于2020-09-11得票数 0
回答已采纳
2回答
我已经创建了一个表单，用于在我的博客帖子上输入评论，但是当评论显示在网页上时，我添加到div的背景色要么太大，要么太小。我提供了下面的代码。如有任何帮助，我们不胜感激！<h2 id="comments-title">Comments</h2> <?= mysql_fetch_array($result)) {
$timestamp = date(&q
浏览 3提问于2010-08-12得票数 0
回答已采纳
我有一小块代码<div class="select"></div>
<p class="active">text</p>JS i
浏览 5提问于2022-05-28得票数 -2
1回答
我有一个计算器，它将一个输入值增加15 %，是这个值的三倍，最后增加7.25 %。然后将该值附加到新的div中。我需要的最后一步是将提交的输入值加起来，并将其显示在“总价格”div上。看空白色的div，在Total?..at下面的最下面..。那么，我想相应地添加提交的价格，并在这个div中显示一个总价格。
HT
浏览 4提问于2015-08-08得票数 0
2回答
我使用totalPrice函数来完成这个任务，但是每当调用它时，控制台就会弹出：我认为，它无法通过id找到创建的元素。谢谢你的帮助。
浏览 4提问于2014-07-14得票数 0
回答已采纳
除了日期差异之外，我还想计算这些日期之间的时间差，并将其放入另一个只包含时间的字段total中。
我还想在添加了一个新项之后更新total字段，并且经常以hh:mm格式向用户显示total。如何在total字段中添加或减去时间？
浏览 3提问于2014-09-27得票数 0
1回答
我正在试着写一个简单的脚本。我有一个div元素，并在div中动态创建了段落元素。段落元素包含一些文本。我在页面上也有一个链接。我希望在单击链接时将文本更改为其他文本(预定义)。我有两个函数:一个函数用于创建段落元素并将其附加到div。第二个功能是更改文本。我认为这个问题与将变量从一个函数传递到另一个函数有关
下
浏览 0提问于2012-05-10得票数 0
我有一个为了好玩而创建的React应用程序，它将有一系列我用故事创建的地图。我想知道在react中处理包含大量文本的页面的最好方法。目前，我只是创建一个新的foo.js并手动添加文本。所以我添加了Div，标题和段落。 文本页面的长度是3-5页，我通常在word中创建它们，然后剪切并粘贴到visual studio代码中，然后手动添加所有的CSS装饰器。 我一定是做错了。我在想，如果
浏览 24提问于2021-07-05得票数 1
回答已采纳
1回答
使用下面的代码，游标将移动到它自己的一行:如果* wrap.That只允许游标接触边缘，那么看起来很好。但是，当文本中的另一个词因为溢出换行而出现在新行上时，游标会转到自己的行吗？我将如何解决这个问题，以便光标尽可能地与单词保持在一起？sans-serif; margin-top: 5px; height: 1.9rem;}
<divclass=&
浏览 2提问于2022-11-27得票数 0
回答已采纳
1回答
我有一个外部PHP脚本，它输出在过去5秒内添加到数据库中的任何新数据。我使用ajax和jQuery将数据从PHP加载到div中，每5秒一次。我的jQuery代码：$("#last_message").load("ajaxlastmessage.php");}
如果有输出的数据，如
浏览 1提问于2015-09-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
