태터데스크 관리자
목록열기 02 JavaScript (25) form 태그 속성 02 JavaScript 2009/08/31 11:46 http://blog.naver.com/kyumi0705/20087803827 ◎ 폼 태그 : 사용자로 하여금 어떤 입력을 하도록 하는 폼. 1. 폼 태그
white-space
normal : 기본값, 공백의 수에 관계없이 한칸으로 설정
nowrap : 브라우저의 폭이나 문단 길이에 상관 없이 줄바꿈을 하지 않습니다.
pre : <PRE> 태그와 같은 공백을 그대로 인정 합니다.
word-break
break-all:모든 letter 너비에따라 끊기
keep-all:단어별로 끊기
css /* */ 주석처리의 에러
utf-8, 울트라에디트 사용(no bom으로 저장함)
/* */
CSS 주석에 "관(한글)"이 포함되면 IE 6에서 CSS스타일이 적용이 안된다.
물론, 파이어폭스와 IE 7 버전에서는 제대로 나옴.
-------------------------------------------
utf-8의 경우 css 주석 영어처리해야한다 함 -- ??
- UTF-8로 전환한 후에 CSS 주석이 문제인 경우, 이를 UTF-8 NO-BOM 으로 저장하면 깨지는 현상 없음 확인
♤♠♡♥♧¡¿～ˇ˘⌒˚♣⊙◈▣◐◑▒▤▥▨▧▦▩
㉠㉡㉢㉣㉤㉥㉦㉧㉨㉩㉪㉫㉬㉭㉮㉯㉰㉱㉲㉳㉴㉵㉶㉷㉸㉹㉺㉻
ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ
①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮ ½⅓⅔¼¾⅛⅜⅝⅞¹²³⁴ⁿ₁₂₃
∮§ ±×÷≠≤≥∞∴≡≒√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨∑∠⊥ →←↑↓↔⇒⇔
♂♀†‡ ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ
æΔΦΨΩαβγδεζηθικλμνξοπρστυφχψω
㎕㎖㎗ℓ㎘㏄㎣㎤㎥㎦㎛㎟㎠㎡㎢㏊㎍㏈㎧㎨㎰㎶Ω㎮㎯㏆
¶ ℃Å￠￡￥°。‰℉∀∃∏∂
<head>
<script>
var futureyear=2009
var futuremonth=1
var futureday=27
var displaytype="showall"
var digitordate="isdate"
var aftercountdown="stopit"
var digitfrom=100
var digitto=0
var speed=1
var countdownid=new Array()
var futuredate
var nowdate
var resulthoursraw
var resulthours
var resultminutesraw
var resultminutes
var resultsecondsraw
var resultseconds
var p_seconds
var p_minutes
var p_hours
var p_days
var resultsecondsonly
var resultminutesonly
var resulthoursonly
var content
var i_countdown=-1
var countdownid
var step=1
speed*=1000
if (digitfrom>digitto) {step=-1}
if (digitfrom<digitto) {step=1}
var browserinfos=navigator.userAgent
var ns4=document.layers
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)
function setfuturedate() {
futuredate=new Date(futureyear,futuremonth,futureday,0,0,0)
if (digitordate=="isdigit") {content=digitfrom-step }
docountdown()
}
function docountdown() {
if (digitordate=="isdate") {
calculateresults()
formatresults()
displayresults()
setTimeout("docountdown()",speed)
}
else if (digitordate=="isdigit") {
content+=step
displayresults()
if (content==digitto) {
setTimeout("happensafter()",speed)
}
else {
setTimeout("docountdown()",speed)
}
}
}
function firstcountdown() {
if (digitordate=="isdate") {
futuredate=new Date(futureyear,futuremonth,futureday,0,0,0)
calculateresults()
formatresults()
}
else if (digitordate=="isdigit") {
content=digitfrom
}
}
function calculateresults() {
nowdate=new Date()
resultdaysraw=(Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60/24
if (displaytype!="showall") {
resultsecondsonly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000)
resultminutesonly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60)
resulthoursonly=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60)
}
else {
resultdays=Math.floor((Date.parse(futuredate)-Date.parse(nowdate))/1000/60/60/24)
resulthoursraw=(resultdaysraw-resultdays)*24
resulthours=Math.floor((resultdaysraw-resultdays)*24)
resultminutesraw=(resulthoursraw-resulthours)*60
resultminutes=Math.floor((resulthoursraw-resulthours)*60)
resultsecondsraw=(resultminutesraw-resultminutes)*60
resultseconds=Math.floor((resultminutesraw-resultminutes)*60)
}
}
function formatresults() {
if (displaytype=="showall") {
if (resultdays>1) {p_days="일"}
else {p_days="일"}
if (resultminutes<10) {resultminutes="0"+resultminutes}
if (resultseconds<10) {resultseconds="0"+resultseconds}
content=resultdays+" "+p_days+" "+resulthours+"시 "+resultminutes+"분 "+resultseconds +"초"
}
else if (displaytype=="showdays") {
if (resultdays>1) {p_days="days"}
else {p_days="day"}
content=resultdays+" "+p_days
}
else if (displaytype=="showhours") {
content=resulthoursonly+" hrs"
}
else if (displaytype=="showminutes") {
content=resultminutesonly+" min"
}
else if (displaytype=="showseconds") {
content=resultsecondsonly+" sec"
}
}
function happensafter() {
if (aftercountdown=="repeatit") {
if (digitordate=="isdigit") {content=digitfrom-step}
docountdown()
}
if (aftercountdown!="stopit" && aftercountdown!="repeatit") {
document.location.href=aftercountdown
}
}
function displayresults() {
if (ie4) {
for (i=0;i<=countdownid.length-1;i++) {
var thisclock=eval(countdownid[i])
thisclock.innerHTML=content
}
}
else {
for (i=0;i<=countdownid.length-1;i++) {
document.getElementById(countdownid[i]).innerHTML=content
}
}
}
function setcountdown() {
if (ns4 || ie4 || ie5 || ns6 || opera) {
firstcountdown()
i_countdown++
countdownid[i_countdown]="countdown"+i_countdown
document.write("<span id='"+countdownid[i_countdown]+"' style='position:relative'>"+content+"</span>")
}
}
if (ie4 || ie5 || ns6 || opera) {
onload=setfuturedate
}
</script>
</head>
<body>
<script>setcountdown()</script>
남았습니다.
</body>
<!--
**주의 : 맨위 스크립트시작부분
var futureyear=2005
var futuremonth=11
var futureday=31
은 D데이 날짜를 지정하는 부분인데.. var futuremonth=11에서 11은 12월을 나타냅니다
즉, 0 ~ 11까지를 월단위로 작용해야합니다. (0은 1월)
-->
출처 네이버지식
1. 과연 글씨는 어디에 나오는가?
fla파일을 열면, 아무것도 보이지 않습니다. 그런데, ctrl+Enter을 눌러 테스트 무비를 실행하면 숫자가 나옵니다.
이게 어떻게 된 일일까요?
한번 확인해 봅시다!!
맨 아래 레이어의 2프레임에 회색 칠이 되어있죠? 이건 내용이 있다는 뜻입니다.
Dynamic Text 라는 레이어를 보면, 자물쇠 표시가 되어 있습니다. 이 표시를 눌러봅시다.
그리고, 문제의 2프레임을 보면 파란색으로 무언가 있습니다!!
이건 바로 동적 텍스트(dynamic text)라는 것입니다.
동적 텍스트는, 액션을 통하여 자신이 원하는 값을 집어넣을 수 있는 텍스트입니다. 따라서, 현재는 내용이 없지만, 액션을통해서 D-day까지 남은 시간을 표시하게 되는 것이죠.
2. 액션 설명
이제 액션을 한번 봅시다.
맨 위 레이어를 클릭 한 후, 액션창(F9가 단축키)을 열어봅시다. 그러면,
Stage.showMenu = false; 라는 액션이 있습니다.
이 액션은, 오른쪽을 클릭했을 때, 메뉴가 뜨지 않게 해줍니다(기본적으로 나타나는 '설정', 'flash player 정보' 는 나옵니다)
이 액션은 D-day를 나타내는 것과는 관련이 없으나, 매우 많이 쓰이므로 알아둡시다.
이제, 그 아래 레이어(두번째)의 1프레임을 클릭하고 액션창을 봅시다.
d_day = new Date();
d_day.setFullYear(2007, 10, 15);
d_day.setHours(0, 0, 0, 0);
d_day_ms = d_day.getTime();
function add_0(input, decimal) {
for (i=0; i<decimal; i++) {
if (input<Math.pow(10, i) && i != 0) {
input = "0"+input;
}
}
return input;
}
이렇게 적혀있을 겁니다.
이 액션을 해석해 드리겠습니다.
첫 줄: d_day라는 변수를 만든다 (Date 오브젝트), 이 변수는 날짜 속성을 가진다.
둘째 줄~4째줄:D-day의 년도 등의 정보 입력 후, 1970년부터 설정한 정보(시간)까지 흐른 밀리초 단위 시간을
d_day_ms 라는 변수에 저장한다.
다섯째 줄~ 끝 줄: add_0이라는 함수를 만든다.
이 함수는, 값의 앞에 0을 붙여주는 함수입니다. 이제 플래시를 막 하신다면, 설명해도 이해가 잘 안가실 테니 일단 생략하겠습니다.
이제, 2프레임을 봅시다.
present = new Date();
present_ms = present.getTime();
difference = d_day_ms-present_ms;
d_days = Math.floor(difference/(24*60*60*1000));
d_days = add_0(d_days, 3);
difference -= d_days*24*60*60*1000;
d_hours = Math.floor(difference/(60*60*1000));
d_hours = add_0(d_hours, 2);
difference -= d_hours*60*60*1000;
d_minutes = Math.floor(difference/(60*1000));
d_minutes = add_0(d_minutes, 2);
difference -= d_minutes*60*1000;
d_seconds = Math.floor(difference/1000);
d_seconds = add_0(d_seconds, 2);
difference -= d_seconds*1000;
d_ms = difference;
d_ms = add_0(d_ms, 3);
counter = d_days+":"+d_hours+":"+d_minutes+":"+d_seconds+":"+d_ms;
이 내용은 간추려 말하자면, 여러 개의 변수를 만들고, 각각에 앞으로 남은 일,시간,분,초의 정보를 대입하는 것입니다.
자세히 말하면, difference라는 값은 D-day로부터 현재까지 사이의 간격을 밀리초(초/1000)로 나타낸 값을
24*60*60*1000으로 나눠서 몫을 일 수, 나머지를 다시 difference에 대입하고,
또 60*60*1000 으로 나눠서 몫을 시간 수, 나머지를 변수에 저장하고.... 이렇게 반복하는 것입니다.
24는 하루의 시간 수, 60 2개는 각각 1분, 1시간의 초, 분 수, 1000은 1초 안에 있는 밀리초의 수입니다.
이해 안가시면 덧글 ->->
그리고 마지막 줄: counter은 아까 처음에 살펴 본 동적 텍스트의 변수명입니다.
변수명이라고 제가 말한 것은, 그 텍스트가 가지고 있는 변수로서, 그 변수의 값은 곧 텍스트의 값이 됩니다.
따라서 counter = d_days+":"+d_hours+":"+d_minutes+":"+d_seconds+":"+d_ms; 라고 입력하는 것은,
counter라는 변수를 가진 텍스트에 d_days+":"+d_hours+":"+d_minutes+":"+d_seconds+":"+d_ms 를 입력하라는 것입니다.
d_days+":"+d_hours+":"+d_minutes+":"+d_seconds+":"+d_ms 여기서 d_days, d_hours ...는 각각 남은 일,시간,분,초,밀리초의 값이 대입되어 있는 변수입니다. 그리고, : 주변의 ""는, 변수가 아닌 문자열임을 뜻합니다.
마지막으로 3프레임의 액션창을 보면, 이번엔 비교적 간단하게, gotoAndPlay(_currentframe-1);
이렇게 되어있습니다. 이 액션은, 현재의 프레임에서 한프레임 뒤로 가라는 뜻입니다.
_currentframe 은 현재의 프레임을 반환하는 것입니다.
따라서, 이 플래시를 켜면, 2,3프레임을 계속 왔다갔다하면서 시간을 표시하게 됩니다.
왜 굳이 왔다갔다 하게 하는지 궁금하지 않으세요?
그 이유는 바로, 프레임에 넣은 액션은, 프레임에 진입할 때만 실행이 되기 때문입니다.
따라서 만약 2프레임에서 멈춰버린다면, 2프레임에 진입하는 그 순간 남은 시간만 표시되게 됩니다.
그러면 안되겠죠?
