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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

Q&A

解決済

2回答

2616閲覧

javascriptで時計を表示したい

j-suzuki

総合スコア50

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/12/28 15:39

編集2017/12/28 15:44

週刊アスキーに掲載されていた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>
![イメージ説明](b365bf6971c0284b27b9fa0366c1d143.png) 色の表示選択までは出ているのですが、肝心のアナログ時計が表示されません。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sousuke

2017/12/28 15:47

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

2017/12/28 15:57

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

回答2

0

ベストアンサー

<!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が一緒

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

投稿2017/12/28 16:01

rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

HTML

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

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

javascript

1function draw() {

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

投稿2017/12/28 15:55

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問