【问题标题】:Displaying Calculations On different html pages, from a javascript在不同的 html 页面上显示计算,来自 javascript
【发布时间】:2016-12-09 20:23:39
【问题描述】:

我在这方面完全是个菜鸟,只是学习 HTML 和 JavaScript。我正在一步一步地绘制一个圣脉轮,你必须为每一步进行计算,我希望他们用户只需输入一个数字,然后所有的公式都会出现,就像答案一样。计算很简单,例如 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>

【问题讨论】:

  • 如果您“只是在学习 html 和 javascript”,为什么还要标记 java
  • 请不要使用不相关的标签,例如“Java”。只需标记“javascript”,您就会获得大量支持。
  • 我相信原因是,我引用,"I'm a total noob at this"
  • @zero01alpha - 大声笑
  • 是的,我的第一篇文章哈哈

标签: javascript html variables calculation


【解决方案1】:

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

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

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

【讨论】:

  • 22 是做什么的?
  • 我想我理解它,基本上我实际上并没有为此使用Javascript,它都是html5。
  • 但是如何让存储的值显示出来?
  • @KopiThiyagalingam calculator.js 是 javascript,所以你使用它。 22 只是一个被存储的随机值,在它的位置你使用你的值。在页面页面上存储一个值后,您可以将其带回另一个页面,这是执行您要求的最简单的方法
  • 所以我正在尝试这个,但它没有在 html 中显示数字
猜你喜欢
  • 2017-12-25
  • 2014-02-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-02
  • 2019-09-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多