43500


下記のコードは、アナログ時計の周囲に1分ごとに"和暦"と"西暦”を表示させ、その和暦の"平成"のみに  
赤色を設定しようと試みたものですが、うまくいきません。以前も同じ質問をしたのですが、コードが  
似て非なるものなので、よく分かりません。どうすれば、特定の文字に色を付けることができるでしょうか。

[code]

    <!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:;
    }
        </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">
    
    (function(){
            "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';
    }
    
    const CLOCK_HEIGHT = 40,
        CLOCK_WIDTH = 40,
        CLOCK_FROM_MOUSE_Y = 0,
        CLOCK_FROM_MOUSE_X = 100;
    
    const H = '...'.split('');
    const M = '....'.split('');
    const S = '.....'.split('');
    const SPEED = 0.6,
        FACES = '1 2 3 4 5 6 7 8 9 10 11 12'.split(' ');
    const HAND_HEIGHT = CLOCK_HEIGHT / 4.5; 
    const HAND_WIDTH = CLOCK_WIDTH / 4.5;
    const 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;
    
    
      if ( currentDate.getMinutes() % 2 == 0 ) {
    
          var divChildren = $('Od').children[0].children;
             for (var i = 0; i < divChildren; ++i) {
                var divEl = divChildren[i];
    
          if ((i >= 0) && (i < 2)) {
                divEl.children[0].style.color="red";
    
                             }
                      }
              }
    
      }
      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 = Math.round(lastPosition.y + (ymouse - lastPosition.y) * SPEED);
      positions[0].x = Math.round(lastPosition.x + (xmouse - lastPosition.x) * SPEED);
      for (var i = 1; i < FACES.length; ++i) {
        lastPosition = lastBasePositions[i];
        positions[i] = {};
        positions[i].y = Math.round(lastPosition.y + (positions[i - 1].y - lastPosition.y) * SPEED);
        positions[i].x = Math.round(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();
    }());
        </script>
    </body>
    </html>
    
[/code]

[code]

    (function(){
            "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';
    }
    
    const CLOCK_HEIGHT = 40,
        CLOCK_WIDTH = 40,
        CLOCK_FROM_MOUSE_Y = 0,
        CLOCK_FROM_MOUSE_X = 100;
    
    const H = '...'.split('');
    const M = '....'.split('');
    const S = '.....'.split('');
    const SPEED = 0.6,
        FACES = '1 2 3 4 5 6 7 8 9 10 11 12'.split(' ');
    const HAND_HEIGHT = CLOCK_HEIGHT / 4.5; 
    const HAND_WIDTH = CLOCK_WIDTH / 4.5;
    const 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;
    
    
      if ( currentDate.getMinutes() % 2 == 0 ) {
    
          var divChildren = $('Od').children[0].children;
             for (var i = 0; i < divChildren; ++i) {
                var divEl = divChildren[i];
                   
          if ((i >= 0) && (i < 2)) {
                divEl.children[0].style.color="red";
                                  
                             }
                      }
              }
    
      }
      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 = Math.round(lastPosition.y + (ymouse - lastPosition.y) * SPEED);
      positions[0].x = Math.round(lastPosition.x + (xmouse - lastPosition.x) * SPEED);
      for (var i = 1; i < FACES.length; ++i) {
        lastPosition = lastBasePositions[i];
        positions[i] = {};
        positions[i].y = Math.round(lastPosition.y + (positions[i - 1].y - lastPosition.y) * SPEED);
        positions[i].x = Math.round(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();
    }());
[/code]

[code]

    .Face {
      position: absolute;
      height: 10;
      widdth: 10;
      text-align: center;
      font-size: 1em;
      color:;
    }
    
    .Hours {
      position: absolute;
      width: 16px;
      height: 16px;
      font-family: Arial;
      font-size: 16px;
      color:;
      text-align: center;
      font-weight: bold;
    }
    
    .Minutes {
      position: absolute;
      width: 16px;
      height: 16px;
      font-family: Arial;
      font-size: 16px;
      color:;
      text-align: center;
      font-weight: bold;
    }
    
    .Seconds {
      position: absolute;
      width: 16px;
      height: 16px;
      font-family: Arial;
      font-size: 16px;
      color:;
      text-align: center;
      font-weight: bold;
    }
    
    .Date {
      position: absolute;
      height: 10;
      width: 10;
      font-size: 1em;
      color:;
    }
    ​
