在不同的 html 页面上显示计算，来自 javascript

Question

我完全是个菜鸟，只是在学习 HTML 和 JavaScript。我正在逐步绘制 Sri Chakra，每一步都必须进行计算，我希望他们的用户只需输入一个数字，之后所有公式都会出现，如答案所示。计算很简单，例如 x/4=a, x/5=b, x/8=c, x*1.15=d 然后在不同的页面上，当他们到达该步骤时，我希望显示 a 或 b 或 c 或 d。当他们第一次计算时，我希望数字出现在表格中作为答案。这就是我一页的内容。我的 JS 是 calculator.js

function calculate(){
var mainradius=prompt ("What is the radius of the Main Circle?","");
var a=mainradius/4;
localStorage.setItem("fourth","a");
document.write(fourth + "<br />");
var b=mainradius/5;
var b= localStorage.setItem ("1/5","b");
var c=mainradius/8;
var c= localStorage.setItem ("1/8","c");
var d=mainradius*1.15;
var e=mainradius*1.25;
var f=mainradius*1.3;
var g=mainradius*1.35;
var h=mainradius*1.4;
var i=mainradius*1.45;
var j=mainradius*1.5;
}

the page that runs the calculator page 2 is
<html>
<head>
<title> Material and Calculator</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<script type="text/javascript" src="calculator.js">
</script>
<input type="number" onclick="calculate()" value="0">
<h1> Material and Calculator </h1>
<h3> Input the length of the Main Radius <br/>

<h3><form oninput="x.value=parseInt(mainradius.value)/4, y.value=parseInt(mainradius.value)/5, z.value=parseInt(mainradius.value)/8
, g.value=parseInt(mainradius.value)*1.15, h.value=parseInt(mainradius.value)*1.25, i.value=parseInt(mainradius.value)*1.3, j.value=parseInt(mainradius.value)*1.35, 
k.value=parseInt(mainradius.value)*1.4,l.value=parseInt(mainradius.value)*1.45, m.value=parseInt(mainradius.value)*1.5">
  <input type="number" id="mainradius" value="0">
  =<output name="x" for="mainradius"></output> ( 1/4th ) <br>
  =<output name="y" for="mainradius"></output> ( 1/5th ) <br>
  =<output name="z" for="mainradius"></output> ( 1/8th ) <br>
  =<output name="g" for="mainradius"></output> ( *1.15 ) <br>
  =<output name="h" for="mainradius"></output> ( *1.25 ) <br>
  =<output name="i" for="mainradius"></output> ( *1.3 )  <br>
  =<output name="j" for="mainradius"></output> ( *1.35 ) <br>
  =<output name="k" for="mainradius"></output> ( *1.4 )  <br>
  =<output name="l" for="mainradius"></output> ( *1.45 ) <br>
  =<output name="m" for="mainradius"></output> ( *1.5 )  <br>
  </form>
<p> Reccomended using 4 or 5 </p>
</fieldset>
</form></h3>
<h1><a href="index.html"> Back </a>
<a href="3.html"> Next </a></h1>
</body>
</html>

and the page I want like the one fourth to come up in is page 5
<html>
<head>
<title> Step 3 a.</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1> Step 3a </h1>
<h2> Now Mark your line with 9 Marks, Labeled A-I </h2>
<h2> You will split the top half of the radius into 4 Sections </h2>
<h3> Label the Top of the Line A </h3>
<h3> 1/4th the radius from A Label B </h3>
<script type="text/javascript" src="calculator.js">
var fourth =parseInt(localStorage.getItem("fourth"));
document.write(fourth + "<br />");
</script>
<output type="number" value="fourth"> is 1/4th the radius </output>

<h3> 1/4th the radius from B Label C </h3>
<h3> 1/5th the radius from C Label D </h3>
<h2><img class="pic3" src="../gifs/4Marks.png" /> </h2>
<h2><img class="pic2" src="../gifs/3.gif"/> </h2>
<h1><a href="4.html"> Back </a>
<a href="6.html"> Next </a></h1>
</body>
</html>

Answer 1

最简单也可能是最有效的方法是将计算值存储在 local storage 中，然后在需要时读回它们。

// write
localStorage.setItem("valueA", "22");

// read
var valA = parseInt(localStorage.getItem("valueA"));

在不同的 html 页面上显示计算，来自 javascript

Displaying Calculations On different html pages, from a javascript

html

javascript

variables

calculation