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>

 

Posted by 혜화초보
,

 

 




<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>




 

 

Posted by 혜화초보
,

 

/*

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

콤마로 치환하는 예제.

 

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

      }]

  });

    

    

});

Posted by 혜화초보
,