清酒踏月 清酒踏月

[分享]抖音挺火的表白小姐姐网页源码

in 默认分类 read (162) 文章转载请注明来源!

刷抖音时刷到这个东西,感觉还挺有意思。
运用了单击触发的鼠标事件,一个很简单的js。
Html源码

<!doctype html>
<!--百度搜索:清酒踏月---www.lkxin.cn-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>LOVE</title>
<link href="style/love.css" rel="stylesheet" >
</head>
<style>
    
</style>
<body>
    <div class="box" align="center">
        <p>我观察你很久了</p>
        <h1>小姐姐做我对象好不好?</h1>
        <img src="images/1.jpg">
      <img src="images/2.jpg">
        <div class="bottom">
            <div class="left" id="hao">好</div>
            <div class="right" id="buhao">不好</div>
        </div>
    </div>
</body>
    <script type="text/javascript" src="js/love.js"></script>
</html>

CSS代码

@charset "utf-8";
/* CSS Document */
/*百度搜索:清酒踏月*/
/*www.lkxin.cn*/
/*电脑版本*/
@media screen and (min-width:501px){
.box{
        width: 600px;
        background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
        border-radius: 10px;
        margin: 0 auto;
        color: aliceblue;
         margin: auto;
        position: absolute;
        top: 0;
        left: 0;
            right: 0;
        bottom: 0;
    }
    .box img{
        width: 200px;
        height: 200px;
        border-radius: 5px;
    }
    .box p{
        padding-top: 30px;
        font-weight: bold;
    }
    .bottom{
        margin-top:30px;
        width: 99%;
        height: 80px;
    
    }
    .left{
        display: inline-block;
        width: 150px;
        height: 40px;
        background-color: #5cb85c;
        border-color: #4cae4c;
        margin-right: 100px;
        border-radius: 5px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }
    .left:hover{
        background-color:#328732;
        
    }
        .right{
        cursor: pointer;
        display: inline-block;
        width: 150px;
        height: 40px;
        background-color: #c9302c;
        border-color: #ac2925;
        border-radius: 5px;
        line-height: 40px;
        font-size: 16px;
        
    }
    .right:hover{
        border-color:#B11C18;
    }
}
/*手机端*/
@media screen and (max-width:500px){
    .box{
        width: 100%;
        background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
    
        margin: 0 auto;
        color: aliceblue;
         margin: auto;
        position: absolute;
        top: 0;
        left: 0;
            right: 0;
        bottom: 0;
    }
        .box img{
        width:150px;
        height: 150px;
        border-radius: 5px;
    }
    .box p{
        padding-top: 30px;
        font-weight: bold;
    }
    .bottom{
        margin-top:3%;
        width: 99%;
        height: 80px;
    
    
    }
    .left{
        display: inline-block;
        width: 40%;
        height: 40px;
        background-color: #5cb85c;

JS代码

// JavaScript Document
var Dianji=0;
window.onload=function(){
    var buhao = document.getElementById("buhao");
    var hao = document.getElementById("hao");
    buhao.onclick=function(){
        Dianji++;
        if(Dianji==1){
                   alert("小姐姐在考虑一下呗");
       }else if(Dianji==2){
                   alert("你是我见过的最帅气善良可爱的女孩");
                   
       }else if(Dianji==3){
                   alert("一生一世爱你");
                   
       }else if(Dianji==4){
                   alert("家务我全干");
                   
      }else if(Dianji==5){
                   alert("不藏私房钱");
      }else if(Dianji==6){
                   alert("房子写你名");
      }else if(Dianji==7){
                   alert("工资全上交");
                  Dianji=1;
      }

    }
    hao.onclick=function(){
        alert("小姐姐终于同意了,我爱你");
    }
    

}

演示网址:https://www.lkxin.cn/love
源码已经打包→点击下载


jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://www.lkxin.cn/archives/322.html (转载时请注明本文出处及文章链接)

默认分类
发表新评论
已有 3 条评论
  1. GRC构件
    GRC构件 10Chrome 63
    回复

    我去试试看,哈哈

  2. 明月清风
    明月清风 10QQ浏览器 10
    回复

    这个我有看过,想改成那两个按钮会动的那种,就不点同意不行的那种。

    1. 清酒
      清酒本文作者 OChrome 70
      回复

      @明月清风 恩,就是无限循环的那种对吧。

前篇 后篇
雷姆
拉姆