离线 Javascript Ran 自动更新计算器和电子表格
Posted
技术标签:
【中文标题】离线 Javascript Ran 自动更新计算器和电子表格【英文标题】：Offline Javascript Ran Autoupdating Calculator and Spreadsheet 【发布时间】：2016-04-27 05:37:45 【问题描述】：说明：
我需要制作一个电子表格类型的计算器来跟踪来自在线游戏 (ArcheAge) 的信息。此“电子表格”必须保存信息并以 5 分钟为增量自动更新一组值（最好将其作为文件保存到他们的计算机。这是我正在开发的离线应用程序）。
详情：
我被要求协助设置 OpenOffice 电子表格以跟踪和保存信息。大多数数据是手动输入并保存在他们已经制作的电子表格中的，但是他在让一个字段以 5 分钟为增量自动更新时遇到了问题。
我查看了他的内容并尝试设置一个简单的（劳动力 = 劳动力 + 10 [每 5 分钟]）类型的公式，但由于电子表格无法使用循环引用，因此无法自动将该字段- 每 5 分钟更新一次。
电子表格有 9 列数据和 24 行组。这些列是 (id)(charName)(labor)(freeLabor)(vocation)(tokens)(timeOnline)(realTime)(subscription)，另外他添加了一个单元格来保存日期和另一个保存时间（都来自系统时钟 - Date() 和 Now())。
每行是 1 个字符的信息（可以视为数据库表）。
他希望每个角色的（劳动力）值每 5 分钟自动更新一次，值为 New 劳动力（劳动力 = 劳动力 + 10），但这是循环引用，电子表格不能执行此功能（据我所知，至少没有第三方程序或插件）。
所以，我查看了它并试图找到解决方法。在网上查找了很多帖子，几乎找到了解决方案，但是没有一个对我们需要做的事情有所帮助。因此，我提议为他设置一个 .html 文档以供他离线使用，并将其编码为像电子表格一样工作。代码如下。
需求： 已编辑：参考下面的更改 3。
我需要尝试找到一种方法将此表单数据保存到主机 PC 上的文件中（离线），这样用户就不必在每次运行表单时手动重新输入所有数据.
注意 - 此部分在此行下方已更改。
我需要一个非 php（javascript 和 html，或其他方法）解决方案来为每个字符集增加劳动力单元的值，使其每 5 分钟增加 10 个点。他希望在不破坏代码的情况下修改单元格数据（例如 getData，运行代码以递增，并将新值重写到单元格）。我还想尝试将代码保存到文件中，这样他就不必每次运行文档时都重新输入值。
该解决方案应在使用 html 和 javascript 时显示表格、电子表格或数据库等数据。如果您有其他解决方法，请随时添加您对如何创建此数据表的想法。
编辑 1：我想我应该提到 (Labor) 的值不应超过 5,000 且不能低于 0。- 2016 年 4 月 27 日 01:43 添加
编辑 2：在“需要”块中添加了对所需内容的更好识别。 - 添加于 2016 年 4 月 27 日 01:51
编辑 3：修改了劳动计算的第一个 Javascript 代码。它现在是一个嵌套在 for 循环中的 if 语句，并且现在可以完美运行。现在我需要的只是一种将表单数据保存到文档中的方法，或者是一个单独的文档供程序调用（如果可能的话）。更新了需求部分。 - 2016 年 4 月 27 日 05:52
代码如下：
HTML
<section>
<!-- Used to create time stamp at top of page. -->
<p id="time"></p>
<!-- Name of page. -->
<header style="text-align: center;">ArcheAge Test Calculator</header>
<br />
<!-- The Form shown on the page. -->
<form id-form1" name="testcalc">
<!-- Nested Table in Form.-->
<table>
<tr>
<th>Character Name</th>
<th>Labor</th>
<th>Free Labor</th>
<th>Vocation</th>
<th>Tokens</th>
<th>Time/Online</th>
<th>Subscription</th>
</tr>
<tr>
<td><input type="text" id="name1" value="Solareclipse" name="charname"/></td>
<td><input type="text" id="labor1" value="" name="labor"/></th>
<td><input type="text" id="free1" value="Test data" name="freelabor"/></td>
<td><input type="text" id="vocation1" value="Test data" name="voc"/></td>
<td><input type="text" id="tokens1" value="Test data" name="token"/></td>
<td><input type="text" id="online1" value="Test data" name="online"/></td>
<td><input type="text" id="sub1" value="Test data" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name2" value="Farmergirl" name="charname"/></td>
<td><input type="text" id="labor2"/></td>
<td><input type="text" id="free2" value="" name="freelabor"/></td>
<td><input type="text" id="vocation2" value="" name="voc"/></td>
<td><input type="text" id="tokens2" value="" name="token"/></td>
<td><input type="text" id="online2" value="" name="online"/></td>
<td><input type="text" id="sub2" value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name3" value="Peacemaker" name="charname"/></td>
<td><input type="text" id="labor3"/></td>
<td><input type="text" id="free3" value="" name="freelabor"/></td>
<td><input type="text" id="vocation3" value="" name="voc"/></td>
<td><input type="text" id="tokens3" value="" name="token"/></td>
<td><input type="text" id="online3" value="" name="online"/></td>
<td><input type="text" id="sub3" value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name4" value="Irene" name="charname"/></td>
<td><input type="text" id="labor4"/></td>
<td><input type="text" id="free4" value="" name="freelabor"/></td>
<td><input type="text" id="vocation4" value="" name="voc"/></td>
<td><input type="text" id="tokens4" value="" name="token"/></td>
<td><input type="text" id="online4" value="" name="online"/></td>
<td><input type="text" id="sub4" value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name5" value="Admiral" name="charname"/></td>
<td><input type="text" id="labor5"/></td>
<td><input type="text" id="free5" value="" name="freelabor"/></td>
<td><input type="text" id="vocation5" value="" name="voc"/></td>
<td><input type="text" id="tokens5" value="" name="token"/></td>
<td><input type="text" id="online5" value="" name="online"/></td>
<td><input type="text" id="sub5" value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name6" value="Huffer" name="charname"/></td>
<td><input type="text" id="labor6"/></td>
<td><input type="text" id="free6" value="" name="freelabor"/></td>
<td><input type="text" id="vocation6" value="" name="voc"/></td>
<td><input type="text" id="tokens6" value="" name="token"/></td>
<td><input type="text" id="online6" value="" name="online"/></td>
<td><input type="text" id="sub6" value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name7" value="Sisco" name="charname"/></td>
<td><input type="text" id="labor7"/></td>
<td><input type="text" id="free7" value="" name="freelabor"/></td>
<td><input type="text" id="vocation7" value="" name="voc"/></td>
<td><input type="text" id="tokens7" value="" name="token"/></td>
<td><input type="text" id="online7" value="" name="online"/></td>
<td><input type="text" id="sub7" value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name8" value="Martha" name="charname"/></td>
<td><input type="text" id="labor8"/></td>
<td><input type="text" id="free8" value="" name="freelabor"/></td>
<td><input type="text" id="vocation8" value="" name="voc"/></td>
<td><input type="text" id="tokens8" value="" name="token"/></td>
<td><input type="text" id="online8" value="" name="online"/></td>
<td><input type="text" id="sub8" value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name9" value="Octavia" name="charname"/></td>
<td><input type="text" id="labor9"/></td>
<td><input type="text" id="free9" value="" name="freelabor"/></td>
<td><input type="text" id="vocation9"value="" name="voc"/></td>
<td><input type="text" id="tokens9"value="" name="token"/></td>
<td><input type="text" id="online9"value="" name="online"/></td>
<td><input type="text" id="sub9"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name10" value="Samantha" name="charname"/></td>
<td><input type="text" id="labor10"/></td>
<td><input type="text" id="free10"value="" name="freelabor"/></td>
<td><input type="text" id="vocation10"value="" name="voc"/></td>
<td><input type="text" id="tokens10"value="" name="token"/></td>
<td><input type="text" id="online10"value="" name="online"/></td>
<td><input type="text" id="sub10"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name11" value="Joker" name="charname"/></td>
<td><input type="text" id="labor11"/></td>
<td><input type="text" id="free11"value="" name="freelabor"/></td>
<td><input type="text" id="vocation11"value="" name="voc"/></td>
<td><input type="text" id="tokens11"value="" name="token"/></td>
<td><input type="text" id="online11"value="" name="online"/></td>
<td><input type="text" id="sub11"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name12" value="GoodKush" name="charname"/></td>
<td><input type="text" id="labor12"/></td>
<td><input type="text" id="free12"value="" name="freelabor"/></td>
<td><input type="text" id="vocation12"value="" name="voc"/></td>
<td><input type="text" id="tokens12"value="" name="token"/></td>
<td><input type="text" id="online12"value="" name="online"/></td>
<td><input type="text" id="sub12"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name13" value="Minerguy" name="charname"/></td>
<td><input type="text" id="labor13"/></td>
<td><input type="text" id="free13"value="" name="freelabor"/></td>
<td><input type="text" id="vocation13"value="" name="voc"/></td>
<td><input type="text" id="tokens13"value="" name="token"/></td>
<td><input type="text" id="online13"value="" name="online"/></td>
<td><input type="text" id="sub13"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name14" value="Lunareclipse" name="charname"/></td>
<td><input type="text" id="labor14"/></td>
<td><input type="text" id="free14"value="" name="freelabor"/></td>
<td><input type="text" id="vocation14"value="" name="voc"/></td>
<td><input type="text" id="tokens14"value="" name="token"/></td>
<td><input type="text" id="online14"value="" name="online"/></td>
<td><input type="text" id="sub14"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name15" value="Peacemaker" name="charname"/></td>
<td><input type="text" id="labor15"/></td>
<td><input type="text" id="free15"value="" name="freelabor"/></td>
<td><input type="text" id="vocation15"value="" name="voc"/></td>
<td><input type="text" id="tokens15"value="" name="token"/></td>
<td><input type="text" id="online15"value="" name="online"/></td>
<td><input type="text" id="sub15"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name16" value="Minergirl" name="charname"/></td>
<td><input type="text" id="labor16"/></td>
<td><input type="text" id="free16"value="" name="freelabor"/></td>
<td><input type="text" id="vocation16"value="" name="voc"/></td>
<td><input type="text" id="tokens16"value="" name="token"/></td>
<td><input type="text" id="online16"value="" name="online"/></td>
<td><input type="text" id="sub16"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name17" value="Commander" name="charname"/></td>
<td><input type="text" id="labor17"/></td>
<td><input type="text" id="free17"value="" name="freelabor"/></td>
<td><input type="text" id="vocation17"value="" name="voc"/></td>
<td><input type="text" id="tokens17"value="" name="token"/></td>
<td><input type="text" id="online17"value="" name="online"/></td>
<td><input type="text" id="sub17"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name18" value="Minerguyy" name="charname"/></td>
<td><input type="text" id="labor18"/></td>
<td><input type="text" id="free18"value="" name="freelabor"/></td>
<td><input type="text" id="vocation18"value="" name="voc"/></td>
<td><input type="text" id="tokens18"value="" name="token"/></td>
<td><input type="text" id="online18"value="" name="online"/></td>
<td><input type="text" id="sub18"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name19" value="Odoo" name="charname"/></td>
<td><input type="text" id="labor19"/></td>
<td><input type="text" id="free19"value="" name="freelabor"/></td>
<td><input type="text" id="vocation19"value="" name="voc"/></td>
<td><input type="text" id="tokens19"value="" name="token"/></td>
<td><input type="text" id="online19"value="" name="online"/></td>
<td><input type="text" id="sub19"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name20" value="Pheobe" name="charname"/></td>
<td><input type="text" id="labor20"/></td>
<td><input type="text" id="free20"value="" name="freelabor"/></td>
<td><input type="text" id="vocation20"value="" name="voc"/></td>
<td><input type="text" id="tokens20"value="" name="token"/></td>
<td><input type="text" id="online20"value="" name="online"/></td>
<td><input type="text" id="sub20"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name21" value="Spacewalker" name="charname"/></td>
<td><input type="text" id="labor21"/></td>
<td><input type="text" id="free21"value="" name="freelabor"/></td>
<td><input type="text" id="vocation21"value="" name="voc"/></td>
<td><input type="text" id="tokens21"value="" name="token"/></td>
<td><input type="text" id="online21"value="" name="online"/></td>
<td><input type="text" id="sub21"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name22" value="Drunkflowers" name="charname"/></td>
<td><input type="text" id="labor22"/></td>
<td><input type="text" id="free22"value="" name="freelabor"/></td>
<td><input type="text" id="vocation22"value="" name="voc"/></td>
<td><input type="text" id="tokens22"value="" name="token"/></td>
<td><input type="text" id="online22"value="" name="online"/></td>
<td><input type="text" id="sub22"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name23" value="Joker" name="charname"/></td>
<td><input type="text" id="labor23"/></td>
<td><input type="text" id="free23"value="" name="freelabor"/></td>
<td><input type="text" id="vocation23"value="" name="voc"/></td>
<td><input type="text" id="tokens23"value="" name="token"/></td>
<td><input type="text" id="online23"value="" name="online"/></td>
<td><input type="text" id="sub23"value="" name="sub"/></td>
</tr>
<tr>
<td><input type="text" id="name24" value="Badkush" name="charname"/></td>
<td><input type="text" id="labor24"/></td>
<td><input type="text" id="free24"value="" name="freelabor"/></td>
<td><input type="text" id="vocation24"value="" name="voc"/></td>
<td><input type="text" id="tokens24"value="" name="token"/></td>
<td><input type="text" id="online24"value="" name="online"/></td>
<td><input type="text" id="sub24"value="" name="sub"/></td>
</tr>
</table><!-- End Table -->
</form><!-- End Form -->
JavaScript
<!-- Script to run Labor calculations. -->
<script type="text/javascript">
function increment()
for(var i=1; i<=24; i++)
var id = "labor"+i;
var points = document.getElementById(id).value;
if(points>=4990)
document.getElementById(id).value=5000;
else
document.getElementById(id).value=Number(document.getElementById(id).value)+10;
increment()
</script>
<!-- Script to run Time Stamp at top of page. -->
<script type="text/javascript">
var date = new Date();
var n = date.toDateString();
var time = date.toLocaleTimeString();
document.getElementById('time').innerHTML = n + ' ' + time;
</script>【问题讨论】：
【参考方案1】：你还没有真正说出你的问题是什么，所以我将向你介绍 for 循环的魔力。
不要将同一行写出 24 次，而是写一次！
for(var i=1; i<=24; i++)
var id = "labor" + i;
var n = Number(document.getElementById(id).innerHTML);
n += 10;
document.getElementById(id).innerHTML = n;
解释：
for循环在开头创建了一个变量i，并将其设置为1。对于第一个循环，我们需要文本“labor1”，因此创建另一个变量id，它是“labor”与任何内容的连接我是（现在，1）。
然后做你的document.getElementById("labor1").value 事情，但由于变量 id 已经是“labor1”，我们可以在循环中替换它。 += 10 位只是“将此值加 10”的简写。
for 循环然后检查 i 是否小于 24（确实如此），并且 i++ 位将 i 加 1（所以现在是 2）。然后循环重复相同的代码 23 次，直到 i > 24。
如果你够聪明，你也可以通过编程方式创建页面，因为看起来你的很多元素都在那里重复。
【讨论】：
感谢您输入fruitoftheloins。我在帖子的需求部分添加了更多关于我需要的细节。我将在未来的迭代中考虑循环。 另外，您的循环只是将数字 10 附加到当前值。所以，如果我从 0 开始，它的值就是 10。当它再次循环时，它会变成 1010，然后是 101010，依此类推。以上是关于离线 Javascript Ran 自动更新计算器和电子表格的主要内容，如果未能解决你的问题，请参考以下文章