div 회전

[.js] div 의 이동 2017. 9. 7. 15:39

<html>

<head>

</head>


<script  language="javascript"  >

 /*

rotate the div(a1) 

 */


 var div_a1;


 function init(){

  div_a1 = document.getElementById('a1');

   aa = setInterval("rotate_div()", 50); //  1000 = 1초   1초마다 roofing_func 를 실행하라.~

 }


 

 var aa = 0;

 

 function rotate_div(){

   //div_a1.style.left = e.offsetX - 20 + 'px';

   //div_a1.style.top = e.offsetY - 20 + 'px';     

   aa += 1;

   if( aa > 360 )

   aa = 0;

   div_a1.style.webkitTransform = 'rotate(' + aa + 'deg)';     

 }



</script>

    <body  onload="init();" >

        <div id="groundDiv"  style="position:relative; width:99%; height:99%; border:0x solid black;"></div>

        <div id='a1'  style="position:absolute; width:3px; height:50px; border:2px solid black;top:100px;left:100px  " ></div>

    </body>

</html>

 

'[.js] div 의 이동' 카테고리의 다른 글

클릭 드레그 하면 따라다니는 div  (0) 2017.09.07
한 점을 기준으로 + 를 회전시킴  (0) 2017.09.06
click 누르면 div를 생성해서 특정 위치에 위치시킨다.  (0) 2017.09.06
Posted by 혜화초보
,

클릭 드레그 하면 따라다니는 div

[.js] div 의 이동 2017. 9. 7. 15:04

 

 




<html>
<head>
</head>


<script  language="javascript"  >


 /*Click and drag to follow the div */


 var div_a1;


 function init(){
   div_a1 = document.getElementById('a1');
   var groundDiv = document.getElementById('groundDiv');
   groundDiv.addEventListener('mousedown', mouseDown);
   groundDiv.addEventListener('mousemove', mouseMove);
   groundDiv.addEventListener('mouseup', mouseUp);
 }


 var isClick = false; 
 function mouseDown(e){
   isClick = true;
 }
 
 function mouseMove(e){
   if( isClick == true ){
     div_a1.style.left = e.offsetX - 20 + 'px';
     div_a1.style.top = e.offsetY - 20 + 'px';     
   }
 }
 
 function mouseUp(e){
   isClick = false;
 }


</script>
    <body  onload="init();" >
        <div id="groundDiv"  style="position:relative; width:99%; height:99%; border:0x solid black;"></div>
        <div id='a1'  style="position:absolute; width:3px; height:3px; border:2px solid black;top:2px;left:3px  " ></div>
    </body>
</html>

 

 

'[.js] div 의 이동' 카테고리의 다른 글

div 회전  (0) 2017.09.07
한 점을 기준으로 + 를 회전시킴  (0) 2017.09.06
click 누르면 div를 생성해서 특정 위치에 위치시킨다.  (0) 2017.09.06
Posted by 혜화초보
,

[extJs] 텍스트 필드에 값 붙여 넣으면 읽어서 치환.

[.js][software] 2017. 9. 7. 09:27

 

/*

텍스트 필드에 값을 붙여 넣은 경우 그 값에서 공백을

콤마로 치환하는 예제.

 

If you paste a value into a text field,

Example of replacing with a comma.

*/

 

 

<html>

<head>

</head>

<link rel="stylesheet" type="text/css" charset="UTF-8" href="./theme-gray-all.css" />

 

<style type="text/css">

</style>

 

<script type="text/javascript" charset="UTF-8" src="./ext-all.js"></script>

 

<body>

 

<script language='javascript' >

 

Ext.onReady(function(){

 

  Ext.create('Ext.form.Panel', {

      title: 'Contact Info',

      width: 300,

      bodyPadding: 10,

      renderTo: Ext.getBody(),

      items: [{

          xtype: 'textfield',

          name: 'name',

          fieldLabel: 'Name',

          allowBlank: false  // requires a non-empty value

          ,

          listeners: {

            paste: {

              element: 'inputEl',

              fn: function(event, inputEl) {

               setTimeout(function(){

                 var temp1 = ( inputEl.value  ).replace(/ /g,",");

                 inputEl.value = temp1;

               },0);

              }

            }

          }

      }, {

          xtype: 'textfield',

          name: 'email',

          fieldLabel: 'Email Address',

          vtype: 'email'  // requires value to be a valid email address format

      }]

  });

    

    

});

