입력박스에 글자가 흘러갑니다.

Java Script 2012. 1. 3. 21:23



<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>

<SCRIPT language = "JavaScript">

var max = 0;
var initsw = 0;
var pos = 0;

function textticker()
{
 if(initsw ==0)
 {
  textlist = "안녕하세요. 문자가 흘러가는 스크립트입니다.";
  max = textlist.length; // textlist글자 길이를 max에 넣습니다.
  k = (document.form1.textfeld.size/textlist.length)+1; // k는 textfield크기 만약에 20이고 글자길이가 10이면 2+1은 3이 되겠죠.

  for(i=0;i<=k;i++)
   textlist+= "   " +textlist; 
   initsw = 1;
 }

 document.form1.textfeld.value = textlist.substring(pos,pos+document.form1.textfeld.size);

 if(pos++ == max)
 {
  pos = 0;
  setTimeout("textticker()", 2000);
 }
 else
  setTimeout("textticker()", 200);
}

</SCRIPT>

 </HEAD>

 <BODY onload = "textticker()">
 <FORM name = "form1" method = "post">
 <p align = "center">
 <INPUT type = "text" name = "textfeld" size = "60" ></p>
 </FORM>

 <SCRIPT language = "JavaScript">

 

</SCRIPT>
 
 </BODY>
</HTML>

 

  재미있고 좀 유용할거 같아서 퍼왔습니다.

출처 : 블루비

'Java Script' 카테고리의 다른 글

체크해야 입력할수 있는 폼  (0) 2011.12.29
비밀번호 보이기 /숨기기  (0) 2011.12.25
BMI 계산하기  (0) 2011.12.22
지정한 시간 후에 함수 실행  (0) 2011.12.18
F1누르면 도움말 불러오기  (0) 2011.12.13


설정

트랙백

댓글

체크해야 입력할수 있는 폼

Java Script 2011. 12. 29. 18:10



  안녕하세요?

  오늘은 체크박스를 체크해야 텍스트상자에 입력할 수 있는 소스입니다.

 

<script language="JavaScript">
<!--

function enable_text(status)      // status가 true이면 disabled=true가 되어서 입력할수 있고 false면 입력할수 없습니다.
{
status=!status;   // status를 반대로 만들어 줍니다. true면 false로 false면 true로
document.f1.other_text.disabled = status;  // 텍스트 상자를 입력할수 있게 또는 없게 만들어줍니다.
}
//-->
</script>

<body onload=enable_text(false);>   // 처음 로딩되었을때는 false로 입력할수 없게 만들어줍니다.

<form name=f1 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)" >입력할려면 체크하세요
<input type=text name=other_text>
</form>

 

  주석을 보시면 이해가 빠르실 겁니다.

 



 

실행화면입니다.

  그럼 다음시간에 또 만나요~

'Java Script' 카테고리의 다른 글

입력박스에 글자가 흘러갑니다.  (0) 2012.01.03
비밀번호 보이기 /숨기기  (0) 2011.12.25
BMI 계산하기  (0) 2011.12.22
지정한 시간 후에 함수 실행  (0) 2011.12.18
F1누르면 도움말 불러오기  (0) 2011.12.13


설정

트랙백

댓글

비밀번호 보이기 /숨기기

Java Script 2011. 12. 25. 16:00



  안녕하세요?

  오늘은 비밀번호를 숨기기 또는 보기로 토글하는 소스입니다. 저도 전부는 다 이해못하겠고 대충만 알수 있습니다. 근데 이 소스가 어디에 사용가능할지는 잘 모르겠네요. 

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>블루비</title>
</head>
<body>
<html>
<head>
<style>
body,input{font:menu}
</style>
</head>
<body>
<form method="POST" action="addcheck.asp" name="forms">
<span id=box><input type="password" name="password" size="20" value="비밀번호를입력"></span> <!-- 패스워드 텍스트 박스를 만듭니다 -->
<span id=click><a href="javascript:ps()">보기</a></span> <!-- 보기를 클릭하면 ps()함수를 호출합니다 -->
<script language="JavaScript">
function ps(){
if (this.forms.password.type="password")
box.innerHTML="<input type=\"html\" name=\"password\" size=\"20\" value="+this.forms.password.value+">";
click.innerHTML="<a href=\"javascript:txt()\">숨기기</a>"} 

