【前端】纯前端的一个‘喜欢我吗？’
喜欢❤
不喜欢→_→
这是我模仿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 {
cursor:pointer;
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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-02-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
