JS实现抖音小姐姐表白源码

冷不防 2023-10-18 14:01 73阅读 0赞

## 效果 ##

![Image 1][]![20190121153749961.gif][]

## 实现 ##

1.新建目录douyin

2.在其下新建css目录

3.在css目录下新建main.css

@charset "utf-8";
    /* CSS Document */
    
    
    
    /*电脑版本*/
    @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;
      border-color: #4cae4c;
      margin-right: 10%;
      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: 40%;
      height: 40px;
      background-color: #c9302c;
      border-color: #ac2925;
      border-radius: 5px;
      line-height: 40px;
      font-size: 16px;
      
     }
     .right:hover{
      border-color:#B11C18;
     }
    
    
    
    }

js目录下新建yiqi.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("你终于同意了，小姐姐我爱你");
     }
    
    
    }

5.在css同级目录下新建index.html

<!DOCTYPE html>
    <html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name= "viewport"content="width=device-width, initial-scale=1">
    <title>LOVE，小女神</title>
    <link href="./css/main.css" rel="stylesheet">
    <style>
     
    </style></head>
    
    <body>
     <div class="box" align="center">
      <p>我观察你很久了</p>
      <h1>小姐姐做我对象好不好?</h1>
      <img src="./images/1.jpg">
      <div class="bottom">
       <div class="left" id="hao">好</div>
       <div class="right" id="buhao">不好</div>
      </div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="http://photosya.cn">返回主站</a>
     </div>
    
     <script type="text/javascript" src="./js/yiqi.js"></script>
       
    
    
    </body>
    </html>

6.在css同级目录下新建image目录，在此目录下存放照片

![Image 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

## 源码下载 ##

[https://download.csdn.net/download/badao\_liumang\_qizhi/10930308][https_download.csdn.net_download_badao_liumang_qizhi_10930308]

[Image 1]: 
[20190121153749961.gif]: https://img-blog.csdnimg.cn/20190121153749961.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190121153724916.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_badao_liumang_qizhi_10930308]: https://download.csdn.net/download/badao_liumang_qizhi/10930308