<!-- box.innerHTML로 패스워드 텍스트 박스를 생성하고 txt()함수를 클릭시 호출합니다. -->
function txt(){
if (this.forms.password.type="text")
box.innerHTML="<input type=\"password\" name=\"password\" size=\"20\" value="+this.forms.password.value+">";
click.innerHTML="<a href=\"javascript:ps()\">보기</a>"}

<!-- 위와 반대되는 기능을 합니다. -->
</script></form>
</body>
</html> </body>
</html> 

 

  실행은 직접 해보시고 그럼 다음시간에 또 만나요~

'Java Script' 카테고리의 다른 글

입력박스에 글자가 흘러갑니다.  (0) 2012.01.03
체크해야 입력할수 있는 폼  (0) 2011.12.29
BMI 계산하기  (0) 2011.12.22
지정한 시간 후에 함수 실행  (0) 2011.12.18
F1누르면 도움말 불러오기  (0) 2011.12.13


설정

트랙백

댓글

BMI 계산하기

Java Script 2011. 12. 22. 14:06



  안녕하세요?

  오늘은 BMI즉 비만도 계산하는 소스입니다. 비만도는  체중을 키로 나눈값입니다. 이게 높으면 비만이지요. 정상은 20-24인가 그렇습니다. 그럼 소스를 보시죠.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
function bmi() {
    var w = parseFloat(document.frm.txtWeight.value);
    var h = parseInt(document.frm.txtHeight.value);
    var errors='';
  if (document.frm.opHeight.value == "Inch") {h = h * 2.54;}
  if (document.frm.opWeight.value == "Lb") {w = w * 0.4536;}
  if ((w < 20)||(w > 200)||isNaN(w)){errors+='몸무게를 정확히 입력하세요.\n';}
  if ((h < 100) || (h > 250)||isNaN(h)){errors+='키를 정확히 입력하세요.\n';}
  if (errors){
      alert(errors);
     return 0;}
    document.getElementById('feedback').innerHTML = 'Your BMI is ' + Math.round(10*((w * 10000 / (h * h))))/10;
}
function resetAll(){
 document.getElementById('feedback').innerHTML="";
return true;
}
</script>
</head>
<body>

<form name="frm" id="cal_frm" style="width:300px; margin:10px 10px 20px 10px;" onsubmit="return false">
<table id="cal_data">
<tr>
 <td style="padding-left:5px;">키:</td>
 <td><input class="cal_text" type="text" name="txtHeight" ></td>
 <td><select class="cal_option" name="opHeight">
  <option value="Cm">Cm</option>
  <option value="Inch">Inch</option>
  </select>
 </td>
</tr>
<tr>
 <td style="padding-left:5px;">몸무게:</td>
 <td><input class="cal_text" type="text" name="txtWeight" ></td>
 <td><select class="cal_option" name="opWeight">
  <option value="Kg">Kg</option>
  <option value="Lb">Pound</option>
  </select>
 </td>
</tr>
<tr><td colspan="3" id="feedback" style="padding:10px 0 20px 0; border:none; font-weight:600; color:#555555; font-family:tahoma;"></td></tr>
<tr>
 <td colspan="2" style="border:none; padding-bottom:10px;">
 </td>
</tr>
</table>
</form>


