HTML 5 und JavaScript

Ich möchte etwas Interaktion auf meinem Spiel. Derzeit kann ich sie über den Papierkorb ziehen und dann bleiben sie dort. Ich möchte, dass sie verschwinden und eine Nachricht hinterlassen, die besagt: "Ja, Sie haben ein richtiges oder gutes Recycling". Wie mache ich das? Ich lerne gerade Javascript, also brauche ich einfach.HTML 5 und JavaScript

Hier ist der Code, den ich bisher habe.

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

Quelle

2012-03-29 ajcoder

Fügen Sie einfach

//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.");

am Ende drop(), wie folgt aus:

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."); 
}

LIVE-Demo: http://jsfiddle.net/DerekL/Nb3An/
(Vollbild) http://jsfiddle.net/DerekL/Nb3An/show

Quelle

2012-03-29 04:27:26

HTML 5 und JavaScript

Antwort

Verwandte Themen