zoukankan      html  css  js  c++  java
  • 【前端】纯前端的一个‘喜欢我吗?’

    喜欢❤
    不喜欢→_→

      这是我模仿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, "微软雅黑";
         255px;
        height:50px;
    }
    
    #boxleft {
        float: left;
        padding: 20px;
         87px;
        color: #fff;
        background: red;
    }
    
    #boxright {
        padding: 20px;
        color: red;
         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>
  • 相关阅读:
    php+GTK2 学习第二篇
    PHPMailer + qq邮箱 实现邮件发送
    HTTP状态码200、301、403、404、500等(转)
    LNMP环境搭建(转载)
    PHP+GTK2 初体验,简单计算器客户端
    mysql 用户权限管理(转)
    提高php执行效率的10条编程习惯(转)
    添加php拓展(以phppcntl及phpredis及phppcntl为例)
    centos7 &后台运行 受终端关闭影响问题
    sklearn学习笔记之简单线性回归
  • 原文地址:https://www.cnblogs.com/flipped/p/5224706.html
Copyright © 2011-2022 走看看