<h2>BMI for adult:</h2>
<div style="width:100%;">
 <table border="1px" width="350px;" cellpadding="2px" style="font-size:12px; border-collapse:collapse; border-color:Gray; background-color:White;">
  <tr>
   <td style="padding-left:10px;" ><b>BMI</b></td>
   <td style="padding-left:10px;"><b>상태</b></td>
  </tr>
  <tr>
   <td style="padding-left:10px;">18.5밑으로</td>
   <td style="padding-left:10px;">저체중(밥좀많이드삼)</td>
  </tr>
  <tr>
   <td style="padding-left:10px;">18.5 ~ 24.9</td>
   <td style="padding-left:10px;">표준</td>
  </tr>
  <tr>
   <td style="padding-left:10px;">25 ~ 29.9</td>
   <td style="padding-left:10px;">비만위험(운동 열심히 하세요)</td>
  </tr>
  <tr>
   <td style="padding-left:10px;">30.0 또는 이상</td>
   <td style="padding-left:10px;">비만입니다.(살 안빼면 수명단축됩니다.)</td>
  </tr>
 </table>
</div>

</body>
</html>

 

어려운거 같지만 따져보면 그렇게 어렵지도 않습니다.

  <input onclick="bmi()" class="cal_button" type="button" value="계산" >&nbsp;<input onclick="resetAll()" type="reset" value="다시입력" class="cal_button" >
로 계산 버튼을 누르면 bmi함수를 호출하고 다시입력버튼을 누르면 resetAll함수를 호출합니다.

function bmi() {
    var w = parseFloat(document.frm.txtWeight.value);
    var h = parseInt(document.frm.txtHeight.value);
    var errors='';
  if (document.frm.opHeight.value == "Inch") {h = h * 2.54;}
  if (document.frm.opWeight.value == "Lb") {w = w * 0.4536;}
  if ((w < 20)||(w > 200)||isNaN(w)){errors+='몸무게를 정확히 입력하세요.\n';}
  if ((h < 100) || (h > 250)||isNaN(h)){errors+='키를 정확히 입력하세요.\n';}
  if (errors){
      alert(errors);
     return 0;}
    document.getElementById('feedback').innerHTML = 'Your BMI is ' + Math.round(10*((w * 10000 / (h * h))))/10;
}
bmi함순데요.  w,h는 폼에 텍스트박스에 값을 parseint, parseFloat해서 숫자로 변환시킵니다. int는 정수형, Float은 실수형이죠. 그다음에 값변환을 하지요. value값이 inch이면 h키에다가 2.54를 곱하고 체중값이 Lb파운드면 체중에다가 0.4536을 곱합니다. 그다음에 체중이 너무 작거나 크거나 키가 너무 작거나 크면 에러를 출력합니다. 그리고 ,BMI를 계산하지요. Math.round즉 반올림하라는 거지요. w/(h*h)에 다가 10000을 곱한게 BMI입니다.

  이상 이해가 가시는지요? 실행은 직접 해보시기 바랍니다. 그럼 다음시간에 또 만나요~



설정

트랙백

댓글

지정한 시간 후에 함수 실행

Java Script 2011. 12. 18. 17:09




  안녕하세요?

  오늘은 페이지 로드된 후 지정된 시간후에 경고창을 출력하는 소스입니다. 예를들어 페이지 읽고 5초후에 "즐거운 하루되세요~"라고 창을 띄울려고 하는 거지요.

 

