最近很火的一个表白页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// 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("小姐姐终于同意了，我爱你");
	}
 
 
}

// 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("小姐姐终于同意了，我爱你"); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

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

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