'[.js][software]' 카테고리의 다른 글

[jqGrid] 특정 셀 마우스다운하고 다른 셀에 마우스 업하면 값 이동  (0) 2017.09.11
[jqGrid] simple Grid (local)  (0) 2017.09.08
[extJs] Mouse down the cell value and put it in the mouse-up cell  (0) 2017.09.08
[extJs] simple grid (editable)  (0) 2017.09.08
[extJs] simple gird  (0) 2017.09.08
Posted by 혜화초보
,

붙여넣기 이벤트 처리 ctrl+v

[.js] 이벤트 2017. 9. 6. 17:08

/*

paste event

*/



<html>

<head>


<style type="text/css">

 <!--

  #base1 {

  background-color: #F3F2F6;

  width: 10px;

  height: 10px;

  position:absolute;

  top: 200px;

  }

 //-->

 </style>


</head>


<script  language="javascript"  >

 /*

 */

 var ppp = 0;


 function init(){

   var groundDiv = document.getElementById('c2');

   groundDiv.addEventListener("paste", handler , false);   // all browsers and IE9+

   //groundDiv.attachEvent ("onpaste", handler);  // IE<9

 }

 

 function handler(){

    setTimeout(function(){

       var groundDiv = document.getElementById('c2').value;

       console.log('value:: ' + groundDiv );

    }, 0); //or 4

 }


</script>

    <body  onload="init();"   >

        <div id='base1' >

          <input type='text'  size='20'  name='c1' id='c2' >

        </div>

    </body>

</html>

'[.js] 이벤트' 카테고리의 다른 글

onClick onFocus eventListener  (0) 2017.09.08
div 에다가 클릭 이벤트 걸기  (0) 2017.09.06
Posted by 혜화초보
,

div 에다가 클릭 이벤트 걸기

[.js] 이벤트 2017. 9. 6. 17:04


 




/*

설명 :  화면을 열고 click 클릭하면 이벤트가 등록되고

        a1 의 div 를 클릭하면 hello 콘솔창에 찍힘.


재밌는건 click 여러번 클릭하면 리스너도 여러번 등록되서

hello도 여러번 출력됨.

*/


<html>

<head>

</head>

<script  language="javascript"  >


function exe(){


  var div1 = document.getElementById("a1");

  div1.addEventListener('click', function (event) {

    console.log(' hello ~ ');   

  });

}




</script>

    <body  >

        <div  id='a1'  style="  height:80px ; padding-top:200px ;

            background-color: lightblue;

            padding-left:200px "  >

          <a href="javascript:exe();"  >  click  </a>        

        </div>

        

 

    </body>

</html>


'[.js] 이벤트' 카테고리의 다른 글

onClick onFocus eventListener  (0) 2017.09.08
붙여넣기 이벤트 처리 ctrl+v  (0) 2017.09.06
Posted by 혜화초보
,

1초에 한번 함수 실행

[.js] no category 2017. 9. 6. 17:03

<html>

<head>

</head>

<script  language="javascript"  >


var aa = 0;


function exe(){

  aa = setInterval("roofing_func()", 1000); //  1000 = 1초   1초마다 roofing_func 를 실행하라.~

}


function stop(){

  clearInterval(aa);    

}


function roofing_func(){

  console.log( 'a');

}


</script>

    <body  >

        <div  style="  height:80px ; padding-top:200px ; padding-left:200px "  >

          <a href="javascript:exe();"  >  click  </a>        

          &nbsp;&nbsp;

          <a href="javascript:stop();"  >  stop  </a>                  

        </div>

        

 

    </body>

</html>

'[.js] no category' 카테고리의 다른 글

