質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.25%

  • JavaScript

    11791questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6453questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

javascriptで時計を表示したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 282

j-suzuki

score 11

週刊アスキーに掲載されていたJavascriptで時計を表示するのをさいげんしているのですが、うまく表示されません。どこか間違っていると思うのですが、javascriptに触れていないためわかりません。教えていただけると助かります。

```javascript

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>アナログ時計</title>

<script>

var canvas, context;

var x0 = 300, y0 = 300;

var win = null;

var PI = Math.PI;

var dateArray = new Array();

var hourArray = new Array();

var monthArray = ["Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov"];

var dayArray = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];

function init() {

    canvas = document.getElementById("clock");

    context = canvas.getContext("2d");

    for (var i=0; i<12; i++) hourArray[i] = (i+11)%12+1;

    for (var i=0; i<31; i++) dateArray[i] = (i+30)%31+1;

    setInterval(draw,100);

}

fonction draw() {

    var now=new Date();

    var month=now.getMonth();

    var date=now.getDate();

    var day=now.getDay();

    var hour=now.getHours();

    var minute=now.getMinutes();

    var second=now.getSeconds();

    context.fillStyle=document.getElementById("backColor").value;

    context.fillRect(0,0,canvas.width,canvas.height);

    var timeColor=document.getElementById("timeColor").value;

    drawCircle(x0,y0,280,10,timeColor)

    context.fillStyle=document.getElementById("clockColor").value;

    context.fill();

    drawDial(hourArray,245,12,timeColor,"bold 48px arial");

    var dateColor=document.getElementById("dateColor").value;

    drawCircle(x0,y0,160,2,dateColor)

    drawCircle(x0,y0,200,2,dateColor)

    drawCircle(x0,y0,110,2,dateColor)

    drawDial(monthArray,135,12,dateColor,"bold 18px arial");

    drawDial(dateArray,180,31,dateColor,"bold 28px arial");

    drawDial(dayArray,90,7,dateColor,"bold 18px arial");

    var dateHandColor=document.getElementById("dateHandColor").value;

    drawHand(month+1,12,113,22,3,dateHandColor);

    drawHand(date,31,158,22,3,dateHandColor);

    drawHand(day,7,68,22,3,dateHandColor);

    var timeHandColor=document.getElementById("timeHandColor").value;

    drawHand(hour+minute/60,12,200,0,10,timeHandColor);

    drawHand(minute+second/60,60,240,0,6,timeHandColor);

    drawHand(second,60,260,0,3,timeHandColor);

}

function drawCircle(x,y,r,width,color) {

    context.lineWidth=width;

    context.strokeStyle=color;

    context.beginPath();

    context.arc(x,y,r,0,2*PI);

    context.stroke();

}

function drawDial(array,r,segment,color,font) {

    context.textAlign="center";

    context.textBaseline="middle";

    context.fillStyle=color;

    context.font=font;

    var x,y;

    for(var i=0;i<segment;i++){

        x=x0+r*Math.cos(i/segment*2*PI-1/2*PI);

        y=y0+r*Math.sin(i/segment*2*PI-1/2*PI);

        context.fillText(array[i],x,y);

    }

}

function drawHand(angle,segment,length,r,width,color) {

    var x,y;

    x=x0+length*Math.cos(angle/segment*2*PI-1/2*PI);     y=y0+length*Math.sin(angle/segment*2*PI-1/2*PI);

    context.lineCap="round";

    context.lineWidth=width;

    context.strokeStyle=color;

    context.beginPath();

    context.moveTo(x0,y0);

    context.lineTo(x,y);

    context.stroke();

    if(r>0){

        x=x0+(length+r)*Math.cos(angle/segment*2*PI-1/2*PI);

        y=y0+(length+r)*Math.sin(angle/segment*2*PI-1/2*PI);

        drawCircle(x,y,r,5,color);

    }

}

function openWindow() {

    var w=document.getElemntById("winWidth").value;

    var h=document.getElemntById("winHeight").value;

    if(win != null) {

        win.onunload=null;

        win.close() ;

    }

    win=window.open("","","width="+w+",height="+h+",resizable=yes");

    win.document.title="アナログ時計";

    win.document.body.style.margin=0;

    win.onresize=resizeClock;

    win.onunload=resetClock;

    var newCanvas=canvas.cloneNode(false);

    win.document.body.innerHTML=newCanvas.outerHTML;

    context.clearRect(0,0,canvas.width,canvas.height);

    canvas=win.document.getElementById("clock");

    context=canvas.getContext("2d");

    resizeClock();

}

function resizeClock() {

    canvas.style.width=win.innerWidth+"px";

    canvas.style.heigth=win.innerHeight+"px";

}

function resetClock() {

    canvas=document.getElementById("clock");

    context=canvas.getContext("2d");

}

</script>

</head>

<body onload="init()">

<p>アナログ時計</p>

背景:<input type="color" id="backColor" value="#202020">

時計内背景:<input type="color" id="backColor" value="#000000">

時分秒文字盤:<input type="color" id="backColor" value="#FFFFFF">

時分秒針:<input type="color" id="backColor" value="#55f0e0">

月日曜日文字盤<input type="color" id="backColor" value="#B09080">

月日曜日針:<input type="color" id="backColor" value="#FF5555">

<hr>

ウインドウ幅:<input type="number" id="winWidth" value="300" step="100">

高さ:<input type="number" id="winHeigth" value="300" step="100">

<input type="button" value="別のウインドウで開く" onClick="openWindow()">

<hr>

<canvas id="clock" width="600" height="600"></canvas>

</body>

</html>

```

