0

下記のコードは、カレンダー機能付きの時計を表示させます。
このカレンダー(外周)の表示を、selectボックスを使って日本語と英語に切り替えるように
するには、どのように組み立てればいいでしょうか。おねがいします。

日本語の部分は、

var d = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
m = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
date = new Date(),
day = date.getDate(),
year = date.getYear() + 1900;
var TodaysDate = " " + d[date.getDay()] + " " + year+"年"+" " + m[date.getMonth()] +" " + day +"日";

英語の部分は、

var d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    m = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    date = new Date(),
    day = date.getDate(),
    year = date.getYear() + 1900;

        if((day == 1) || (day == 21) || (day == 31)) { 
                       day = day + "st"; 
}
        else if((day == 2) || (day == 22)) { 
                       day = day + "nd"; 
}
        else if((day == 3) || (day == 23)) { 
                       day = day + "rd"; 
}
        else { 
                       day = day + "th"; 
}                

var TodaysDate = " " + d[date.getDay()] + " "+  day + " " + m[date.getMonth()] + " " + year;

と2つに分けて、『条件節』で組み立ててみましたが、うまくいきませんでした。

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<div id="clock">
    <div id="Od" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>
    <div id="Of" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>
    <div id="Oh" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>
    <div id="Om" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>
    <div id="Os" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>
</div>


<script type="text/javascript">


(function(){
    "use strict";

function $(sel)
{
    return document.getElementById(sel);
}

function $$(sel)
{
    if (typeof document.getElementsByClassName === 'undefined')
    {
        return document.getElementsByName(sel);
    }

    return document.getElementsByClassName(sel);
}


var dCol = '00ff00', //date colour.
    sCol = 'ff0000', //seconds colour.
    mCol = '000000', //minutes colour.
    hCol = '000000', //hours colour.
    fCol = '0000ff', //face color
    ClockHeight = 40,
    ClockWidth = 40,
    ClockFromMouseY = 0,
    ClockFromMouseX = 100,
    d = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
    m = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    date = new Date(),
    day = date.getDate(),
    year = date.getYear() + 1900;
var TodaysDate = " " + d[date.getDay()] + " " + year+"年"+" " + m[date.getMonth()] +" " + day +"日";
var D = TodaysDate.split('');
var H = '...';
    H = H.split('');
var M = '....';
    M = M.split('');
var S = '.....';
    S = S.split('');
var Face = 'Ⅰ Ⅱ Ⅲ Ⅳ V Ⅵ Ⅶ Ⅷ Ⅸ X XI XII',
    font = 'Helvetica, Arial, sans-serif',
    size = 1,
    speed = 0.6;
    Face = Face.split(' ');
var n = Face.length;
var a = size * 10;
var ymouse = 0,
    xmouse = 0,
    scrll = 0,
    props = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + fCol + '">',
    props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';
var Split = 360 / n;
var Dsplit = 360 / D.length;
var HandHeight = ClockHeight / 4.5; 
var HandWidth = ClockWidth / 4.5;
var HandY = -7,
    HandX = -2.5,
    step = 0.06,
    currStep = 0,
    y = [],
    x = [],
    Y = [],
    X = [],
    Dy = [],
    Dx = [],
    DY = [],
    DX = [];

var i;

for (i = 0; i < n; i++) 
{
    y[i] = 0;
    x[i] = 0;
    Y[i] = 0;
    X[i] = 0;
}

for (i = 0; i < D.length; i++) 
{
    Dy[i] = 0;
    Dx[i] = 0;
    DY[i] = 0;
    DX[i] = 0;
}

var wrapper = $('clock');
var html = '';


// Date wrapper
html = '';
for (i = 0; i < D.length; i++)
{
    html += '<div class="Date" name="Date" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props2 + D[i] + '</span></div>';
}
$('Od').children[0].innerHTML = html;

// Face wrapper
html = '';
for (i = 0; i < n; i++) 
{
    html += '<div class="Face" name="Face" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props + Face[i] + '</span></div>';
}
$('Of').children[0].innerHTML = html;

// Hours wrapper
html = '';
for (i = 0; i < H.length; i++)
{
    html += '<div class="Hours" name="Hours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hCol + ';text-align:center;font-weight:bold">' + H[i] + '</div>';
} 
$('Oh').children[0].innerHTML = html;

// Minute wrapper
html = '';
for (i = 0; i < M.length; i++)
{
    html += '<div class="Minutes" name="Minutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + mCol + ';text-align:center;font-weight:bold">' + M[i] + '</div>';
} 
$('Om').children[0].innerHTML = html;

// Seconds wrapper
html = '';
for (i = 0; i < S.length; i++)
{
    html += '<div class="Seconds" name="Seconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + sCol + ';text-align:center;font-weight:bold">' + S[i] + '</div>';
} 
$('Os').children[0].innerHTML = html;

// Mouse move event handler
function Mouse(evnt) 
{
    if (typeof evnt === 'undefined')
    {
        ymouse = event.Y + ClockFromMouseY;
        xmouse = event.X + ClockFromMouseX;
    }
    else
    {
        ymouse = evnt.clientY + ClockFromMouseY;
        xmouse = evnt.clientX + ClockFromMouseX;
    }


}
document.onmousemove = Mouse;

function ClockAndAssign() 
{
    var time = new Date();
    var secs = time.getSeconds();
    var sec = -1.57 + Math.PI * secs / 30;
    var mins = time.getMinutes();
    var min = -1.57 + Math.PI * mins / 30;
    var hr = time.getHours();
    var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes(), 10) / 360;
    $('Od').style.top = window.document.body.scrollTop;
    $('Of').style.top = window.document.body.scrollTop;
    $('Oh').style.top = window.document.body.scrollTop;
    $('Om').style.top = window.document.body.scrollTop;
    $('Os').style.top = window.document.body.scrollTop;
    for (i = 0; i < n; i++)
    {
        var F = $$('Face')[i];
        F.style.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
        F.style.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
    }
    for (i = 0; i < H.length; i++)
    {
        var HL = $$('Hours')[i];
        HL.style.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
        HL.style.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
    }
    for (i = 0; i < M.length; i++)
    {
        var ML = $$('Minutes')[i].style;
        ML.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
        ML.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
    }
    for (i = 0; i < S.length; i++)
    {
        var SL = $$('Seconds')[i].style;
        SL.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
        SL.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
    }
    for (i = 0; i < D.length; i++)
    {
        var DL = $$('Date')[i].style;
        DL.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
        DL.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
    }
    currStep -= step;
}

function Delay() 
{
    scrll = 0;
    Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
    Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
    for (i = 1; i < D.length; i++) {
        Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
        Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
    }
    y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
    x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
    for (i = 1; i < n; i++) {
        y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
        x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
    }
    ClockAndAssign();
    setTimeout(Delay, 20);
}

Delay();
}());

