jquery dom blink effect

jquery를 fadeTo() 함수를 이용하여 html 객체의 문자를 깜빡임(blink, flash) 처리하기.

샘플코드


# html
<label style="color:red;">동의합니다.</label>
<button onclick="start()">시작</button>
<button onclick="stop()">멈춤</button>

#javascript
/**
* dom flash effect
*/
function start() {
var opacity = $('label').css('opacity');
$('label').fadeTo('slow', (opacity%1==0)?0.3:1.0, function() {
start(); //재귀호출이 포인트
});
}

/**
* clear dom flash effect
*/
function stop() {
$('label').stop().fadeTo('fast', 1.0);
}

Javascript 간단한 포맷 함수 세 가지

/**

 * 포맷 지정 유틸

 */

var format = {

Currency : function(arg) {

arg *= 1;

if(0 == arg) return 0;

else {

arg += '';

arg = arg.split('').reverse().join('').replace(/(\d{3})/g, "$1,").split('').reverse().join('');

if(0 == arg.indexOf(",")) {

arg = arg.substring(1);

}

return arg;

}

},

Date : function(arg) {

if(8 == arg.length) {

return arg.substring(0,4) + "-" + arg.substring(4,6) + "-" + arg.substring(6);

} else if(6 == arg.length) {

return arg.substring(0,4) + "-" + arg.substring(4,6);

} else {

return arg;

}

},

Rate : function(arg) {

arg *= 1;

if(0 == arg) return 0;

else return arg.toFixed(5).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") * 1;

}

};

사용법

1. format.Currency(arg) : 금액 포맷. 문자열 형태의 숫자에 세 자리마다 콤마 지정.

2. format.Date(arg) : 날짜형 포맷.

3. format.Rate(arg) : 실수형 포맷. 소수점 이하 자릿수는 toFixed(n) 함수의 인수로 지정.

Javascript 함수 정의 방법

Javascript function 정의 방법은 두 가지가 있다.

함수 선언식과 함수 표현식

아래 두 예제는 'Javascript 함수 다시보기'의 본문에서 일부를 발췌한 내용이다.

1. 함수 선언식

// 함수선언식(function declaration)
function company() {  
    /* 실행코드 */
}; 

2. 함수 표현식

// 기명 함수표현식(named function expression) 
var company = function company() {  
    /* 실행코드 */
}; 

// 익명 함수표현식(anonymous function expression)
var company = function() {  
    /* 실행코드 */
};

// 기명 즉시실행함수(named immediately-invoked function expression)
(function company() {
    /* 실행코드 */
}());

// 익명 즉시실행함수(immediately-invoked function expression)
// Javascript 대가이신 더글라스 클락포트의 권장 표기법
(function() {
    /* 실행코드 */
}());

// 익명 즉시실행함수(immediately-invoked function expression)
(function() {
    /* 실행코드 */
})();

※ 출처 : 넥스트리소프트