특정 단어만 깜빡임 효과주기
본문
안녕하세요
아래와 같이 [오리] 글자가 있으면 [오리 너구리 돼지 사자 감자] 이부분이 전체
깜빡임 효과가 나타나는데
[오리 너구리 돼지 사자 감자] => [오리] 나 [너구리]
만 깜빡이게 수정할수 있나요?
감사합니다.
<p id="Java_Msg">오리 너구리 돼지 사자 감자</div>
var ti = 0;
if("$('#Java_Msg').text():contains('오리')" || "$('#Java_Msg').text():contains('너구리')") {
clearInterval(ti);
ti = setInterval(function () {
$('#Java_Msg').animate({'opacity': 0} ,100 , function () {
$('#Java_Msg').animate({'opacity': 1}, 500);
});
}, 1500);
}
답변 1
<div id="Java_Msg">오리 너구리 돼지 사자 감자</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function Java_Msg_Partial(el) {
var ti = setTimeout(function () {
$(el).animate({'opacity': 0} ,100 , function () {
$(el).animate({'opacity': 1}, 500, function () {
clearTimeout(ti);
Java_Msg_Partial(el);
});
});
}, 1500);
}
if("$('#Java_Msg').text():contains('오리')" || "$('#Java_Msg').text():contains('너구리')") {
var Java_Msg = document.getElementById('Java_Msg');
Java_Msg.innerHTML = Java_Msg.innerHTML.replace(/([^\s]+)/g, '<span class="$1">$1</span>');
Java_Msg_Partial(document.querySelector('#Java_Msg .오리'));
Java_Msg_Partial(document.querySelector('#Java_Msg .너구리'));
}
</script>
안녕하세요.
아래처럼 오리 좋아 공백이 들어가면 인식이 안되네요
그리고 오리 좋아만 색상을 바꾸고 싶은데
style='color:red;font-weight:bold;'
어디에 넣어야 할까요
답변 감사합니다.
if("$('#Java_Msg').text():contains('오리 좋아')"
Java_Msg_Partial(document.querySelector('#Java_Msg .오리 좋아'));
<div id="Java_Msg">오리 좋아 너구리 돼지 사자 감자 감자</div>
<style>
.blink {
animation: blink 2100ms infinite;
}
@keyframes blink {
0% { opacity: 1; }
5% { opacity: 0; }
50% { opacity: 1; }
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var container = document.getElementById('Java_Msg');
var contains_arr = ['오리 좋아', '자 감'];
var contains_result = contains_arr.some((x) => { return $(container).text().indexOf(x) > -1; });
if(contains_result == true) {
contains_arr.forEach((txt) => {
container.innerHTML = container.innerHTML.replace(new RegExp('(?<!>)' + txt + '(?!<)', 'g'), function (args) {
return `<span class="blink">${args}</span>`;
});
});
}
</script>
안녕하세요.
잘 작동하네요.
감사합니다.