</script>
</body>
</html>

*保存する場合は、Unicode形式にしてください。

4
  • スタック・オーバーフローへようこそ! あなたのコードですが、こちらの環境で実行したところ外周以前にそもそも上手く表示されませんでした。Google chrome 55.0.2883.87です。文字列が1箇所に固まっているように表示されるのですが、何か忘れているコードがあったりはしませんか? 自分の質問は自由に編集できますので、何かあれば編集をお願いいたします。コードをはりつける際は、コピペした後コードを全部選択し、編集画面上の{}みたいなボタンを押すとMarkdownで見栄えを良くできます。
    – nekketsuuu
    Commented 2017年1月29日 7:34
  • xsotaさん。日本語の部分と英語の部分を、コードにくくっていただきましてありがとうございました。そのほうが分かりやすいですね。お手数をかけました。
    – user20431
    Commented 2017年1月29日 13:58
  • nekketsuuuさん。Google chromeで試したのですが、うまく表示されましたが… 文字列が1箇所に固まっているように表示されるとのことですが、保存をUnicode形式にすれば、正常に表示されます。
    – user20431
    Commented 2017年1月29日 13:59
  • @.user20431 すいません、これはこちらの問題だったようです。クリーンなGoogle chrome上ではきちんと表示されました。
    – nekketsuuu
    Commented 2017年1月29日 15:15

3 件の回答 3

1

selectでの切り替えと日本語/英語/etcの持ち方のサンプルです。
Classチックにしていますが、当方javascriptプログラマではないので一般的ではないかもしれません・・・
(すいません、ご提示のHTML body部分の細かいところは読めていませんので、サンプルを記載してます。)

日本語/英語の持ち方

