javascript内の個々の要素に色を付ける方法
下記のコードは、アナログ時計の周囲に1分ごとに"和暦"と"西暦”を表示させ、その和暦の"平成"のみに
赤色を設定しようと試みたものですが、うまくいきません。以前も同じ質問をしたのですが、コードが
似て非なるものなので、よく分かりません。どうすれば、特定の文字に色を付けることができるでしょうか。
<!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>
(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();
}());.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:;
}
<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>
問題箇所は、"function updateYear(currentDate, scrll) {}"内の下記の部分です。
// 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";
}
}
}
}