喜欢❤
不喜欢→_→

　　这是我模仿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>

 

┆凉┆暖┆降┆等┆幸┆我┆我┆里┆将┆　┆可┆有┆谦┆戮┆那┆　┆大┆始┆　┆然┆
┆薄┆一┆临┆你┆的┆还┆没┆　┆来┆　┆是┆来┆逊┆没┆些┆　┆雁┆终┆　┆而┆
┆　┆暖┆　┆如┆地┆站┆有┆　┆也┆　┆我┆　┆的┆有┆精┆　┆也┆没┆　┆你┆
┆　┆这┆　┆试┆方┆在┆逃┆　┆会┆　┆在┆　┆清┆来┆准┆　┆没┆有┆　┆没┆
┆　┆生┆　┆探┆　┆最┆避┆　┆在┆　┆这┆　┆晨┆　┆的┆　┆有┆来┆　┆有┆
┆　┆之┆　┆般┆　┆不┆　┆　┆这┆　┆里┆　┆没┆　┆杀┆　┆来┆　┆　┆来┆