如何在接受文本時將球放入盒子中（javascript）

-1

我創建了一個簡單的網站，其中包含3個框：
當我點擊任何框時，javascript提示符將打開並詢問文本。在文本被接受之後，球應該被放入盒子中。我怎樣才能做到這一點？
這是我使用的代碼：如何在接受文本時將球放入盒子中（javascript）

<html> 
<head id = "hd"> 
    <meta charset = "utf-8" /> 
    <!--<meta name = "format-detection" --> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" /> 
    <script type="text/javascript"> 

     // function init() { 

     // } 


     function myFunction() { 
      var person = prompt("Please enter your thoughts"); 
     } 


    </script> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 

</head> 
<body> 
    <div> 
     <canvas id="myCanvas"></canvas> 
    </div> 
    </div> 
     <!--<p id = "demo"></p>--> 
     <div class="fixed-size-square" onclick="myFunction()"> 
      <span>Past Thoughts</span> 
     </div> 

     <div class="size-square" onclick="myFunction()"> 
      <span>Present Thoughts</span> 
     </div> 

     <div class="square"onclick="myFunction()"> 
      <span>Future Thoughts</span> 
     </div> 
    </div> 
    <div><button>I've no thoughts</button></div> 

    <script type="text/javascript"> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var centerX = canvas.width/2; 
     var centerY = canvas.height/2; 
     var radius = 70; 

     context.beginPath(); 
     context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
     context.fillStyle = 'green'; 
     context.fill(); 
     context.lineWidth = 5; 
     context.strokeStyle = '#003300'; 
     context.stroke(); 
    </script> 

</body> 
</html>

來源

2014-10-31 Test123

我想你應該先在html畫布上遵循一些教程。只要您瞭解如何在畫布上實際製作動畫，就可以輕鬆完成任務。此外，爲什麼不只是在HTML和JavaScript呢？如果一個球是你想要的，你不需要在畫布上繪製它，只需使用一個圓角正方形的分隔線。 – Banana 2014-10-31 07:49:00

好的，謝謝。讓我來實現它。我會回來的結果 – brainReader 2014-10-31 07:57:58

@Banana：請檢查我的答案 – brainReader 2014-10-31 09:31:27

-2

此代碼可能的幫助。

<html> 
<head id = "hd"> 
    <meta charset = "utf-8" /> 
    <!--<meta name = "format-detection" --> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" /> 
    <script src="modernizr.custom.86871.js"></script> 
    <script type="text/javascript"> 

     // function canvas-support() { 
     // return modernizr.canvas; 
     // } 


     function myFunction() { 
      var thought = prompt("Please enter your thoughts"); 
    //   if (document.getElementById('fixed-size-square').clicked == true){ 
    //   var thought = prompt("Please enter your thoughts"); 
    //   } 
    //   else if (document.getElementById('size-square').clicked == true) { 
    //    var thought1 = prompt("Please enter your thoughts"); 
      // } 
      // else if (document.getElementById('square').clicked == true) { 
      // var thought2 = prompt("Please enter your thoughts");   
      // } 
      // else{ 
      // return; 
      // } 
      var thought = document.getElementById('fixed-size-square'); 
      var thought1 = document.getElementById('size-square'); 
      var thought2 = document.getElementById('size'); 

      if (thought) { 
       var x = 50; 
       var y = 150; 
       var speed = 5; 
       function gameLoop(x,y,speed) { 
        y += speed; 
        x += speed; 
       } 
      } 
     } 


    </script> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 

</head> 
<body> 
    <div> 
     <canvas id="myCanvas"></canvas> 
    </div> 
    </div> 
     <!--<p id = "demo"></p>--> 

     <div class="fixed-size-square" onclick="myFunction()"> 
      <span>Past Thoughts</span> 

     </div> 

     <div class="size-square" onclick="myFunction()"> 
      <span>Present Thoughts</span> 
     </div> 

     <div class="square"onclick="myFunction()"> 
      <span>Future Thoughts</span> 
     </div> 
    </div> 
    <button>I've no thoughts</button> 

    <script type="text/javascript"> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var centerX = canvas.width/2; 
     var centerY = canvas.height/2; 
     var radius = 20; 

     context.beginPath(); 
     context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
     context.fillStyle = 'red'; 
     context.fill(); 
     context.lineWidth = 5; 
     // context.strokeStyle = '#003300'; 
     // context.stroke(); 
    </script> 

</body> 
</html>

來源

2014-10-31 09:32:35 brainReader

如何在接受文本時將球放入盒子中（javascript）

回答

相關問題