0

下記のコードは、『(カレンダー機能付き)アナログ時計』のもので、1分おきに英語と日本語に
切り替わります。
このコードの"FACE(文字盤)の数字を、セレクトボックスで切り換えるようにしたいのですが、
どのように書けばいいでしょうか。類似のコードでは、何通りかうまく行きましたが、こちらのコードでは、うまく行きません。よろしくお願いします。

    <!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Helvetica, Arial, sans-serif;
        }

        .Face {
            position: absolute;
            height: 10;
            widdth: 10;
            text-align: center;
            font-size: 1em;
            color: #0000ff;
        }

        .Hours {
            position: absolute;
            width: 16px;
            height: 16px;
            font-family: Arial;
            font-size: 16px;
            color: #000000;
            text-align: center;
            font-weight: bold;
        }

        .Minutes {
            position: absolute;
            width: 16px;
            height: 16px;
            font-family: Arial;
            font-size: 16px;
            color: #000000;
            text-align: center;
            font-weight: bold;
        }

        .Seconds {
            position: absolute;
            width: 16px;
            height: 16px;
            font-family: Arial;
            font-size: 16px;
            color: #ff0000;
            text-align: center;
            font-weight: bold;
        }

        .Date {
            position: absolute;
            height: 10;
            width: 10;
            font-size: 1em;
            color: #00ff00;
        }
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</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">
    "use strict";

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

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

    function setPosition(element, y, x) {
        element.style.top = y + 'px';
        element.style.left = x + 'px';
    }

    var CLOCK_HEIGHT = 40,
        CLOCK_WIDTH = 40,
        CLOCK_FROM_MOUSE_Y = 0,
        CLOCK_FROM_MOUSE_X = 100;

    var H = '✴✴✴',
          H = H.split('');
    var M = '✴✴✴✴',
          M = M.split('');
    var S = '・・・・・',
        S = S.split('');
    var FACES =  '✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴', 
        SPEED = 0.2,
        FACES = FACES.split(' ');
    var HAND_HEIGHT = CLOCK_HEIGHT / 4.5;
    var HAND_WIDTH = CLOCK_WIDTH / 4.5;
    var HAND_Y = -7,
        HAND_X = -2.5,
        STEP = 0.06;

    var ymouse = 0,
        xmouse = 0;
    var currStep = 0;
    var lastBasePositions = [];

    function initialize() {
        for (var i = 0; i < FACES.length; ++i) {
            lastBasePositions[i] = {x:0, y:0};
        }

        var html = '';
        // Face wrapper
        html = '';
        for (var i = 0; i < FACES.length; ++i) {
            html += '<div class="Face">' + FACES[i] + '</div>';
        }
        $('Of').children[0].innerHTML = html;

        // Hours wrapper
        html = '';
        for (var i = 0; i < H.length; ++i) {
            html += '<div class="Hours">' + H[i] + '</div>';
        }
        $('Oh').children[0].innerHTML = html;

        // Minute wrapper
        html = '';
        for (var i = 0; i < M.length; ++i) {
            html += '<div class="Minutes">' + M[i] + '</div>';
        }
        $('Om').children[0].innerHTML = html;

        // Seconds wrapper
        html = '';
        for (var i = 0; i < S.length; ++i) {
            html += '<div class="Seconds">' + S[i] + '</div>';
        }
        $('Os').children[0].innerHTML = html;

        // Mouse move event handler
        document.onmousemove = function(evnt) {
            ymouse = evnt.clientY + CLOCK_FROM_MOUSE_Y;
            xmouse = evnt.clientX + CLOCK_FROM_MOUSE_X;
        };

        requestAnimationFrame(ClockAndAssign);
    }

    var lastYearPositions = [{x:0, y:0}];
    var lastYearString = ' ';
    var lastYearLocale = '';
    function updateYear(currentDate, scrll) {
        var yearString = lastYearString;
        if (currentDate.getMinutes() % 2 == 0) {
            if (lastYearLocale != 'ja')
                yearString = currentDate.toLocaleDateString("ja-JP-u-ca-japanese", { era: "long", year: "numeric" }).
                replace(/\u200e/g, "").replace(" ", "");
            lastYearLocale = 'ja';
        } else {
            if (lastYearLocale != 'en')
                yearString = currentDate.toLocaleDateString("en-US", { era: "long", year: "numeric" }).
                replace(/\u200e/g, "") + "年";
            lastYearLocale = 'en';
        }

        var yearLength = lastYearPositions.length;
        if (yearString != lastYearString) {
            lastYearString = yearString;
            var yearCharacters = yearString.split('');
            yearLength = yearCharacters.length;

            // Date wrapper
            var html = '';
            for (var i = 0; i < yearLength; ++i) {
                html += '<div class="Date">' + yearCharacters[i] + '</div>';
            }
            $('Od').children[0].innerHTML = html;
        }
        var positions = [{}];
        var lastPosition = lastYearPositions[0];
        positions[0].y = lastPosition.y + ((ymouse) - lastPosition.y) * SPEED;
        positions[0].x = lastPosition.x + ((xmouse) - lastPosition.x) * SPEED;
        for (var i = 1; i < yearLength; ++i) {
            lastPosition = i < lastYearPositions.length ?
                lastYearPositions[i] :
                lastYearPositions[lastYearPositions.length - 1];
            positions[i] = {};
            positions[i].y = lastPosition.y + (positions[i-1].y - lastPosition.y) * SPEED;
            positions[i].x = lastPosition.x + (positions[i-1].x - lastPosition.x) * SPEED;
        }
        for (var i = 0; i < yearLength; ++i) {
            var radian = currStep + i * (360 / yearLength) * Math.PI / 180;
            setPosition($$('Date')[i],
                Math.round(positions[i].y) + CLOCK_HEIGHT * 1.5 * Math.sin(radian) + scrll,
                Math.round(positions[i].x) + CLOCK_WIDTH * 1.5 * Math.cos(radian));
        }
        lastYearPositions = positions;
        currStep -= STEP;
    }


    function ClockAndAssign() {
        var date = new Date();
        var secs = date.getSeconds();
        var sec = -1.57 + Math.PI * secs / 30;
        var mins = date.getMinutes();
        var min = -1.57 + Math.PI * mins / 30;
        var hr = date.getHours();
        var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(date.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;
        var scrll = 0;

        var positions = [{}];
        var lastPosition = lastBasePositions[0];
        positions[0].y = (lastPosition.y + (ymouse - lastPosition.y) * SPEED);
        positions[0].x = (lastPosition.x + (xmouse - lastPosition.x) * SPEED);
        for (var i = 1; i < FACES.length; ++i) {
            lastPosition = lastBasePositions[i];
            positions[i] = {};
            positions[i].y = (lastPosition.y + (positions[i - 1].y - lastPosition.y) * SPEED);
            positions[i].x = (lastPosition.x + (positions[i - 1].x - lastPosition.x) * SPEED);
        }
        lastBasePositions = positions;

        var split = 360 / FACES.length;
        for (var i = 0; i < FACES.length; ++i) {
            var radian = -1.0471 + i * split * Math.PI / 180;
            setPosition($$('Face')[i],
                positions[i].y + CLOCK_HEIGHT * Math.sin(radian) + scrll,
                positions[i].x + CLOCK_WIDTH * Math.cos(radian));
        }
        for (var i = 0; i < H.length; ++i) {
            setPosition($$('Hours')[i],
                positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(hrs) + scrll,
                positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(hrs));
        }
        for (var i = 0; i < M.length; ++i) {
            setPosition($$('Minutes')[i],
                positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(min) + scrll,
                positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(min));
        }
        for (var i = 0; i < S.length; ++i) {
            setPosition($$('Seconds')[i],
                positions[i].y + HAND_Y + (i * HAND_HEIGHT) * Math.sin(sec) + scrll,
                positions[i].x + HAND_X + (i * HAND_WIDTH) * Math.cos(sec));
        }
        updateYear(date, scrll);
        requestAnimationFrame(ClockAndAssign);
    }

    initialize();

 function changeFace(){

   if(document.DateFace.changeFace.selectedIndex==0){

      FACES = '✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴';
       }
    else if(document.DateFace.changeFace.selectedIndex==1){

      FACES = '1 2 3 4 5 6 7 8 9 10 11 12';
       }
    else{

      FACES = 'Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ';
       }

      FACES = FACES.split(' ');


  // Face wrapper
  html = '';
  for (var i = 0; i < FACES.length; ++i) {
    html += '<div class="Face">' + FACES[i] + '</div>';
  }
  $('Of').children[0].innerHTML = html;
}
document.DateFace.changeFace.onchange=changeFace;

</script>


 <form id ="DateFaceform" name="DateFace" style="text-align:CENTER;">
   <select id="faceSelector" name="changeFace" onChange="changeFace();">
      <option  selected disabled=disabled> 文字盤 </option>
      <option>アラビア数字</option>
      <option>ロマン数字</option>
   </select>
 </form>
</body>
</html>

問題箇所は、下記の部分です。
"FACES = FACES.split(' ');"と"// Face wrapper"の間に、
何か書き足さなければならないようですが、分かる方は教えていただけないでしょうか。

 function changeFace(){

   if(document.DateFace.changeFace.selectedIndex==0){

      FACES = '✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴ ✴';
       }
    else if(document.DateFace.changeFace.selectedIndex==1){

      FACES = '1 2 3 4 5 6 7 8 9 10 11 12';
       }
    else{

      FACES = 'Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ';
       }

      FACES = FACES.split(' ');


  // Face wrapper
  html = '';
  for (var i = 0; i < FACES.length; ++i) {
    html += '<div class="Face">' + FACES[i] + '</div>';
  }
  $('Of').children[0].innerHTML = html;
}
document.DateFace.changeFace.onchange=changeFace;

1 件の回答 1

0

changeFace() のロジックはそのままで問題ないようです。ブラウザの開発者ツールなどを開くと、コンソールにエラーが表示されているのではないかと思います。

  • document.DateFace.changeFace.onchange=changeFace;
    この行が実行される時点ではform要素とselect要素は存在しません。HTMLでonChangeが書いてあるので、これは不要です。

  • form要素は必要ありません。削除して大丈夫です。

  • <select ... onChange="changeFace();">
    ここでselect要素をchangeFace() に渡すと changeFace() の実装が少しシンプルになります。
    <select ... onChange="changeFace(this);">
    function changeFace(){function changeFace(select) {
    if(document.DateFace.changeFace.selectedIndex==...if(select.selectedIndex==...

  • html = '';
    変数 html がこのスコープでは宣言されていません。
    var html = '';

1
  • 詳しい回答をありがとうございました。うまく行きました。どこか一点でもミスすると機能しませんので、頭が痛いです。
    – user28063
    Commented 2018年5月12日 10:36

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

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