при клике на кнопку выделяется блок желтым цветом
ребят я новичек в 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, время: 14:31. |