イメージ説明

色の表示選択までは出ているのですが、肝心のアナログ時計が表示されません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sousuke

    2017/12/29 00:47

    回答者が読みやすいようにした方がいいかと。

    キャンセル

  • kei344

    2017/12/29 00:57

    「> ```javascript 」を「```javascript 」に編集してください。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

    キャンセル

回答 2

checkベストアンサー

+2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>アナログ時計</title>
<script>
var canvas, context;
var x0 = 300, y0 = 300;
var win = null;
var PI = Math.PI;
var dateArray = new Array();
var hourArray = new Array();
var monthArray = ["Dec","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov"];
var dayArray = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
function init() {
    canvas = document.getElementById("clock");
    context = canvas.getContext("2d");
    for (var i=0; i<12; i++) hourArray[i] = (i+11)%12+1;
    for (var i=0; i<31; i++) dateArray[i] = (i+30)%31+1;
    setInterval(draw,100);
}
function draw() {
    var now=new Date();
    var month=now.getMonth();
    var date=now.getDate();
    var day=now.getDay();
    var hour=now.getHours();
    var minute=now.getMinutes();
    var second=now.getSeconds();
    context.fillStyle=document.getElementById("backColor").value;
    context.fillRect(0,0,canvas.width,canvas.height);
    var timeColor=document.getElementById("timeColor").value;
    drawCircle(x0,y0,280,10,timeColor)
    context.fillStyle=document.getElementById("clockColor").value;
    context.fill();
    drawDial(hourArray,245,12,timeColor,"bold 48px arial");
    var dateColor=document.getElementById("dateColor").value;
    drawCircle(x0,y0,160,2,dateColor)
    drawCircle(x0,y0,200,2,dateColor)
    drawCircle(x0,y0,110,2,dateColor)
    drawDial(monthArray,135,12,dateColor,"bold 18px arial");
    drawDial(dateArray,180,31,dateColor,"bold 28px arial");
    drawDial(dayArray,90,7,dateColor,"bold 18px arial");
    var dateHandColor=document.getElementById("dateHandColor").value;
    drawHand(month+1,12,113,22,3,dateHandColor);
    drawHand(date,31,158,22,3,dateHandColor);
    drawHand(day,7,68,22,3,dateHandColor);
    var timeHandColor=document.getElementById("timeHandColor").value;
    drawHand(hour+minute/60,12,200,0,10,timeHandColor);
    drawHand(minute+second/60,60,240,0,6,timeHandColor);
    drawHand(second,60,260,0,3,timeHandColor);
}
function drawCircle(x,y,r,width,color) {
    context.lineWidth=width;
    context.strokeStyle=color;
    context.beginPath();
    context.arc(x,y,r,0,2*PI);
    context.stroke();
}
function drawDial(array,r,segment,color,font) {
    context.textAlign="center";
    context.textBaseline="middle";
    context.fillStyle=color;
    context.font=font;
    var x,y;
    for(var i=0;i<segment;i++){
        x=x0+r*Math.cos(i/segment*2*PI-1/2*PI);
        y=y0+r*Math.sin(i/segment*2*PI-1/2*PI);
        context.fillText(array[i],x,y);
    }
}
function drawHand(angle,segment,length,r,width,color) {
    var x,y;
    x=x0+length*Math.cos(angle/segment*2*PI-1/2*PI);     y=y0+length*Math.sin(angle/segment*2*PI-1/2*PI);
    context.lineCap="round";
    context.lineWidth=width;
    context.strokeStyle=color;
    context.beginPath();
    context.moveTo(x0,y0);
    context.lineTo(x,y);
    context.stroke();
    if(r>0){
        x=x0+(length+r)*Math.cos(angle/segment*2*PI-1/2*PI);
        y=y0+(length+r)*Math.sin(angle/segment*2*PI-1/2*PI);
        drawCircle(x,y,r,5,color);
    }
}
function openWindow() {
    var w=document.getElemntById("winWidth").value;
    var h=document.getElemntById("winHeight").value;
    if(win != null) {
        win.onunload=null;
        win.close() ;
    }
    win=window.open("","","width="+w+",height="+h+",resizable=yes");
    win.document.title="アナログ時計";
    win.document.body.style.margin=0;
    win.onresize=resizeClock;
    win.onunload=resetClock;
    var newCanvas=canvas.cloneNode(false);
    win.document.body.innerHTML=newCanvas.outerHTML;
    context.clearRect(0,0,canvas.width,canvas.height);
    canvas=win.document.getElementById("clock");
    context=canvas.getContext("2d");
    resizeClock();
}
function resizeClock() {
    canvas.style.width=win.innerWidth+"px";
    canvas.style.heigth=win.innerHeight+"px";
}
function resetClock() {
    canvas=document.getElementById("clock");
    context=canvas.getContext("2d");
}
</script>
</head>
<body onload="init()">
<p>アナログ時計</p>
背景:<input type="color" id="backColor" value="#202020">
時計内背景:<input type="color" id="timeColor" value="#000000">
時分秒文字盤:<input type="color" id="clockColor" value="#FFFFFF">
時分秒針:<input type="color" id="dateColor" value="#55f0e0">
月日曜日文字盤<input type="color" id="dateHandColor" value="#B09080">
月日曜日針:<input type="color" id="timeHandColor" value="#FF5555">
<hr>
ウインドウ幅:<input type="number" id="winWidth" value="300" step="100">
高さ:<input type="number" id="winHeigth" value="300" step="100">
<input type="button" value="別のウインドウで開く" onClick="openWindow()">
<hr>
<canvas id="clock" width="600" height="600"></canvas>
</body>
</html>


