回答編集履歴

1 反映されないバグ。いい加減どうにかしてほしい。

s8_chu

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>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る