标签:
这是我模仿DIYGOD做的一个‘臭不要脸的喜欢我吗?’,哈哈哈哈哈有点意思。
只是纯前端的代码。不能记录喜欢的数量。复习了一下js代码(还是很生疏的感觉)。
随便求厉害的人指教!
<html> <script> function mOver(obj) { obj.innerHTML = "喜欢?" obj.style.backgroundColor = "red"; obj.style.color = "#fff"; document.getElementById("boxleft").innerHTML = "不喜欢→_→ " document.getElementById("boxleft").style.backgroundColor = "#fff"; document.getElementById("boxleft").style.color = "red"; } function mOut(obj) { obj.innerHTML = "不喜欢→_→ " obj.style.backgroundColor = "#fff"; obj.style.color = "red"; document.getElementById("boxleft").innerHTML = "喜欢?"; document.getElementById("boxleft").style.backgroundColor = "red"; document.getElementById("boxleft").style.color = "#fff"; } function mDown(obj) { obj.style.backgroundColor = "#444"; } function mUp(obj) { obj.style.backgroundColor = "red"; obj.style.color = "#fff"; document.getElementById("mybox").innerHTML = "</br>我也喜欢你(//▽//)"; } </script> <style type="text/css"> #mybox { margin:0 auto; text-align: center; padding: 20px; font: bold 15px arial, "微软雅黑"; width: 255px; height:50px; } #boxleft { float: left; padding: 20px; width: 87px; color: #fff; background: red; } #boxright { padding: 20px; color: red; width: 87px; float: right; background: #fff; } </style> <body > <div id="mybox"> <div onmousedown="mDown(this)" onmouseup="mUp(this)" id="boxleft"> 喜欢? </div> <div onmousedown="mDown(this)" onmouseup="mUp(this)" onmouseover="mOver(this)" onmouseout="mOut(this)" id="boxright"> 不喜欢→_→ </div> </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/flipped/p/5224706.html