« Генератор случайных цветов на JavaScript »
Описание материала:
Возможно, вы видели автоматически меняющийся цветовой эффект на некоторых элементах веб-страниц. Эта программа называется автоматическим генератором цветов. Это очень полезная программа, чтобы понять силу JavaScript. По сути, эта программа использует для запуска jQuery, это популярная библиотека javascript. Каждый раз, когда вы нажимаете, будет меняться цвет и показывать цветовой код. Это полноценная динамическая программа.
Прежде чем делиться исходным кодом, давайте поговорим о программе. Мы создаем только 2 деления, один для показа цветового кода, другой для показа цвета. Когда мы нажимаем на центральный блок, цвет фона также меняется. Мы используем JQuery, чтобы создать это, это возможно создать в чистом JavaScript, но тогда программа будет очень долго грузиться.
Сначала мы поставили бежевый цвет по умолчанию, затем при щелчке фон изменит цвет. Мы использовали команду Math.random, чтобы создать это. При создании случайного кода менее 7 символов тело будет менять свой собственный цвет, в соответствии со случайным числом.
Вы должны создать 3 файла для этой программы. Один для HTML, один для CSS и один для JS (JavaScript). Выполните следующие шаги, чтобы создать эту программу легко и без ошибок.
HTML код:
Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<body>
<div class="ufive_brc">
<div class="ufive_br_c"></div>
#f3be81
</div>
</body>
<body>
<div class="ufive_brc">
<div class="ufive_br_c"></div>
#f3be81
</div>
</body>
CSS код:
Код
body {
margin: 0;
padding: 0;
background: #f3be81;
}
.ufive_brc {
padding: 10px;
cursor: pointer;
position: absolute;
font-family: Cuprum;
text-align: center;
background: #fff;
color: #f3be81;
width: 400px;
border-radius: 30px;
letter-spacing: 2px;
line-height: 30px;
height: 30px;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -200px;
font-size: 14px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.ufive_br_c {
position: absolute;
float: left;
width: 20px;
height: 20px;
background: #f3be81;
border-radius: 50%;
margin: 5px;
margin-left: 20px;
}
.rgb {
float: right;
padding-right: 20px;
}
margin: 0;
padding: 0;
background: #f3be81;
}
.ufive_brc {
padding: 10px;
cursor: pointer;
position: absolute;
font-family: Cuprum;
text-align: center;
background: #fff;
color: #f3be81;
width: 400px;
border-radius: 30px;
letter-spacing: 2px;
line-height: 30px;
height: 30px;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -200px;
font-size: 14px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.ufive_br_c {
position: absolute;
float: left;
width: 20px;
height: 20px;
background: #f3be81;
border-radius: 50%;
margin: 5px;
margin-left: 20px;
}
.rgb {
float: right;
padding-right: 20px;
}
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 + ")";
$(".ufive_brc").html(
"<" +
"div class=" +
"'" +
"ufive_br_c" +
"'" +
">" +
"<" +
"/" +
"div" +
">" +
newcolor +
"<span class='rgb'>" +
cstring +
"</span>"
);
$("body").css({
background: newcolor
});
$(".ufive_brc").css({
color: newcolor
});
$(".ufive_br_c").css({
background: cstring
});
}
var newcolor;
function color() {
newcolor = "#" + ((Math.random() * 0xffffff) << 0).toString(16);
if (newcolor.length < 7) {
color();
}
}
$(".ufive_brc").click(colapply);
colapply();
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 + ")";
$(".ufive_brc").html(
"<" +
"div class=" +
"'" +
"ufive_br_c" +
"'" +
">" +
"<" +
"/" +
"div" +
">" +
newcolor +
"<span class='rgb'>" +
cstring +
"</span>"
);
$("body").css({
background: newcolor
});
$(".ufive_brc").css({
color: newcolor
});
$(".ufive_br_c").css({
background: cstring
});
}
var newcolor;
function color() {
newcolor = "#" + ((Math.random() * 0xffffff) << 0).toString(16);
if (newcolor.length < 7) {
color();
}
}
$(".ufive_brc").click(colapply);
colapply();
Демонстрация
Демонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
Теги к материалу:
Поделиться в соц. сетях:
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!
Комментариев: 0
| |