[/code]

[code]

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

問題箇所は、"function updateYear(currentDate, scrll) {}"内の下記の部分です。

[code]

        // Date wrapper
        var html = '';
        for (var i = 0; i < yearLength; ++i) {
          html += '<div class="Date">' + yearCharacters[i] + '</div>';
        }
        $('Od').children[0].innerHTML = html;
    
    
      if ( currentDate.getMinutes() % 2 == 0 ) {
    
          var divChildren = $('Od').children[0].children;
             for (var i = 0; i < divChildren; ++i) {
                var divEl = divChildren[i];
    
          if ((i >= 0) && (i < 2)) {
                divEl.children[0].style.color="red";
    
                             }
                      }
              }
    
      }
    
[/code]


CC BY-SA 3.0
2018-04-23T13:26:32.227
43498
2018-04-23T15:33:37.807
2018-04-23T15:33:37.807
5246
28063
question
javascript
javascript内の個々の要素に色を付ける方法


年にクラスを割り当ててる箇所を以下のように修正。

[code]

        // Date wrapper
        var html = '';
        var is_heisei = yearString.match(/^平成.*/);
        for (var i = 0; i < yearLength; ++i) {
          var cls = 'Date';
          if (is_heisei && i < 2)
            cls += ' red';
          html += '<div class="' + cls + '">' + yearCharacters[i] + '</div>';
        }
        $('Od').children[0].innerHTML = html;
    
[/code]

css に以下を追加。

[code]

    .red {
      color: #ff0000;
    }
    
[/code]

以上でできてるようです。

[code]

    (function(){
            "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';
    }
    
    const CLOCK_HEIGHT = 40,
        CLOCK_WIDTH = 40,
        CLOCK_FROM_MOUSE_Y = 0,
        CLOCK_FROM_MOUSE_X = 100;
    
    const H = '...'.split('');
    const M = '....'.split('');
    const S = '.....'.split('');
    const SPEED = 0.6,
        FACES = '1 2 3 4 5 6 7 8 9 10 11 12'.split(' ');
    const HAND_HEIGHT = CLOCK_HEIGHT / 4.5; 
    const HAND_WIDTH = CLOCK_WIDTH / 4.5;
    const 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 = '';
        var is_heisei = yearString.match(/^平成.*/);
        for (var i = 0; i < yearLength; ++i) {
          var cls = 'Date';
          if (is_heisei && i < 2)
            cls += ' red';
          html += '<div class="' + cls + '">' + yearCharacters[i] + '</div>';
        }
        $('Od').children[0].innerHTML = html;
    
    
      if ( currentDate.getMinutes() % 2 == 0 ) {
    
          var divChildren = $('Od').children[0].children;
             for (var i = 0; i < divChildren; ++i) {
                var divEl = divChildren[i];
                   
          if ((i >= 0) && (i < 2)) {
                divEl.children[0].style.color="red";
                                  
                             }
                      }
              }
    
      }
      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 = Math.round(lastPosition.y + (ymouse - lastPosition.y) * SPEED);
      positions[0].x = Math.round(lastPosition.x + (xmouse - lastPosition.x) * SPEED);
      for (var i = 1; i < FACES.length; ++i) {
        lastPosition = lastBasePositions[i];
        positions[i] = {};
        positions[i].y = Math.round(lastPosition.y + (positions[i - 1].y - lastPosition.y) * SPEED);
        positions[i].x = Math.round(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();
    }());
[/code]

[code]

    .Face {
      position: absolute;
      height: 10;
      widdth: 10;
      text-align: center;
      font-size: 1em;
      color:;
    }
    
    .Hours {
      position: absolute;
      width: 16px;
      height: 16px;
      font-family: Arial;
      font-size: 16px;
      color:;
      text-align: center;
      font-weight: bold;
    }
    
    .Minutes {
      position: absolute;
      width: 16px;
      height: 16px;
      font-family: Arial;
      font-size: 16px;
      color:;
      text-align: center;
      font-weight: bold;
    }
    
    .Seconds {
      position: absolute;
      width: 16px;
      height: 16px;
      font-family: Arial;
      font-size: 16px;
      color:;
      text-align: center;
      font-weight: bold;
    }
    
    .Date {
      position: absolute;
      height: 10;
      width: 10;
      font-size: 1em;
      color:;
    }
      
    .red {
      color: #ff0000;
    }
[/code]

[code]

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


CC BY-SA 3.0
2018-04-23T14:45:28.397
43499
2018-04-23T14:45:28.397
5288
43498
answer


質問で挙げられていた所を以下のように変更してみました。  
変更点は2つ目のforの部分と色の設定の部分です。

forの部分では`i < divChildlen`を `i < divChildlen.length`に変更しました

`divEl`に色の設定を行う部分では、`divEl`には子要素がないのでchildrenを使わなくても直接、色を設定することができます。

childrenについては下のリンクが参考になると思います。  
[ParentNode.children - Web API インターフェイス |
MDN](https://developer.mozilla.org/ja/docs/Web/API/ParentNode/children)

[code]

    // Date wrapper
    var html = '';
    for (var i = 0; i < yearLength; ++i) {
      html += '<div class="Date">' + yearCharacters[i] + '</div>';
    }
    $('Od').children[0].innerHTML = html;
    
    
    if ( currentDate.getMinutes() % 2 == 0 ) {
    
      var divChildren = $('Od').children[0].children;
         for (var i = 0; i < divChildren.length; i++) { //変更点1
            var divEl = divChildren[i]; 
    
      if ((i >= 0) && (i < 2)) {
            divEl.style.color="red"; //変更点2
    
                         }
                  }
          }
    
    }
    
[/code]

[code]

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <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:;
    }
        </style>
        </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) {
      return document.getElementsByClassName(sel);
    }
    
    function setPosition(element, y, x) {
      element.style.top = y + 'px';
      element.style.left = x + 'px';
    }
    
    const CLOCK_HEIGHT = 40,
        CLOCK_WIDTH = 40,
        CLOCK_FROM_MOUSE_Y = 0,
        CLOCK_FROM_MOUSE_X = 100;
    
    const H = '...'.split('');
    const M = '....'.split('');
    const S = '.....'.split('');
    const SPEED = 0.6,
        FACES = '1 2 3 4 5 6 7 8 9 10 11 12'.split(' ');
    const HAND_HEIGHT = CLOCK_HEIGHT / 4.5;
    const HAND_WIDTH = CLOCK_WIDTH / 4.5;
    const 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;
    
    
      if ( currentDate.getMinutes() % 2 == 0 ) {
    
          var divChildren = $('Od').children[0].children;
             for (var i = 0; i < divChildren.length; i++) {
                var divEl = divChildren[i];
    
          if ((i >= 0) && (i < 2)) {
                divEl.style.color="red";
    
                             }
                      }
              }
    
      }
      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 = Math.round(lastPosition.y + (ymouse - lastPosition.y) * SPEED);
      positions[0].x = Math.round(lastPosition.x + (xmouse - lastPosition.x) * SPEED);
      for (var i = 1; i < FACES.length; ++i) {
        lastPosition = lastBasePositions[i];
        positions[i] = {};
        positions[i].y = Math.round(lastPosition.y + (positions[i - 1].y - lastPosition.y) * SPEED);
        positions[i].x = Math.round(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();
    }());
        </script>
    </body>
    </html>
[/code]


CC BY-SA 3.0
2018-04-23T15:24:59.210
43500
2018-04-23T15:30:25.857
2018-04-23T15:30:25.857
5246
5246
43498
answer