uucky/curve.html

## curve.html
<!DOCTYPE html>
<html>
<head>
  <title>Curve</title>
  <script defer>

var r, c, a = 0;

//圆心角a
//弦长l 拱高h - 半径r 弧长c
  function calcR1(h, l) {
    r = h / 2 + l * l / ( 8 * h);
    return r;
  }

  function calcC1(l){
    console.log("a start = " + a);
    console.log("l start = " + l);
    console.log("r start = " + r);

    a = 2 * (Math.asin( l / (2 * r)));
    console.log("a = " + a);

    c = r * a;
    return c;
  }

  function calc1(){
    console.log("click1")
    const l = document.querySelector("#l").value || 0;
    const h = document.querySelector("#h").value || 0;
    document.querySelector("#calculatedR1").innerHTML = calcR1(h, l).toFixed(3);
    document.querySelector("#calculatedC1").innerHTML = calcC1(l).toFixed(3);
  }

// 弧长c 拱高h - 半径r 弦长l
  function calcR2(h, c) {
    halfC = c / 2;
    r = (halfC * halfC/ h + h)/2;
    return r;
  }

  function calcL2(h, c) {
    a = 0;
    return l;
  }

  function calc2(){
    console.log("click2")
    const l = document.querySelector("#c").value || 0;
    const h = document.querySelector("#h").value || 0;
    document.querySelector("#calculatedR2").innerHTML = calcR2(h, l).toFixed(3);
    document.querySelector("#calculatedL2").innerHTML = calcC1(l).toFixed(3);
  }

  document.addEventListener("DOMContentLoaded", () => {
    document.querySelector('#calc1').addEventListener('click1', calc1);
    document.querySelector('#calc2').addEventListener('click2', calc2);
  });


  </script>
</head>
<body>


  <fieldset>
    <legend>弦长 拱高 - 半径 弧长</legend>
    <label for="l">弦长</label>
    <input type="number" name="l" id="l"><br />
    <label for="h">拱高</label>
    <input type="number" name="h" id="h"><br />

    <button type="button" name="calc1" id="calc1" onclick="calc1()"> 计算 </button>
    <button type="reset" name="reset" id="reset"> 归零 </button>

    <br />

    半径<span id="calculatedR1"></span><br />
    弧长<span id="calculatedC1"></span>
  </fieldset>

  <fieldset>
    <legend>弧长 拱高 - 半径 弦长</legend>
    <label for="l">弧长</label>
    <input type="number" name="c" id="c"><br />
    <label for="h">拱高</label>
    <input type="number" name="h" id="h"><br />

    <button type="button" name="calc2" id="calc2" onclick="calc2()"> 计算 </button>
    <button type="reset" name="reset" id="reset"> 归零 </button>

    <br />

    半径<span id="calculatedR2"></span><br />
    弦长<span id="calculatedL2"></span>
  </fieldset>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Curve</title>
	<script defer>

	var r, c, a = 0;

	//圆心角a
	//弦长l 拱高h - 半径r 弧长c
	function calcR1(h, l) {
	r = h / 2 + l * l / ( 8 * h);
	return r;
	}

	function calcC1(l){
	console.log("a start = " + a);
	console.log("l start = " + l);
	console.log("r start = " + r);

	a = 2 * (Math.asin( l / (2 * r)));
	console.log("a = " + a);

	c = r * a;
	return c;
	}

	function calc1(){
	console.log("click1")
	const l = document.querySelector("#l").value \|\| 0;
	const h = document.querySelector("#h").value \|\| 0;
	document.querySelector("#calculatedR1").innerHTML = calcR1(h, l).toFixed(3);
	document.querySelector("#calculatedC1").innerHTML = calcC1(l).toFixed(3);
	}

	// 弧长c 拱高h - 半径r 弦长l
	function calcR2(h, c) {
	halfC = c / 2;
	r = (halfC * halfC/ h + h)/2;
	return r;
	}

	function calcL2(h, c) {
	a = 0;
	return l;
	}

	function calc2(){
	console.log("click2")
	const l = document.querySelector("#c").value \|\| 0;
	const h = document.querySelector("#h").value \|\| 0;
	document.querySelector("#calculatedR2").innerHTML = calcR2(h, l).toFixed(3);
	document.querySelector("#calculatedL2").innerHTML = calcC1(l).toFixed(3);
	}

	document.addEventListener("DOMContentLoaded", () => {
	document.querySelector('#calc1').addEventListener('click1', calc1);
	document.querySelector('#calc2').addEventListener('click2', calc2);
	});


	</script>
	</head>
	<body>


	<fieldset>
	<legend>弦长拱高 - 半径弧长</legend>
	<label for="l">弦长</label>
	<input type="number" name="l" id="l"><br />
	<label for="h">拱高</label>
	<input type="number" name="h" id="h"><br />

	<button type="button" name="calc1" id="calc1" onclick="calc1()"> 计算 </button>
	<button type="reset" name="reset" id="reset"> 归零 </button>

	<br />

	半径<span id="calculatedR1"></span><br />
	弧长<span id="calculatedC1"></span>
	</fieldset>

	<fieldset>
	<legend>弧长拱高 - 半径弦长</legend>
	<label for="l">弧长</label>
	<input type="number" name="c" id="c"><br />
	<label for="h">拱高</label>
	<input type="number" name="h" id="h"><br />

	<button type="button" name="calc2" id="calc2" onclick="calc2()"> 计算 </button>
	<button type="reset" name="reset" id="reset"> 归零 </button>

	<br />

	半径<span id="calculatedR2"></span><br />
	弦长<span id="calculatedL2"></span>
	</fieldset>


	</body>
	</html>