Question

我正在学习javascript。

我不知道First Source的输入如何用作TextBox的第二个源的输入？

我应该怎么做？

＆＃13;

@@@@@@@@@@@@@@@ First Source @@@@@@@@@@@@@@@@@@

<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         #container canvas{
             position: absolute;
         }
         #land{
             background-color: #ececec;
         }
         #temp{
             display: none;
         }

    </style>
 </head>
 <body>

<div id="container">
     <canvas id="land" width="800" height="600"></canvas>
     <canvas id="sky" width="800" height="600"></canvas>
     <canvas id="temp" width="800" height="600"></canvas>
 </div>

 <script src="lib/jquery.js"></script>
 <script src="src/vec.js"></script>
 <script src="src/vecoper.js"></script>
 <script>

     var land = document.getElementById( 'land' );
     var landc = land.getContext( '2d' );
     var sky = document.getElementById( 'sky' );
     var skyc = sky.getContext( '2d' );
     var temp = document.getElementById( 'temp' );
     var tempc = temp.getContext( '2d' );
     var PI2 = 2*Math.PI;

    var Land = {
         init:function(){
             this.vtx = 20;
             this.tempColor = 'blue'
             this.pixelmap = [];
             var x = 0;
             var y = land.height / 1.1;
             var l = land.width / this.vtx;
             var d;
             var h;
             landc.save();
             landc.fillStyle = '#cccccc';
             landc.beginPath();
             landc.moveTo( x, y );
             for( var i=0, count=this.vtx ; i<count ; i+=1 ){
                 x+=l;
                 h = Math.random() * 20;
                 d = Math.round( Math.random() );
                 if( d){ y-=h; }
                 else{ y+=h; }
                 landc.lineTo( x, y );
             }
             landc.lineTo( x, land.height );
             landc.lineTo( 0, land.height );
             landc.closePath();
             landc.fill();
             landc.restore();
             this.updatePixelmap();
         },

        updatePixelmap:function(){
             tempc.drawImage( land, 0, 0 );
             this.pixelmap = tempc.getImageData( 0,0, temp.width, temp.height ).data;
         },

        isCollision:function( bomb ){
             temp.width = temp.width;
             var x = bomb.ltx;
             var y = bomb.lty;
             var targetPixelData = landc.getImageData( x, y, bomb.size*2, bomb.size*2).data;
             for( var i= 0, count=bomb.pixelmap.length ; i<count ; i+=4 ){
                 a = bomb.pixelmap[ i+3 ];
                 if( a != 0 && targetPixelData[ i+3 ] != 0 && targetPixelData[ i ] != 0 ||  targetPixelData[ i+1 ] != 0 || targetPixelData[ i+2 ] != 0 ){
                     return true;
                 }
             }

            return false;
         },

        destroy:function( bomb ){
             landc.save();
             landc.globalCompositeOperation = "destination-out";
             landc.beginPath();
             landc.arc( bomb.x, bomb.y, bomb.power, 0, Math.PI*2, false );
             landc.fill();
             landc.restore();
         }
     };

    var Bomb = function(){
         this.init();
     };

    Bomb.prototype = {
         init:function(){
             this.x = Math.random() * sky.width;
             this.y = Math.random() * -200;
             this.speed = Math.random() + 5;
             this.size = ( Math.random() * 10 ) + 5;
             this.power = this.size*3;
             this.pixelmap = [];
             this.color = '#cccccc';
             this.tempColor = 'red';
             this.updatePixelmap();
         },

        updatePixelmap:function(){
             this.pixelmap = [];
             var size = this.size;
             var size2 = this.size*2;
             temp.width = temp.width;
             tempc.save();
             tempc.fillStyle = this.tempColor;
             tempc.beginPath();
             tempc.arc( size, size, size, 0, PI2, false );
             tempc.fill();
             tempc.restore();
             this.pixelmap = tempc.getImageData(0,0, size2, size2).data;
         },

        update:function(){
             this.y += this.speed;
             this.ltx = this.x-this.size;
             this.lty = this.y-this.size;

            skyc.save();
             skyc.fillStyle = this.color;
             skyc.beginPath();
             skyc.arc( this.x, this.y, this.size, 0, PI2, false );
             skyc.fill();
             skyc.restore();
         },

        exp:function(){
             this.speed = 0;
         }

    };

    var World = {
         loopId:null,
         land:Land,
         bombs:( function(){
             var result = [];
             for( var i= 0, count=10 ; i<count ; i+=1 ){ result.push( new Bomb() ); }
             return result;
         }()),
         init:function(){
             land.width = land.width;
             sky.width = sky.width;
             this.land.init();
         },

        update:function(){
             sky.width = sky.width;
             skyc.save();
             var bomb;
             for( var i= 0, count=this.bombs.length ; i<count ; i+=1 ){
                 bomb = this.bombs[ i];
                 bomb.update();
   
   if( !this.land.isCollision(bomb)) {
                 if( this.land.isCollision( bomb ) ){
                     this.land.destroy( bomb );
       bomb.exp();
                     bomb.init();
   }
                 }else{
                     console.log( bomb.y+bomb.size/2, land.height );
                     if( bomb.y+bomb.size/2 > land.height ){
                         bomb.init();
                     }
                 }
             }
             skyc.restore();
         },

        start:function(){
             var self = this;
             this.stop();
             this.loopId = setInterval( function(){
                 self.update();
             }, 1000/40 )
         },

        stop:function(){
             clearInterval( this.loopId );
         }
     };


     World.init();
     World.start();
 </script>
 </body>
 </html>