とりあえず、

fonction draw() {


スペルが間違えてる

背景:<input type="color" id="backColor" value="#202020">

時計内背景:<input type="color" id="backColor" value="#000000">

時分秒文字盤:<input type="color" id="backColor" value="#FFFFFF">

時分秒針:<input type="color" id="backColor" value="#55f0e0">

月日曜日文字盤<input type="color" id="backColor" value="#B09080">

月日曜日針:<input type="color" id="backColor" value="#FF5555">


全部IDが一緒

を直してたらそれっぽいのは出ましたよー

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

とりあえずわかったところを。
IDがすべてbackColorになっています。正しいものに直してください。

    背景:<input type="color" id="backColor" value="#202020">
    時計内背景:<input type="color" id="clockColor" value="#000000"> 
    時分秒文字盤:<input type="color" id="timeColor" value="#FFFFFF"> 
    時分秒針:<input type="color" id="timeHandColor" value="#55f0e0"> 
    月日曜日文字盤<input type="color" id="dateColor" value="#B09080"> 
    月日曜日針:<input type="color" id="dateHandColor" value="#FF5555"> 

次に「fonction」の誤字があります。「function」です。

function draw() {

google chromeのデベロッパーツールを開いてコンソールをみればすぐにわかります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.25%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11791questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6453questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。