HTML 5和JavaScript

我想在我的遊戲上進行一些互動。目前，我可以將它們拖到回收站上，然後他們呆在那裏。我希望他們消失並留言說：是的，你是正確的還是很好的回收。我該怎麼做呢？我只是學習JavaScript，所以我需要簡單。HTML 5和JavaScript

這是我到目前爲止的代碼。

 <!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 

     body { 

     } 
     #div1 { 
    width:478px; 
    height:331px; 
    padding:10px; 
    background-image:url(../Images/recycle_bin.png); 
    background-repeat:no-repeat; 
    vertical-align:middle; 
    margin:auto; 
    text-align:center; 
    position:absolute; 
    left:40%; 
    } 

     *[draggable=true] { 
      -moz-user-select:none; 
      -khtml-user-drag: element; 
      cursor: move; 
     } 

     .instructions { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:19px; 
    color:#255e02; 
    font-weight:bold; 
    line-height:12px; 
     } 



</style> 


<script type="text/javascript"> 

function allowDrop(ev) 
{ 
ev.preventDefault(); 
} 

function drag(ev) 
{ 
ev.dataTransfer.setData("Text",ev.target.id); 
} 

function drop(ev) 
{ 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
ev.preventDefault(); 
} 


</script> 


</head> 
<body> 
<div class="instructions"> 
<p>This is Ms. Mumford's Recycle Game. You will learn about recycling. Some items on this page cannot be recycled. Others can. </p> 
<p>Drag the things that you can recycle to the recycle bin.</p> 
</div> 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<div> 
<img id="drag1" src="../Images/Mountaindew.png" draggable="true" ondragstart="drag(event)" /> 
<img id="drag2" src="../Images/snapple.png" draggable="true" ondragstart="drag(event)" /> 
<img id="drag3" src="../Images/newspaper.png" draggable="true" ondragstart="drag(event)" /> 
</div> 

</body> 
</html>

來源

2012-03-29 ajcoder

只需添加

//using jQuery to empty the div, or document.getElementById("div1").innerHTML="" 
$("#div1").empty(); 
//alert, or add your own popup 
alert("Yes, you are correct or good recycling.");

在drop()結束，就像這樣：

function drop(ev){ 
    var data=ev.dataTransfer.getData("Text"); 
    ev.target.appendChild(document.getElementById(data)); 
    ev.preventDefault(); 
    document.getElementById("div1").innerHTML=""; 
    alert("Yes, you are correct or good recycling."); 
}

現場演示：http://jsfiddle.net/DerekL/Nb3An/
（全屏）http://jsfiddle.net/DerekL/Nb3An/show

來源

2012-03-29 04:27:26

HTML 5和JavaScript

回答

相關問題