nawada/color-change.html

## color-change.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Sample</title>
    <meta charset="utf-8">
    <script>
        function ready(fn) {
            'use strict';
            if(document.readyState != 'loading') {
                fn();
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }
        (function() {
            'use strict';
            var minus_r, minus_g, minus_b;
            minus_r = minus_g = minus_b = false;
            var changeBgColor = function(dom, defaultColor) {
                var bgColor = dom.style.backgroundColor || defaultColor || 'rgb(255, 255, 255)';
                var matched = bgColor.match(/^rgba?\((\d+), ?(\d+), ?(\d+)(?:, ?\d+)?\)$/);
                var r = Number(matched[1]), g = Number(matched[2]), b = Number(matched[3]);
                var rnd = Math.round(Math.random() * 100) % 3;

                var ret;
                if (rnd === 0) {
                    ret = updateColorValue(r, minus_r);
                    r = ret.value;
                    minus_r = ret.isMinus;
                }
                else if (rnd === 1) {
                    ret = updateColorValue(g, minus_g);
                    g = ret.value;
                    minus_g = ret.isMinus;
                } else  {
                    ret = updateColorValue(b, minus_b);
                    b = ret.value;
                    minus_b = ret.isMinus;
                }

                dom.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
            };
            var updateColorValue = function(value, isMinus) {
                if(isMinus) {
                    value -= 5;
                } else {
                    value += 5
                }

                if (value > 255) {
                    value -= 10;
                    isMinus = true;
                } else if(value < 0) {
                    value += 10;
                    isMinus = false;
                }
                return {
                    value: value,
                    isMinus: isMinus
                }
            };
            ready(function() {
                setInterval(function () {
                    changeBgColor(document.getElementById('target'));
                }, 1000 / 60);
            });
        })();
    </script>
</head>
<body>
<div id="target" style="width: 100px; height: 100px;">&nbsp;</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<title>Sample</title>
	<meta charset="utf-8">
	<script>
	function ready(fn) {
	'use strict';
	if(document.readyState != 'loading') {
	fn();
	} else {
	document.addEventListener('DOMContentLoaded', fn);
	}
	}
	(function() {
	'use strict';
	var minus_r, minus_g, minus_b;
	minus_r = minus_g = minus_b = false;
	var changeBgColor = function(dom, defaultColor) {
	var bgColor = dom.style.backgroundColor \|\| defaultColor \|\| 'rgb(255, 255, 255)';
	var matched = bgColor.match(/^rgba?\((\d+), ?(\d+), ?(\d+)(?:, ?\d+)?\)$/);
	var r = Number(matched[1]), g = Number(matched[2]), b = Number(matched[3]);
	var rnd = Math.round(Math.random() * 100) % 3;

	var ret;
	if (rnd === 0) {
	ret = updateColorValue(r, minus_r);
	r = ret.value;
	minus_r = ret.isMinus;
	}
	else if (rnd === 1) {
	ret = updateColorValue(g, minus_g);
	g = ret.value;
	minus_g = ret.isMinus;
	} else {
	ret = updateColorValue(b, minus_b);
	b = ret.value;
	minus_b = ret.isMinus;
	}

	dom.style.backgroundColor = 'rgb(' + r + ', ' + g + ', ' + b + ')';
	};
	var updateColorValue = function(value, isMinus) {
	if(isMinus) {
	value -= 5;
	} else {
	value += 5
	}

	if (value > 255) {
	value -= 10;
	isMinus = true;
	} else if(value < 0) {
	value += 10;
	isMinus = false;
	}
	return {
	value: value,
	isMinus: isMinus
	}
	};
	ready(function() {
	setInterval(function () {
	changeBgColor(document.getElementById('target'));
	}, 1000 / 60);
	});
	})();
	</script>
	</head>
	<body>
	<div id="target" style="width: 100px; height: 100px;"> </div>
	</body>
	</html>