ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Генератор случайных цветов по клику

Генератор случайных цветов по клику

Генератор случайных цветов по клику
Бывает так, что иногда сложно выбрать оттенок цвета для фона, что теперь при использовании генератора цвета вы сможете выбрать нужный оттенок. Как раз в этой статье как можно создать генератор случайных цветов, который подключен в JavaScript. Или сказать другими и понятными словами, то на сайте есть тема по установке генератора случайного цвета, и все это при помощи JavaScript.

Вероятно вы не раз встречали автоматические механизмы, который по клику меняет цветовой эффект на некоторых элементах веб-страниц. Пришлось немного поискать в поисковой системе Google, что-то аналогичное, где безусловно они есть, но очень мало генераторов на эту тему. Но главное, что в большой части аналоги программы на самом деле не работает должным образом.

По сути, эта программа использует для запуска jQuery, это популярная библиотека javascript, где при каждом разом, когда вы нажимаете по элементу, то будет меняться цвет, и показывать код цвета. Это полноценная динамическая программа, где не нужно изначально прописывать оттенки цвета разные цвета кода, где только один код цвета идет по умолчанию.

После установки так выглядят все элементы:

Рандомный показ палитры цвета на JavaScript

Приступаем к установке:

HTML

Эта программа называется автоматическим генератором цветов, которую можно выставить как на отдельную страницу, так расположить в отдельный блок.

Код
<div class="keleaselocasing">
<div class="keleaselocasing1"></div>
#d21857
</div>

CSS

Код
body{
margin:0;
padding:0;
background: #d21857;
}
.keleaselocasing {
  padding: 10px;
  cursor: pointer;
  position: absolute;
  font-family: Roboto;
  text-align: center;
  background: #f9f9f9;
  color: #e91e63;
  width: 400px;
  border-radius: 25px;
  letter-spacing: 2px;
  line-height: 25px;
  height: 29px;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -200px;
  font-size: 15px;
  box-shadow: 0 0 18px rgba(37, 35, 35, 0.3);
  font-weight: bold;
  border: 2px solid #c7c7c7;
}
.keleaselocasing1{
position: absolute;
float:left;
width:20px;
height:20px;
background: #d21857;
border-radius: 100%;
margin:5px;
margin-left: 15px;
}
.rgb{
float:right;
  padding-right:15px;
}

JS

Код
var r,g,b,cstring;
function colapply(){
color();
r=newcolor.slice(1,3);
g=newcolor.slice(3,5);
b=newcolor.slice(5,7);
r=parseInt(r,16);
g=parseInt(g,16);
b=parseInt(b,16);
   
cstring="rgb("+r+","+g+","+b+")";
$(".keleaselocasing").html("<"+"div class="+"'"+"keleaselocasing1"+"'"+">"+"<"+"/"+"div"+">"+newcolor+"<span class='rgb'>"+cstring+"</span>");
$("body").css({
"background":newcolor
});
$(".keleaselocasing").css({
"color":newcolor
});

$(".keleaselocasing1").css({
"background":cstring
});

}
var newcolor;
function color(){
newcolor="#"+(Math.random()*0xFFFFFF<<0).toString(16);
if(newcolor.length<7){
color();
}
}
$(".keleaselocasing").click(colapply);
colapply();

Этот генератор прост для понимания, если у вас есть некоторые знания JavaScript, то вы также можете использовать функцию этой программы в другой, просто вы должны использовать свой все свои навыки и безусловно знание, но, а пока остается рандомный показ палитры цвета в двух вариантах.

Демонстрация
04 Июля 2019 Загрузок: 1 Просмотров: 1529 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar