Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.06.2019, 21:19
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Как вместо рандомного показа текста, сделать рандомный показ картинок?
Код выводит рандомно названия стран в виде текста: UK, US, RU, а как сделать, чтобы этот же код вместо текста выводил картинки, например http://сайт.ру/uk_flag.png и т.д.

Пробовал вставлять <img src=""> выдает ошибку.

var countryRand;
        var countries = ['UK', 'US', 'RU'];

        countryRand = rand(0,3);


domains.push({
            country:countries[countryRand],
           })


' + this.country + '
Ответить с цитированием
  #2 (permalink)  
Старый 09.06.2019, 22:57
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

var countries = ["GB", "US", "RU"].map(v => v.replace(/[a-z]/gi, match => String.fromCodePoint(match.toLowerCase().codePointAt() + 127365)));

var country = countries[Math.random() * countries.length | 0];
alert(country);


Или можно сразу объявить..

var countries = ["🇬🇧", "🇺🇸", "🇷🇺"];

Последний раз редактировалось Malleys, 09.06.2019 в 23:08.
Ответить с цитированием
  #3 (permalink)  
Старый 09.06.2019, 23:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Malleys,
1. если не секрет, что происходит в строке 1 пост #2?
2. как это связано с выводом картинки?
Ответить с цитированием
  #4 (permalink)  
Старый 09.06.2019, 23:21
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

рони, не секрет... в Юникоде есть алфавит, точно такой же, как английский, но его буквы являются региональными индикаторами... Когда две такие буквы встречаются рядом, и они означают страну, то они образуют флаг https://en.m.wikipedia.org/wiki/Regi...dicator_Symbol

2. Вы можете использовать шрифт... вот пример c Noto Color Emoji https://codepen.io/Malleys/pen/xBpWLw?editors=0100

Последний раз редактировалось Malleys, 10.06.2019 в 04:57.
Ответить с цитированием
  #5 (permalink)  
Старый 09.06.2019, 23:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Malleys,
спасибо за ответ.
Ответить с цитированием
  #6 (permalink)  
Старый 10.06.2019, 08:16
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Malleys, этот код выдает просто всплывающее окно с текстами: GB, US, RU, а не флаги.
Ответить с цитированием
  #7 (permalink)  
Старый 10.06.2019, 08:29
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Lefseq
Malleys, этот код выдает просто всплывающее окно с текстами: GB, US, RU, а не флаги.
Все правильно, это флаги, проверьте кодовые точки. Если вы видите флаги как чёрно-белый текст, то значит вы используете шрифт Segoe UI Emoji в котором так прорисованы региональные индикаторы! Вы можете явно указать какой-нибудь шрифт с хорошо прорисованными символами...

Вот пример с подключённым шрифтом...

<p id="flag"></p>
<button onclick="showRandomFlag()">Показать следующий случайный флаг</button>
<style>
@font-face {
	font-family: "Noto Color Emoji";
	src: url("https://cors-anywhere.herokuapp.com/https://github.com/googlei18n/noto-emoji/raw/master/fonts/NotoColorEmoji.ttf");
}

html {
	font: 300% "Apple Color Emoji", "Android Emoji", "Twemoji Mozilla", "Noto Color Emoji";
}
</style>
<script>
function showRandomFlag() {
    var countries = ["GB", "US", "RU"].map(v => v.replace(/[a-z]/gi, match => 
    String.fromCodePoint(match.toLowerCase().codePointAt() + 127365)));

    var country = countries[Math.random() * countries.length | 0];
    document.getElementById("flag").textContent = country;

}
showRandomFlag();
</script>


Если вы хотите использовать шрифт из примера, то скачайте его к себе... https://github.com/googlei18n/noto-e...ColorEmoji.ttf

Последний раз редактировалось Malleys, 10.06.2019 в 08:35.
Ответить с цитированием
  #8 (permalink)  
Старый 10.06.2019, 09:09
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Malleys, Не получается применить ваш вариант к коду который у меня имеется. Все же хотелось бы попроще, просто прописать картинки (флаги) которые бы выводились рандомно. Проще говоря мне бы понять, как вот это:

<img src="">


Сунуть вот сюда, вместо UK, US, RU

var countryRand;
        var countries = ['UK', 'US', 'RU'];

        countryRand = rand(0,3);
Ответить с цитированием
  #9 (permalink)  
Старый 10.06.2019, 09:41
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Lefseq
Malleys, Не получается применить ваш вариант к коду который у меня имеется.
Почему это такая проблема для вас?

Если у вас нет клавиатуры с эмодзи (может стоит перейти на современную ОС) то вы можете скопировать флаги, например, из этой статьи в Wikipedia https://en.m.wikipedia.org/wiki/Regi...dicator_Symbol

Не стоит использовать в данном случае элемент <img>, он предназначен для изображении, а не для текста. Текст не следует запихивать в картинки, такое невозможно искать!

Сообщение от Lefseq
Malleys, Не получается применить ваш вариант к коду который у меня имеется.
Здесь нет ничего необычного. 1) Подключаете к сайту шрифт 2) Используете необходимые символы

Посмотрите ещё раз пост №7, на всякий случай, вот ещё раз шрифт с флагами https://github.com/googlei18n/noto-e...ColorEmoji.ttf

UPD Я не знаю, что вы хотите сделать, но даже если скопировать флаги из уикипедии, всё получается... https://codepen.io/Malleys/pen/pXzPvP?editors=1100

UPD2 Lefseq, большое вам спасибо, что спросили такое, благодаря вам, я нашёл цветной шрифт с флагами BabelStone Flags, в котором прорисованы качественно флаги, и он небольшого размера! Однозначно 💯 👍 👍 И в нём даже поддерживаются флаги из ISO 3166-2 🚀

Последний раз редактировалось Malleys, 10.06.2019 в 10:26.
Ответить с цитированием
  #10 (permalink)  
Старый 10.06.2019, 10:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Malleys,
почему ссылка на шрифт работает только через сторонний сервер, строка 6 пост #7?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать поворот DIV клонов alexgrenn Элементы интерфейса 4 18.04.2016 21:58
Slider - как сделать вместо цифр, кружки? salofun Общие вопросы Javascript 7 04.04.2014 15:56
Как сделать растягивающийся слайд вместо фиксированного? Danilkin500 Общие вопросы Javascript 0 18.11.2013 17:51
Как сделать разделителем у массива ";" вместо "," FRIE Общие вопросы Javascript 4 16.08.2011 15:21
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06