點選變色樹
阿新 • • 發佈:2019-01-06
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>松樹</title> <style> div { margin-left: auto; margin-right: auto; } #contain { background: yellow; } #l1 { height: 0px; width: 0px; border-top: 0px; border-right: solid transparent 100px; border-bottom: solid green 100px; border-left: solid transparent 100px; } #l2 { height: 0px; width: 0px; border-top: 0px; border-right: solid transparent 150px; border-bottom: solid 150px; border-left: solid transparent 150px; border-bottom-color: green; } #l3 { height: 0px; width: 0px; border-top: 0px; border-right: solid transparent 200px; border-bottom: solid green 200px; border-left: solid transparent 200px; } #l4 { height: 200px; width: 100px; background: brown; } </style> </head> <body> <!-- <div id="tri"></div> --> <div id="contain"> <div id="l1" onmouseup="mOut1()"></div> <div id="l2" onmouseup="mOut2()"> </div> <div id="l3" onmouseup="mOut3()"> </div> <div id="l4" onmouseup="mOut4()"> </div> </div> <script type="text/javascript"> var c; var d; function mOut1(){ var b = Math.ceil(Math.random()*7); switch(b){ case 1:d="red";break; case 2:d="orange";break; case 3:d="yellow";break; case 4:d="green";break; case 5:d="cyan";break; case 6:d="blue";break; case 7:d="purple";break; } // document.getElementById("contain").style.bgColor=c; document.getElementById("l1").style.borderBottomColor=d; } function mOut2(){ var b = Math.ceil(Math.random()*7); switch(b){ case 1:d="red";break; case 2:d="orange";break; case 3:d="yellow";break; case 4:d="green";break; case 5:d="cyan";break; case 6:d="blue";break; case 7:d="purple";break; } // document.getElementById("contain").style.bgColor=c; document.getElementById("l2").style.borderBottomColor=d; } function mOut3(){ var b = Math.ceil(Math.random()*7); switch(b){ case 1:d="red";break; case 2:d="orange";break; case 3:d="yellow";break; case 4:d="green";break; case 5:d="cyan";break; case 6:d="blue";break; case 7:d="purple";break; } // document.getElementById("contain").style.bgColor=c; document.getElementById("l3").style.borderBottomColor=d; } function mOut4(){ var b = Math.ceil(Math.random()*7); switch(b){ case 1:d="red";break; case 2:d="orange";break; case 3:d="yellow";break; case 4:d="green";break; case 5:d="cyan";break; case 6:d="blue";break; case 7:d="purple";break; } // document.getElementById("contain").style.bgColor=c; document.getElementById("l4").style.background=d; } </script>s </body> </html>