//日付用クラス
//@param 週の表示方法配列[7]
//@param 月の表示方法配列[12]
//@param 本日表示方法フォーマット文字列 YYYY:年 MM:月 DD:日 dd:曜日

    var MyCalendar = function(weekFormat, monthFormat,todayFormat) {
        this.days=weekFormat;
        this.months=monthFormat;
        this.todayFormat = todayFormat
    }
    MyCalendar.prototype.getFormattedToday = function() {
        dateObj = new Date();
        ids = {
            "DD":dateObj.getDate(),
            "dd":this.days[dateObj.getDay()],
            "MM":this.months[dateObj.getMonth()],
            "YYYY":this.year = dateObj.getYear() + 1900,
        }
      formattedToday = this.todayFormat
      for (var key in ids){//フォーマッタがjavascriptにないようなので自力変換
             formattedToday = formattedToday.replace(key,ids[key])
        }
      return formattedToday;
    }
//他に日英切り替えな文字列があればメソッド追加
//MyCalendar.prototype.get〜 = function() {

// フォーマットの定義
    var TODAY = {
        "ja" : new MyCalendar(
                 ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
                 ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
                 " dd YYYY年 MM月 DD日"),
        "en": new MyCalendar(
                 ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
                 ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                 "dd YYYY MM DD")
    }

切り替えサンプル

<script〜>
    function setToday(obj) {
      var value = obj.options[obj.selectedIndex].value;
     document.getElementById("today").innerHTML=TODAY[value].getFormattedToday();
        }
〜
</script>
〜
<body>
〜
    <select name="select" onchange="setToday(this);">
        <option value="">ここから言語選択</option>
        <option value="ja">日本語</option>
        <option value="en">English</option>
    </select>
    <div id="today">テスト(ここに日付表示)</div>
〜
</body>
2
  • 回答ありがとうございました。この方法は。文字列に表示するときに使えますね。質問のコードは、初期値の文字列(カレンダー部分)と、セレクトボックスで選択する言語を、どのようにすればリンクできるかが分からないのです。
    – user20431
    Commented 2017年1月30日 13:23
  • 上記のコードのように連想配列のキーとSelectのValueを紐付ける方法ではダメですか?ご提示のコードで言うとTodaysDateに上記コードのMyCalendarインスタンスを代入し言語ごとにポリモーフするのがJavaだと常套手段なのですが。
    – H.H
    Commented 2017年1月31日 2:40
-1

マウスポインタの位置で切り替わるのを望んでいたのですが、新たに呼び出して切り替えるのであれば、
下記の方法でできました。

(ボタン部分)

   <FORM name="myForm1">
     <INPUT type="button" name="tog1" value="日本語" onclick="ChangeLang()">
   </FORM>

flag=false;
  function ChangeLang(){
    flag = !flag;  //true と false を 切り替える
      if(flag) { document.myForm1.tog1.value= "英 語";
                 document.getElementById("clock").innerHTML=TodaysDate;
  }
           else{ document.myForm1.tog1.value= "日本語";
                 document.getElementById("clock").innerHTML=TodaysDate;
   }
}

このjavascriptの"if~else"内に、コード本体のjavascript部分(*質問文にある日本語と英語の
部分は書き換えます)をそれぞれを加え、さらにこの下にコード本体を加えればいいです。

-1

以下の方法で、うまくいきました。

(プルダウン)

<form name="form">
  <select name="changeLang">
    <option selected>日本語</option>
    <option>英 語</option>
  </select>
</form>

(スクリプトの"function ClockAndAssign()
{}内に加える)

if(document.form.changeLang.selectedIndex==0){
var d = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
var m = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    date = new Date(),
    day = date.getDate(),
    year = date.getYear() + 1900;
var TodaysDate = " " + d[date.getDay()] + " " + year+"年"+" " + m[date.getMonth()] +" " + day +"日";
}
else {
var d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    m = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    date = new Date(),
    day = date.getDate(),
    year = date.getYear() + 1900;

        if((day == 1) || (day == 21) || (day == 31)) { 
                       day = day + "st"; 
}
        else if((day == 2) || (day == 22)) { 
                       day = day + "nd"; 
}
        else if((day == 3) || (day == 23)) { 
                       day = day + "rd"; 
}
        else { 
                       day = day + "th"; 
}                

var TodaysDate = " " + d[date.getDay()] + " "+  day + " " + m[date.getMonth()] + " " + year;

}

var D = TodaysDate.split('');
var Dsplit = 360 / D.length;
var props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';

// Date wrapper
html = '';
for (i = 0; i < D.length; i++)
{
    html += '<div class="Date" name="Date" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props2 + D[i] + '</span></div>';
}
$('Od').children[0].innerHTML = html;

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。