<HTML>
<HEAD>
<TITLE>http://www.blueb.co.kr</TITLE>
<SCRIPT language="JavaScript">
<!--
function startAlert(){
    alert("즐거운 하루되세요~");
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="setTimeout('startAlert()',5000)">
3초후 경고창이 실행됩니다. (1000 = 1초)

</BODY>
</HTML>

 

  소스인데요. BODY부분에 onLoad 즉 로드되었을때 setTimeout함수를 호출합니다. 이 함수는 시간을 지정해서 지정한 시간후에 지정한 함수를 실행하는거 같네요. 예에서는 startAlert()라는 함수를 5000, 1000이 1초니깐 5초후에 실행하라는 거지요. 이해되시죠? 실행은 직접 해보시구요 다음시간에 또 만나요~

'Java Script' 카테고리의 다른 글

비밀번호 보이기 /숨기기  (0) 2011.12.25
BMI 계산하기  (0) 2011.12.22
F1누르면 도움말 불러오기  (0) 2011.12.13
버튼을 누르면 사이트로 이동  (0) 2011.10.14
들어오고 나갈때 인사하는 스크립트  (0) 2011.10.10


설정

트랙백

댓글

F1누르면 도움말 불러오기

Java Script 2011. 12. 13. 22:24




  안녕하세요?

  오늘은 f1키를 눌렀을때 도움말 문서로 이동하는 소스입니다.

 

<script language="JavaScript">
function yourhelp() {
    location.href("test.html");
    event.returnValue = false;
}
</script>

<body onHelp="yourhelp()">

F1키를 사알짝 눌러보세요..!

 

    location.href("test.html"); 로 f1키를 눌렀을때 보여줄 파일을 링크합니다. 물론 test.html 파일을 미리 만들어서 같은 폴더에 저장해야 겠죠.

 

 

  <body onHelp="yourhelp()"> 이 루틴은 onHelp 즉 도움말 버튼인 F1을 눌렀을때 yourhelp함수를 호출하라는 것입니다.

 

  쉽죠? 실행은 직접 해보시기 바랍니다. F1을 누르면 test.html이 불러져 옵니다.

'Java Script' 카테고리의 다른 글

BMI 계산하기  (0) 2011.12.22
지정한 시간 후에 함수 실행  (0) 2011.12.18
버튼을 누르면 사이트로 이동  (0) 2011.10.14
들어오고 나갈때 인사하는 스크립트  (0) 2011.10.10
웹문서에 주소창 넣기  (0) 2011.10.07


설정

트랙백

댓글

버튼을 누르면 사이트로 이동

Java Script 2011. 10. 14. 21:32


  안녕하세요?
  오늘은 버튼을 만들어 클릭하면 지정한 사이트로 이동하는 스크립트입니다.

<form>
<input type="button" value="자바스크립트 버튼 (1)" onClick="location.href='http://www.jasko.co.kr'">
</form>

<!-- 폼을 만들고 input type="button"으로 버튼을 만들어서 value의 값으로 버튼위에 표시하고 onClick 즉 클릭시에는 location.href 사이트로 이동하라는 내용입니다. -->

<form action='http://www.jasko.co.kr'>
<input type="submit" VALUE="자바스크립트 버튼 (2)">
</form>

<!-- 이 폼에는 action을 주어서 아래의 submit버튼이 눌러지면 action에서 지정한 사이트로 이동하는 것입니다. -->

자세한 내용은 주석을 참고하시기 바랍니다.
그럼 다음시간에 또 만나요~



설정

트랙백

댓글

들어오고 나갈때 인사하는 스크립트

Java Script 2011. 10. 10. 22:03


  안녕하세요?
  오늘은 사용자가 들어왔을때 그리고 나갈때 인사를 하는 스크립트입니다.

<script languge="javascript">
<!--
var str = prompt("귀하의 성명은요?:", "Bond Girl")
function welcome() {                               // onLoad즉 페이지가 읽혀졌을때 실행되는 함수
 alert("감사합니다, " + str + " 님, 천천히 놀다 가세요");
}
function goodbye() {                               // onunLoad 즉 페이지를 나갈때 실행되는 함수
 alert("다음에 또 오실거죠? " + str + " 님n베리베리 쌩큐여~");
}// -->
</script>

<body onLoad="welcome()" onunLoad="goodbye();">   
<!-- onLoad시에는 welcome()함수를 onunLoad시에는 goodbye() 함수를 실행합니다. -->
<script language="JavaScript">document.write(str);</script>
<!-- 위의 prompt함수에서 이름을 입력받아서 str에 저장한 것을 화면에 쓰는 것입니다. -->

설명은 옆의 주석을 참고하시면 되겠습니다. 그럼 결과화면을 보시고 다음시간에 또 만나요~

 

첫화면에서 이름을 묻습니다. 디폴트는 Bond Girl로 되어있네요.

이름 입력하고 들어왔을때 처음 인사입니다.

페이지를 나가려고 할때 인사입니다.

'Java Script' 카테고리의 다른 글

F1누르면 도움말 불러오기  (0) 2011.12.13
버튼을 누르면 사이트로 이동  (0) 2011.10.14
웹문서에 주소창 넣기  (0) 2011.10.07
버튼누르면 메시지 출력  (0) 2011.10.04
나이입력받아서 처리  (0) 2011.10.02


설정

트랙백

댓글

웹문서에 주소창 넣기

Java Script 2011. 10. 7. 22:09


  안녕하세요?
  오늘은 웹문서에 주소창 넣기 소스입니다. 간단하게 되어 있습니다.

<FORM Name="myForm">
<INPUT TYPE="text" Name="URL" Value="http://" size=30>
<INPUT TYPE="button" Value=" 이동하기 " onClick="location.href = this.form.elements[0].value">
</FORM>

text상자에 value가 http://니깐 상자에 디폴트로 나타나게 됩니다. 그리고 아래에 버튼에서 onClick할때 즉 버튼을 누를때 location.href 즉 url이 this.form 이폼의 elements[0] 구성요소 0번이니깐 여기서 구성요소는 text필드밖에 없으니깐 text필드를 말하는 겁니다. 그리고 value니깐 text필드의 값을 얘기하는 거지요. 쉽게 말하면 text필드 값으로 url을 삼아서 이동하라는 얘깁니다.

위의 그림처럼 실행하면 되는데 텍스트상자안에 가고자 하는 url을 입력하고 이동하기 버튼을 누르면 그 사이트로 이동합니다. 그럼 다음시간에 또 만나요~

'Java Script' 카테고리의 다른 글

버튼을 누르면 사이트로 이동  (0) 2011.10.14
들어오고 나갈때 인사하는 스크립트  (0) 2011.10.10
버튼누르면 메시지 출력  (0) 2011.10.04
나이입력받아서 처리  (0) 2011.10.02
디지탈 시계  (0) 2011.09.28


설정

트랙백

댓글

버튼누르면 메시지 출력

Java Script 2011. 10. 4. 21:26


  안녕하세요?
  오늘은 버튼이나 링크를 누르면 메시지를 표시하는 스크립트입니다.

<script language="javascript">
function pushbutton() {
        alert("안녕하세요\n반갑습니다"); 
      // n 은 줄을 바꿀때 사용합니다
}
</script>

<input type="button" value=" 함수를 사용한 방법 " onclick="pushbutton()">

<a href="#" onClick="alert('안녕하세요\n반갑습니다'); return false">인라인 링크텍스트로 사용</a>

<input type=button onClick="alert('안녕하세요\n반갑습니다')" value=" 인라인 폼 버튼으로 사용 ">

첫번째는 함수 pushbutton을 사용한 방법입니다. 버튼을 클릭하면 위의 메시지를 출력하게 됩니다. 두번째는 링크를 이용한 방법으로 href=:"#"로 하고 onClick시에 alert함수를 실행하는 것입니다. 세번째는 버튼에 바로 onClick을 줘서 출력하는 방법입니다. 이해하셨으리라 생각하고 다음시간에 또 만나요~!

'Java Script' 카테고리의 다른 글

들어오고 나갈때 인사하는 스크립트  (0) 2011.10.10
웹문서에 주소창 넣기  (0) 2011.10.07
나이입력받아서 처리  (0) 2011.10.02
디지탈 시계  (0) 2011.09.28
랜덤으로 사이트 이동하기  (0) 2011.09.25


설정

트랙백

댓글