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

效果

实现

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;
 }



}

4.再在css同级目录下新建js目录

js目录下新建yiqi.js

// JavaScript Document
var Dianji=0;
window.οnlοad=function(){
 var buhao = document.getElementById("buhao");
 var hao = document.getElementById("hao");
 buhao.οnclick=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.οnclick=function(){
  alert("你终于同意了，小姐姐我爱你");
 }


}

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

 

  
我观察你很久了
  
小姐姐做我对象好不好?
  
  

   
好
   
不好
  










返回主站
 

 
   

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

源码下载

 

https://download.csdn.net/download/badao_liumang_qizhi/10930308