Разноцветный текст на JavaScript
Предлагаем Вам ознакомиться со скриптом, позволяющим разукрасить указанный текст. Данный скрипт позволяет выделить каждую букву или слово случайным цветом, в результате чего у Вас получится разноцветный текст. Для разнообразия данный скрипт также может изменять случайным образом и размер букв или слов.
Обратите внимание на текст, который расположен ниже. Данный текст был разукрашен при помощи нашего скрипта и если Вы обновите страницу, то цвета и размер букв изменятся.
Данный скрипт разноцветного текста можно использовать разово для генерации случайного оформления текста и полученный результат скопировать себе на сайт, а можно вставить на сайт и тогда при каждом обновлении странички оформление текста будет разным.
Для получения точно такой же формы для получения цветного текста, как и в примере, показанном выше, используйте следующий код:
<span id="result"></span>
<form name="color_form" action="javascript:char_random()">
<textarea name="string" rows="4" cols="55">
Ваш текст, который нужно разукрасить
</textarea>
<br>
<select name="whois_rand">
<option value="">Разукрасить буквы</option>
<option value=" ">Разукрасить слова</option>
</select>
<input type="submit" value="Поехали">
<br><br>
<textarea name="res_code" rows="4" cols="55"></textarea>
</form>
Далее необходимо добавить на страничку JavaScript код, который делает всю работу по выбору случайного цвета и размера для указанного в форме текста:
<script type="text/javascript">
function char_random() {
var obj = document.color_form;
var elem = obj.string.value;
var separator = "";
var exit_str = "";
var colors = new Array("00", "11", "22", "33", "44", "55",
"66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "FF");
elem = elem.split(obj.whois_rand.options[obj.whois_rand.selectedIndex].value);
for (var n=0;n<=(elem.length-1);n++) {
if (elem[n]==" ") exit_str += " ";
if (elem[n]!=" ") {
separator = obj.whois_rand.options[obj.whois_rand.selectedIndex].value;
var col1 = Math.round(Math.random()*(colors.length-1));
var col2 = Math.round(Math.random()*(colors.length-1));
var col3 = Math.round(Math.random()*(colors.length-1));
var size = Math.round(Math.random()*4)+3;
exit_str += "<font color=\"#" + colors[col1] + colors[col2] + colors[col3] +
"\" size=\"" + size + "\">" + elem[n] + "</font>" + separator;
}
}
obj.res_code.value = exit_str;
document.getElementById("result").innerHTML = exit_str;
}
char_random();
</script>
Если Вам не нужна данная форма для генерации разноцветного текста, но Вы планируете использовать скрипт для получения разноцветного текста на своем сайте, то разместите следующий код в начале вашей странички:
<script type="text/javascript">
function char_random(str) {
var elem = str.split("");
var exit_str = "";
var colors = new Array("00", "11", "22", "33", "44", "55",
"66", "77", "88", "99", "AA", "BB", "CC", "DD", "EE", "FF");
for (var n=0;n<=(elem.length-1);n++) {
if (elem[n]==" ") exit_str += " ";
if (elem[n]!=" ") {
var col1 = Math.round(Math.random()*(colors.length-1));
var col2 = Math.round(Math.random()*(colors.length-1));
var col3 = Math.round(Math.random()*(colors.length-1));
var size = Math.round(Math.random()*4)+3;
exit_str += "<font color=\"#" + colors[col1] + colors[col2] + colors[col3] +
"\" size=\"" + size + "\">" + elem[n] + "</font>";
}
}
document.write(exit_str);
}
</script>
В том месте, где Вы планируете выводить разукрашенный посимвольно цветной текст, используйте следующий код:
<script type="text/javascript">
char_random("Ваша фраза, которую надо разукрасить");
</script>
Но учтите, что не стоит использовать данный код для основного содержимого сайта и больших текстов, т.к. это очень затруднит чтение.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.