34011


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

日本語の部分は、

[code]

    var d = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
    m = ["１月", "２月", "３月", "４月", "５月", "６月", "７月", "８月", "９月", "10月", "11月", "12月"],
    date = new Date(),
    day = date.getDate(),
    year = date.getYear() + 1900;
    var TodaysDate = " " + d[date.getDay()] + " " + year+"年"+" " + m[date.getMonth()] +" " + day +"日";
    
[/code]

英語の部分は、

[code]

    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;
    
[/code]

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

[code]

    <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 = ["１月", "２月", "３月", "４月", "５月", "６月", "７月", "８月", "９月", "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>
    
[/code]

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


CC BY-SA 3.0
2017-01-28T13:58:42.900
32221
2017-04-14T13:07:54.553
2017-04-14T09:53:55.670
20431
20431
question
javascript
カレンダー部分を、selectで日本語と英語をの切り替えるには


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

日本語/英語の持ち方

[code]

    //日付用クラス
    //@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(
                     ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
                     ["１", "２", "３", "４", "５", "６", "７", "８", "９", "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")
        }
    
[/code]

切り替えサンプル

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2017-01-30T07:14:50.730
32250
2017-01-30T07:20:24.470
2017-01-30T07:20:24.470
19716
19716
32221
answer


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

(ボタン部分)

[code]

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

[code]

    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;
    　　　}
    }
    
[/code]

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


CC BY-SA 3.0
2017-02-05T14:12:53.683
32404
2017-02-05T14:23:24.420
2017-02-05T14:23:24.420
20431
20431
32221
answer


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

(プルダウン)

[code]

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

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

[code]

    if(document.form.changeLang.selectedIndex==0){
    var d = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
    var m = ["１月", "２月", "３月", "４月", "５月", "６月", "７月", "８月", "９月", "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;
    
[/code]


CC BY-SA 3.0
2017-04-14T10:30:21.220
34011
2017-04-14T13:07:54.553
2017-04-14T13:07:54.553
20431
20431
32221
answer