s8_chu score 12658
2017/07/09 23:16 投稿
| 的外れかもしれませんが、以下のようにしてはいかがでしょうか？ |
| ```HTML |
| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset="UTF-8"> |
| <script src="js/analogClock.js"></script> |
| <script src="js/myscript.js"></script> |
| <link rel="stylesheet" href="css/mystyle.css"> |
| <title>情報</title><!-- tatileではなく、title --> |
| <style type="text/css"> |
| html { |
| margin: 0; |
| padding: 0; |
| height: 100%; |
| min-height: 100%; |
| } |
| body { |
| margin: 0; |
| padding: 0; |
| height: 100%; |
| min-height: 100%; |
| background-color: gray; |
| text-align: center; |
| line-height: 175%; |
| } |
| #container { /* id名にはシャープ(#)が必要 */ |
| margin: 0px auto; |
| padding: 0; |
| position: relative; |
| width: 980px; |
| text-align: left; |
| } |
| header { |
| margin: 0; |
| padding: 0; |
| position: relative; |
| width: 100%; |
| height: 60px; |
| text-align: center; |
| } |
| main { |
| margin: 0; |
| padding: 0 20px 20px 20px; |
| position: relative; |
| float: right; |
| width: 600px; |
| } |
| nav { |
| margin: 0; |
| padding: 10px 10px; |
| position: relative; |
| float: left; |
| width: 280px; |
| height: auto; |
| } |
| footer { |
| margin: 0; |
| padding: 10px 10px; |
| position: relative; |
| clear: both; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="container"> |
| <header> |
| 人口置換水準 |
| </header> |
| <main> |
| <iframe id="iframeVideo" title="Youtube video player" width="640" height="510" |
| src="https://www.youtube.com/embed/D0mQAzuE7mM" |
| frameborder="0" allowfullscreen> |
| </iframe><!--元の動画--> |
| 人口が増減しない均衡した状態となる水準を人口置換水準または合計特殊出生率という。 |
| 若年期の死亡率が低下すると人口が減りにくくなるので、この水準値は減少する。 |
| 2015年の日本の人口置換水準は2.07である。一人の女性が産む子供の数の平均が2.07人であるということである。 |
| </main> |
| a |
| <nav> |
| <canvas id="tokei" width="250" height="250"></canvas> |
| <button class="videoButton" onclick="playTheVideo('D0mQAzuE7mM')">置換水準 |
| </button> |
| <button class="videoButton" onclick="playTheVideo('X4wSs4lJoMc')">平均寿命 |
| </button> |
| <button class="videoButton" onclick="playTheVideo('PEI7CP747Bw')">平均年齢 |
| </button> |
| </nav> |
| <footer> |
| </footer> |
| </div> |
| <script> |
| var clockInterval; |
| function drawClock() { |
| var r = 100; |
| var x0 = r + 25; |
| var y0 = r + 25; |
| var rs = r * 0.9;//秒針の長さ |
| var rm = r * 0.6;//短針の長さ |
| var rh = r * 0.4;//短針の長さ |
| var ctx = document.getElementById("tokei").getContext("2d"); |
| var now = new Date(); |
| var h = now.getHours(); |
| var m = now.getMinutes(); |
| var s = now.getSeconds(); |
| ctx.beginPath(); |
| ctx.arc(x0, y0, r, 0, Math.PI * 2, true); |
| ctx.fillStyle = "#000"; |
| ctx.fill(); |
| ctx.beginPath(); |
| ctx.moveTo(x0, y0); |
| var s_theta = s * Math.PI / 30.0; |
| var sx = x0 + rs * Math.sin(s_theta); |
| var sy = y0 - rs * Math.cos(s_theta); |
| ctx.lineTo(sx, sy); |
| ctx.strokeStyle = "#f00"; |
| ctx.lineWidth = 3;//linewidthではなくlineWidth |
| ctx.stroke(); |
| ctx.beginPath(); |
| ctx.moveTo(x0, y0); |
| var m_theta = m * Math.PI / 30.0; |
| var mx = x0 + rm * Math.sin(m_theta + (s_theta / 60)); |
| var my = y0 - rm * Math.cos(m_theta + s_theta / 60); |
| ctx.lineTo(mx, my); |
| ctx.strokeStyle = "#f00"; |
| ctx.lineWidth = 6;//linewidthではなくlineWidth |
| ctx.stroke(); |
| ctx.beginPath(); |
| ctx.moveTo(x0, y0); |
| var h_theta = h * Math.PI / 30.0; |
| var hx = x0 + rh * Math.sin(h_theta); |
| var hy = y0 - rh * Math.cos(h_theta); |
| ctx.lineTo(hx, hy); |
| ctx.strokeStyle = "#f00"; |
| ctx.lineWidth = 9;//linewidthではなくlineWidth |
| ctx.stroke(); |
| for (var i = 0; i < 60; i = i + 5) { |
| ctx.beginPath(); |
| ctx.lineWidth = 3; |
| ctx.strokeStyle = "#ffffff"; |
| ctx.moveTo(Math.floor(document.getElementById("tokei").width / 2) + Math.sin(Math.PI * i / 30) * Math.min(Math.floor(document.getElementById("tokei").width / 2), Math.floor(document.getElementById("tokei").height / 2)) * 0.8, Math.floor(document.getElementById("tokei").height / 2) - Math.cos(Math.PI * i / 30) * Math.min(Math.floor(document.getElementById("tokei").width / 2), Math.floor(document.getElementById("tokei").height / 2)) * 0.8); |
| ctx.lineTo(Math.floor(document.getElementById("tokei").width / 2) + Math.sin(Math.PI * i / 30) * Math.min(Math.floor(document.getElementById("tokei").width / 2), Math.floor(document.getElementById("tokei").height / 2)) * 0.7, Math.floor(document.getElementById("tokei").height / 2) - Math.cos(Math.PI * i / 30) * Math.min(Math.floor(document.getElementById("tokei").width / 2), Math.floor(document.getElementById("tokei").height / 2)) * 0.7); |
| ctx.stroke(); |
| } |
| } |
| function start() { |
| clearInterval(clockInterval); |
| clockInterval = setInterval(drawClock, 1000); |
| } |
| window.onload = start; |
| </script> |
| </body> |
| </html> |
| ``` |