@@@@@@@@@@@@@@@ secound source @@@@@@@@@@@@@@@@@
enter code here
<!doctype html>
 <html>
 <head>
  <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <style>
  body{ background-color: ivory; }
  canvas{border:1px solid red;}
  * {
  margin: 0;
  padding: 0;
  }
  #wrapper {
  position: relative;
  width: 800px;
  height: 600px;
  background: red;
  }
  #myCanvas {
  width: 800px;
  height: 600px;
  background: blue;
  }
  #stop {
  position: absolute;
  }

 #write {
  position: absolute;
  width: 200px;
  height: 24px;
  left: 50%;
  margin-left: -100px;
  margin-top: -50px;
  }
  </style>

 <script>
  $(function(){

 var canvas=document.getElementById("myCanvas");
  var ctx=canvas.getContext("2d");

 var write = document.getElementById('write');

 document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {
  write.focus();
  }
  });

 write.addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {
  console.log(write.value);
  write.value = '';
  }
  });

 // a flag to let you stop the animation
  var ok2animate=true;


  // a Drop pseudo-class
  // Properties: current x,y & the speed at which this drop falls
  function Drop(){
  this.x=Math.random()*(canvas.width-20);
  this.y=-Math.random()*20;
  this.fallRate=1;
  }

 // draw this drop on the canvas
  Drop.prototype.draw=function(){
  ctx.beginPath();
  ctx.moveTo(this.x-5,this.y);
  ctx.lineTo(this.x,this.y-7);
  ctx.lineTo(this.x+5,this.y);
  ctx.arc(this.x,this.y,5,0,Math.PI);
  ctx.closePath();
  ctx.fill();
  return(this);
  }

 // make this drop "fall"
  Drop.prototype.fall=function(){
  this.y+=this.fallRate;
  return(this);
  }

 // an animation loop to make some test drops fall
  function animate(){

 // request another animation frame
  if(ok2animate){
  requestAnimationFrame(animate);
  }

 // fill the canvas with the orange background
  // ctx.fillStyle="orange";
  // ctx.fillRect(0,0,canvas.width,canvas.height)
  var img=new Image();
  img.onload = function(){
  ctx.drawImage(img,0,0);
  };
  img.src="Game_Background.jpg";

 // make all drops fall and then redraw them
  ctx.fillStyle="red";
  for(var i=0;i<drops.length;i++){
  drops[i].fall().draw();
  }
  }

 // let the user stop the animation
  $("#stop").click(function(){
  ok2animate=false;
  });




 // an array of objects each representing 1 drop
  var drops=[];

 // add some test drops
  for(var i=0;i<10;i++){
  drops.push(new Drop());
  }

 // start the animation
  requestAnimationFrame(animate);


  }); // end $(function(){});
  </script>
 </head>
 <body>
  <div id="wrapper">
  <button id="stop">Stop</button>
  <canvas id="myCanvas" width=800 height=600></canvas>
  <input type="text" id="write">
  </div>
 </body>
 </html>

＆＃13;

Answer 1

在输入类型文本

之间复制值

获取对#first和#second：document.getElementById
阅读＃first .value：var theValue=tbFirst.value
将值写入#second：tbSecond.value=theValue

这是示例代码和演示：

// get reference to textboxes 
var tbFirst=document.getElementById('first');
var tbSecond=document.getElementById('second');

// button to call firstToSecond function
document.getElementById('movetext').onclick=function(){
    firstToSecond();
};

// copy #first's text value to #second
function firstToSecond(){
    // read tbFirst and copy to tbSecond
    tbSecond.value=tbFirst.value;
    // optionally, clear #first
    tbFirst.value='';
}

<h4>Type in #First. Click button to move to #Second</h4>
First:<input type="text" id="first">
<button id='movetext'>First-to-second</button>
<br>
Second:<input type="text" id="second">

如何将键入的文本从一个输入类型文本复制到另一个？

1 个答案: