-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpythagorean-theorem.html
119 lines (104 loc) · 4.83 KB
/
pythagorean-theorem.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<html>
<head lang="en">
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="image/icontestHtml.png">
<title>図形生成アプリ | 三平方の定理</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap" rel="stylesheet">
</head>
<header>
<div class="logo">
<a href="index.html"><img src="image/zukeiapplogo.png" alt=
"図形生成アプリ" width="200">
</a>
</div>
<nav>
<!-- 画像をクリックするとツイッターに飛ぶリンク -->
<!-- <div class="link">
<a id="twitterLink" href="https://x.com/0526ngs" target="_blank">
<img src="image/iconTwitterhrmcngsHtml.png" alt="Twitter Link Image" width="100">
</a>
<a id="twitterLink" href="https://Instagram.com/0526ngs" target="_blank">
<img src="image/iconInstagramhrmcngsHtml.png" alt="Instagram Link Image" width="100">
</a>
<a id="twitterLink" href="https://github.com/hrmcngs" target="_blank">
<img src="image/iconGithubhrmcngsHtml.png" alt="Github Link Image" width="100">
</a>
<a id="twitterLink" href="https://x.com/RenkonUmauma65" target="_blank">
<img src="image/iconTwitterrenkonHtml.png" alt="Twitter Link Image" width="100">
</a>
<a id="twitterLink" href="https://github.com/Renkon65" target="_blank">
<img src="image/iconGithubrenkonHtml.png" alt="github Link Image" width="100">
</a>
</div>-->
<div class="global-nav">
<ul>
<li><a class="button" href="rotation.html">回転</a></li>
<li><a class="button" href="pythagorean-theorem.html">三平方の定理</a></li>
<li><a class="button" href="canvas-arc.html">円弧</a></li>
<li><a class="button" href="3dgraphics.html">3D図形</a></li>
</ul>
</div>
</div>
</nav>
</header>
<body id="py-th">
<div class="py-th_main">
<table>
</table>
<h1>三角関数</h1>
<h2>三角の対辺、隣辺を入力ください</h2>
<p>A:<input type="number" id="a" min="1"></p>
<p>B:<input type="number" id="b" min="1"></p>
<button onclick="update()">このボタンを押すと斜辺がでます！</button>
<p>A<sup>2</sup> = <span id="aSqu"></span>
<p>B<sup>2</sup> = <span id="bSqu"></span>
<p>A<sup>2</sup> + B<sup>2</sup> = <span id="aAndB"></span>
<p>斜辺 = <span id="sqrtC"></span>
<div id="triangle"></div>
<!-- <img src="http://www.bsharpentertainment.co.za/theatre/wp-content/uploads/The-Minions.png" width=50%> -->
<script>
const aInput = document.getElementById('a');
const bInput = document.getElementById('b');
function update(){
var sideA = document.getElementById("a").value;
var sideB = document.getElementById("b").value;
if(sideA<1 || sideB<1){
alert("数値を入力してください！");
}else{
//get a squared and b squared
document.getElementById("aSqu").innerHTML = sideA * sideA;
document.getElementById("bSqu").innerHTML = sideB * sideB;
//find sum of a squared and b squared
document.getElementById("aAndB").innerHTML = (sideA * sideA) + (sideB * sideB);
//find hypotenuse
document.getElementById("sqrtC").innerHTML = Math.round((Math.sqrt((sideA * sideA) + (sideB * sideB)) * 100)) / 100;
//The div that makes the triangle
var tri= document.getElementById("triangle");
tri.style.borderTopWidth = sideA * 30 + "px";
tri.style.borderLeftWidth = sideB * 30 + "px";
//Chooses random values for red green blue
var randoR = Math.floor(Math.random() * 255);
var randoG = Math.floor(Math.random() * 255);
var randoB = Math.floor(Math.random() * 255);
//Changes to random background color
tri.style.borderLeftColor = "rgb(" + randoR + "," + randoG + "," +randoB+ ")";}
}
aInput.addEventListener('a', update);
bInput.addEventListener('b', update);
</script>
</div>
<div class="omake">
<h2>おまけ</h2>
<ul>
<li><a class="button" href="miencraft-blasting-smoking-campfire-cooking-recipe.html">blasting-smoking-campfire-cooking</a></li>
<li><a class="button" href="miencraft-crafting-recipe.html">minecraft-crafting-recipe</a></li>
<li><a class="button" href="miencraft-smelting-recipe.html">minecraft-smelting-recipe</a></li>
</ul>
</div>
<footer><small>2024年9月4日現在最新版</small></footer>
</body>
</html>