html + css + javascript 写的程序员表白代码_javascript程序员老婆代码

作者：weixin_40725706 | 2024-02-21 23:58:28

踩

javascript程序员老婆代码

效果展示

个人服务器演示地址
在这里插入图片描述

在这里插入图片描述

话不多说，代码伺候

注意这里用到插件js

jquery.min.js,
jquery.fireworks.js , 流星雨组件
snow.js 雪花特效组件
音乐部分我用的是不仅仅是喜欢.mp3
目录如下

index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<title>love just only to you</title>
</head>

<script src="js/lib/jquery.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.fireworks.js" type="text/javascript"></script>

<style type="text/css">
*{ 
	-webkit-tap-highlight-color:rgba(0,0,0,0); 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}
html{ 
	width: 100%; 
	height: 100%; 
}
body{ 
	max-width: 600px; 
	margin: 0 auto; 
	background: #0b3443; 
	color: #f0f0f0;
}
.share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; }
.content{ padding: 80px 20px;}
.text_wrapper{ display: -webkit-box; display: flex; }
.text_wrapper .text{ padding-top: 20px; padding-left: 20px; }
.hide{ display: none !important; }
p{ margin: 0; }
.btn-groups{ padding-right: 20px; text-align: center; }
.heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; }
.btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.btn-a{ background: #d26ae5; }
.btn-b{ background: #c9c9c9; }
.btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.btn-b:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-b:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.container{  }
.container .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); }
.container .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%，-70%); background: #f3f3f3;}
.container .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;}
.confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; }
.type_words{ padding: 12px 20px; }
@keyframes breath {
	0% {
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
		transform-origin: 50% 50%;
	}
	50%{
		transform: scale3d(1.02,1.02,1.02);
		-webkit-transform: scale3d(1.02,1.02,1.02);
		transform-origin: 50% 50%;
	}
	100%{
		transform: scale3d(1,1,1);
		-webkit-transform: scale3d(1,1,1);
		transform-origin: 50% 50%;
	}
}
</style>

<script type="text/javascript">
$(function() {
	$('#yes').click(function(event) {
		modal('我就知道丫头你一定会愿意的。(^_^)', function() {
			$('.page_one').addClass('hide');
			$('.page_two').removeClass('hide');
			// typeWrite();
			fireworks();
			
		});
	});
	$('#no').click(function(event) {
		modal('明人不说暗话！', A);
	});
});

function A() {
	modal('我喜欢你！', B);
}

function B() {
	modal('我知道你在等我这一句话', C);
}

function C() {
	modal('请您不要拒绝我', D);
}

function D() {
	modal('我这么有趣你应该不会拒绝我吧', E);
}

function E() {
	modal('拒绝我，不存在的', F);
}

function F() {
	modal('这辈子都不可能让你离开我', G);
}

function G() {
	modal('跟我走吧', H);
}

function H() {
	modal('我可以学做饭哦！！！', I);
}

function I() {
	modal('爱你。么么哒！', J)
}

function J() {
	modal('嘻嘻', function() {
		fireworks();
	});
}

function fireworks() {
	$('.page_one').addClass('hide');
	$('.page_two').removeClass('hide');
	setTimeout("window.location.assign('carousel.html')",9000);
	$('.page_two').fireworks({ 
	  sound: false, 
	  opacity: 0.9, 
	  width: '100%', 
	  height: '100%' 
	});	
	
}

function modal(content, callback) {
	var tpl = '<div class="container">'+
							'<div class="mask"></div>'+
							'<div class="modal">'+
								'<p>'+ content +'</p>'+
								'<button type="button" id="confirm" class="confirm">确定</button>'+
							'</div>'+
						'</div>';
	$('body').append(tpl);
	$(document).on('click', '.confirm', function() {
		$('.container').remove();
		callback();
	});
}