base html 왁구  (0) 2019.08.03
include , 포함인지 여부  (0) 2017.09.13
정수로 casting 예제  (0) 2017.09.06
Posted by 혜화초보
,

정수로 casting 예제

[.js] no category 2017. 9. 6. 17:01

<html>

<head>

</head>

<script  language="javascript"  >

 

function exe(){

 

  var a1 = '10.02';

  console.log( ' value: '+ a1 );

  console.log( ' value: '+   typeof( a1 ) ); //string

    

  a1 = parseInt( a1 );

  console.log( ' value: '+   typeof( a1 ) );  //number

  console.log( ' value: '+ a1 );

    

  a1 += 3.2;  

  console.log( ' value: '+ a1 );  //13.2

  console.log( ' value: '+   typeof( a1 ) ); //number

}

 

 

 

</script>

    <body  >

        <div  style="  height:80px ; padding-top:200px ; padding-left:200px "  >

          <a href="javascript:exe();"  >  click  </a>        

        </div>

        

 

    </body>

</html>

'[.js] no category' 카테고리의 다른 글

base html 왁구  (0) 2019.08.03
include , 포함인지 여부  (0) 2017.09.13
1초에 한번 함수 실행  (0) 2017.09.06
Posted by 혜화초보
,

현재 날짜 구하기

[.js] 날짜 2017. 9. 6. 17:00



function exe(){

   var dt = new Date();

  

   var month = dt.getMonth()+1;

   var day = dt.getDate();

   var year = dt.getFullYear();

   var result  = month + '-' + day + '-' + year;

   

   console.log(  '' + result   );  

 }


'[.js] 날짜' 카테고리의 다른 글

날짜 빼기 , 11개월전 날짜 구하기  (0) 2018.11.21
현재날짜 YYYYMMDDHHMMSS  (0) 2018.10.05
날짜 초 분 더하기 빼기  (0) 2017.09.08
이달의 마지막날짜 구하기  (0) 2017.09.06
Posted by 혜화초보
,

이달의 마지막날짜 구하기

[.js] 날짜 2017. 9. 6. 16:58




 




<html>

<head>

</head>

<script  language="javascript"  >

 

// 2016 , 2  값을 변수 처리 하면 됩니다.

// 2016년 2월의 마지막 일자를 리턴.

 function exe(){

     var lastDay = new Date( 2016 , 2 , 0);

     console.log(' lastDay: '+ lastDay );

 }


</script>

    <body  >

        <div  style="  height:200px ; padding-top:200px ; padding-left:200px "  >

          <a href="javascript:exe();"  >  click  </a>        

        </div>

    </body>

</html>


'[.js] 날짜' 카테고리의 다른 글

날짜 빼기 , 11개월전 날짜 구하기  (0) 2018.11.21
현재날짜 YYYYMMDDHHMMSS  (0) 2018.10.05
날짜 초 분 더하기 빼기  (0) 2017.09.08
현재 날짜 구하기  (0) 2017.09.06
Posted by 혜화초보
,

두 점사이 거리 구하기

[.js] 계산 2017. 9. 6. 16:57

<html>

<head>


<style type="text/css">

 <!--

  #base1 {

  background-color: #F3F2F6;

  width: 10px;

  height: 10px;

  position:absolute;

  }

 

 //-->

 </style>


</head>


<script  language="javascript"  >

 

 /*  x1 , y1  (점A)   x2 , y2(점B)  두 점사이의 거리를 구하라~

 */

 

 var ppp = 0;

 

 

 function cal_exe(){

 

    var x1 = 10.3;

    var y1 = 10.3;    

    

    var x2 = 20.2;

    var y2 = 20.2;    

    

    var dis_x = x1 - x2;

    var dix_y = y1 - y2;


    result1 = Math.sqrt(Math.abs(dis_x*dis_x) + Math.abs(dix_y*dix_y));

    

    console.log( result1 );

    

 }

  


</script>

    <body    >

        <div id='base1' ></div>

   

        <div id="container">

        </div>

        

        <a href="javascript:cal_exe();"  >bbbbb</a>

    </body>


</html>



Posted by 혜화초보
,

티스토리툴바