<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo Code: How to rotate colors</title>
<style>
p {
text-align: center;
font-size: 100px;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var $message = "BLESSED CHRISTMAS";
var $colors = ["red","blue","yellow","green", "gray","orange","violet", "pink"];
var $color_index;
$(document).ready(function() {
setInterval($show_greetings,100);
});
function $show_greetings() {
$color_index = 0;
$("p").empty();
for (var $i = 0; $i < $message.length; $i++) {
$("p").append("<span id='" + $i + "' style='color:" + $colors[$color_index++] +"'>" + $message.charAt($i) + "</span>");
if ($color_index == $colors.length) {
$color_index = 0;
}
}
$rotate_colors();
}
function $rotate_colors() {
var $last_color = $colors[$colors.length - 1];
for (var $i = $colors.length - 1; $i > 0; $i--) {
$colors[$i] = $colors[$i - 1];
}
$colors[0] = $last_color;
}
</script>
</head>
<body>
<p></p>
</body>
</html>
No comments:
Post a Comment