var myWords = '有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以，我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。';
var x = 0;
var speed = 150;
var current = 0;
function typeWrite(){
	$('.type_words').html(myWords.substring(0, x++)+'_');
	var timer = setTimeout("typeWrite()", speed);
	if (x == myWords.length) {
		x = myWords.length;
		clearTimeout(timer)
	}
}

</script>
<body>

<div class="share_img"><img src="images/a8b.png" alt=""></div>

<div class="page_one">
	<div class="content">
		<div class="text_wrapper">
			<img src="images/a8.png" alt="">
			<div class="text">
				小姐姐，我好喜欢你，你愿意做我女朋友吗？
			</div>
		</div>
	</div>
	<div class="btn-groups">
		<div class="heart-btn">
			<div id="yes" class="btn btn-a"><span>愿意</span></div>
		</div>
		<div id="no" class="btn btn-b"><span>不愿意</span></div>
	</div>
</div>
<div class="page_two hide">
	<div class="type_words"></div>
</div>


</body>
</html>
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196

carousel.html页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>love just only you</title>
<style style="text/css">
	*{
		margin:0;
		padding:0;
	}
	body{
		background:url("images/1.jpg");
		background-size:cover;
	}
	.top{
		width:400px;
		height:100px;
		margin:60px auto;
		font-size:30px;
		font-family:"华文行楷";
		color:#fff;}
	.box{
		width:310px;
		height:310px;
		margin:auto;
		perspective:800px;
		}
	.box .pic{
		position:relative;
		transform-style:preserve-3d;
		animation:play 10s linear infinite;
		}
	.box ul li{
		list-style:none;
		position:absolute;
		top:0;
		left:0;
		}
	@keyframes play{
		from{transform:rotateY(0deg);}
		to{transform:rotateY(360deg);}
	}
	#text{
		width:500px;
		height:200px;
		color:#6fade1;
		margin:auto;
		font-size:24px;
		font-family:"方正喵呜体";
		}
</style>
</head>
<body>
<!--顶部开始-->
<div class="top">
	<marquee behavior="alternate">子非鱼,但得吾爱。</marquee>
</div>
<!--顶部结束-->
<!--轮播盒子开始-->
<div class="box">
	<div class="pic">
		<ul>
			<li><img src="images/1.png" width="" height="" alt=""></li>
			<li><img src="images/2.png" width="" height="" alt=""></li>
			<li><img src="images/3.png" width="" height="" alt=""></li>
			<li><img src="images/4.png" width="" height="" alt=""></li>
			<li><img src="images/5.png" width="" height="" alt=""></li>
			<li><img src="images/6.png" width="" height="" alt=""></li>
		</ul>
	</div>
</div>
<!--轮播盒子结束-->
<!--文本内容开始-->
<div id="text"></div>
<!--文本内容结束-->
<embed src="./music/不仅仅是喜欢.mp3" hidden="true">
<script src="./js/lib/jquery.min.js"></script>
<!--雪花-->
<script src="./js/lib/snow.js"></script>
<script>
	$(".pic ul li").each(function(i){//遍历
		var deg=360/$(".pic ul li").size();//size个数
		//当前的li对象 添加css样式
		$(this).css({"transform":"rotateY("+deg*i+"deg) translateZ(216px)"});
		
		$.fn.snow({
			minSize:10,
			maxSize:15,
			newOn:500,
			flakeColor:"#ffffff"
		});
	});
	
	var i=0;
	var str="能够遇见你是我最大的幸运，有了你生活变得丰富多彩，有了你，世界变得如此迷人；你是我的世界，我的世界是你，对我来说，不是在最美好的时光遇见了你，而是遇见你后都是最美好的时光！";
	
	window.onload=function typing(){
		//获取div
		var mydiv=document.getElementById("text");
		mydiv.innerHTML+=str.charAt(i);
		i++;
		var id=setTimeout(typing,100);
		if(i==str.length){
			clearTimeout(id);
		}
	}
</script>

</body>
</html>
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

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/127427