при клике на кнопку выделяется блок желтым цветом
ребят я новичек в js поэтому прошу помощи, или в какую сторону копать, вопрос такой, нужно чтоб при клике на кнопку блок выделялся желтым цветом (не знаю может там таймер нужно прикриплять)
надо чтоб при выборе да в select блок "выберите цвет<br>для ссылки" помечался желтым цветом на 30 секунд <div class="row"> <label for="name">выделить ссылку<br>цветом?<span class="req">*</span></label> <select class="styled-select" id="counts" onChange="show_country();"> <option value="0" selected disable>Нет</option> <option value="1">Да</option> </select> </div> <span id="q1" style="display: none"> <div class="row"> <label for="email">выберите цвет<br>для ссылки<span class="req">*</span></label> <select class="styled-select" name="colors" onchange="this.style.backgroundColor=this.value"> <option style="background-color:#cccccc" value="#cccccc">Серый</option> <option style="background-color:#ffff00" value="#ffff00">Желтый</option> <option style="background-color:#ff0000" value="#ff0000">Красный</option> <option style="background-color:#8099E8" value="#8099E8">Голубой</option> </select></div> </span> |
<div class="row">
<label for="name">выделить ссылку
<br>
<span id="select_color">цветом?</span>
<span class="req">*</span>
</label>
<select class="styled-select" id="counts" onchange="show_country(this.value);">
<option value="0" selected disable>Нет</option>
<option value="1">Да</option>
</select>
</div>
<span id="q1" style="display: none">
<div class="row">
<label for="email">выберите цвет
<br>для ссылки
<span class="req">*</span>
</label>
</div>
</span>
<script>
function show_country(val) {
var el = document.getElementById('select_color'),
timerId;
if (val == 1) {
el.style.backgroundColor = 'yellow';
timerId = setTimeout(function () {
el.style.backgroundColor = 'transparent';
}, 30000)
} else {
el.style.backgroundColor = 'transparent';
clearTimeout(timerId);
}
}
</script>
примерно так
|
Poznakomlus, спасибо))) а не подскажите как можно сделать чтоб желтый цвет плавно исчезал?
|
<style>
.yellow {
background-color:yellow;
}
.none {
background-color:transparent;
-webkit-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
transition-duration: 1.5s;
}
</style>
<div class="row">
<label for="name">выделить ссылку
<br>
<span id="select_color">цветом?</span>
<span class="req">*</span>
</label>
<select class="styled-select" id="counts" onchange="show_country(this.value);">
<option value="0" selected disable>Нет</option>
<option value="1">Да</option>
</select>
</div>
<span id="q1" style="display: none">
<div class="row">
<label for="email">выберите цвет
<br>для ссылки
<span class="req">*</span>
</label>
</div>
</span>
<script>
function show_country(val) {
var el = document.getElementById('select_color'),
timerId;
if (val == 1) {
el.className = 'yellow';
timerId = setTimeout(function () {
el.className = 'none';
}, 30000)
} else {
el.className = 'none';
clearTimeout(timerId);
}
}
</script>
используйте CSS свойство transition |
Poznakomlus, ооо огромное спасибо то что надо)
|
| Часовой пояс GMT +3, время: 12:38. |