情人节程序员用HTML网页表白【我永远属于你】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

原创

IT司马青衫

发布于 2022-08-21 09:40:14

9050

发布于 2022-08-21 09:40:14

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

@TOC

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="">
<meta name="description" content="">
<SCRIPT language="JavaScript">
<!--

var layers = document.layers, style = document.all, both = layers || style, idme=908601;
if (layers) { layerRef = 'document.layers'; styleRef = ''; } if (style) { layerRef = 'document.all'; styleRef = '.style'; }

function writeOnText(obj, str) {
if (layers) with (document[obj]) { document.open(); document.write(str); document.close(); }
if (style) eval(obj+'.innerHTML= str');
}
//浠ヤ笅鏄緭鍑虹殑鍐呭锛岃嚜宸变慨鏀瑰嵆鍙€�
var dispStr = new Array(
"<font color=red size=15>濡傛灉涓婂ぉ璁╂垜璁镐笁涓効鏈�</font><br><font color=green size=15>绗竴涓槸浠婄敓浠婁笘鍜屼綘鍦ㄤ竴璧凤紝</font><br><font color=red size=10>绗簩涓槸鏉ョ敓鏉ヤ笘鍜屼綘鍦ㄤ竴璧凤紝</font><br><font color=blue size=15>绗笁涓槸姘哥敓姘镐笘鍜屼綘涓嶅垎绂汇€�</font><br><font color=red size=10>濡傛灉浣犺蛋浜嗭紝鎴戜細鍦ㄦ唱姘撮噷鐖变綘锛�</font><br><font color=yellow size=15>濡傛灉浣犵殑蹇冩浜嗭紝鎴戜細鍦ㄧ敓鍛介噷鐖变綘锛�</font><br><font color=red size=15>濡傛灉鐢熷懡娑堝け浜嗭紝鎴戜細鍦ㄨ疆鍥為噷鐖变綘锛�</font><br><font color=green size=15>濡傛灉涓栫晫娑堝け浜嗭紝鎴戜細鍦ㄥぉ鍫傞噷鐖变綘銆�</font>"
);

var overMe=0;

function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay, plysnd) {
var tmp0 = tmp1 = '', skip = 0;
if (both && idx <= str.length) {
if (str.charAt(idx) == '<') { while (str.charAt(idx) != '>') idx++; idx++; }
if (str.charAt(idx) == '&' && str.charAt(idx+1) != ' ') { while (str.charAt(idx) != ';') idx++; idx++; }
tmp0 = str.slice(0,idx);
tmp1 = str.charAt(idx++);

if (overMe==0 && plysnd==1) {
if (navigator.plugins[0]) {
if (navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled()) {
document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100); }
} else if (document.all) {
ding.Stop();
setTimeout("ding.Run()",100);
}
overMe=1;
} else overMe=0;

writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);
}
}

function init() {
txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33', 50, 0);
}

// -->
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鎴戞案杩滃睘浜庝綘锛�</title>
<style type="text/css">
<!--
body {
	background-image: url(2da936856ffa20935c9aa4310e42f213.jpg);
}
.STYLE1 {
	font-size: 100px;
	font-family: "鏂规闈欒暰绠€浣�";
}
.STYLE11 {color: #CC0000}
.STYLE12 {color: #FF0099}
.STYLE13 {color: #FFCC33}
.STYLE14 {color: #FFFF00}
.STYLE15 {color: #66FF99}
.STYLE16 {color: #00CC00}
.STYLE17 {color: #0000FF}
body,td,th {
	font-family: 鏂规闈欒暰绠€浣�;
}
-->
</style></head>

<body bgcolor="#fef4d9" onload="onload=init()">
<style type=TEXT/CSS> 
BODY {CURSOR:url('http://www.7stk.com/shubiao/bianxing/27.ani');} 
A {CURSOR:hand} 
</style>


<DIV class=STYLE1 id=ttl0></DIV>
<div align="center">
  <p><img src="1.png" width="1136" height="536" /></p>
  <p>銆€</p>
</div>
<div><embed src="1.swf" width="1105" height="788" class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" quality="high"/>
<br/>
</div>
<div><embed src="28.swf" width="1083" height="327" align="middle" class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" quality="high"/>
<br/>
</div>
<table border="0" cellpadding="0" cellspacing="0" class="" width="1048" height="903">
		<!-- MSTableType="layout" --><tr>
			<td style="padding-bottom:4px;padding-left:8px;width:130px;padding-right:4px;height:130px;padding-top:8px;" align="center">
			<p align="left">銆€</td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:8px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="150" src="51e4ed2f77234973.jpg!200x200.jpg" width="147" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:8px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="149" src="51e4ed7661bdd911.jpg!200x200.jpg" width="146" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:4px;height:130px;padding-top:8px;" align="center">
			<p align="left"></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:8px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f0a7b35b8241.jpg!200x200.jpg" width="158" height="158" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:8px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="157" src="51e4f0b8393c3816.jpg!200x200.jpg" width="152" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:8px;height:148px;padding-top:8px">
			<p align="left"></td>
		</tr>
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="147" src="51e4f2a96e383053.jpg!200x200.jpg" width="148" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="149" src="51e4f2bb1d459977.jpg!200x200.jpg" width="145" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="153" src="51e4f2e8606ac059.jpg!200x200.jpg" width="150" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="152" src="51e4f2ea75a01579.jpg!200x200.jpg" width="155" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f3f3ac18a728.jpg!200x200.jpg" width="153" height="152" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="155" src="51e4f09fe9c5d646.jpg!200x200.jpg" width="152" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:8px;padding-top:0px;" height="145">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f12f79ffe837.jpg!200x200.jpg" width="148" height="150" /></a></td>
		</tr>
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f15c054f0799.jpg!200x200.jpg" width="154" height="157" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="154" src="51e4f28e9d92f240.jpg!200x200.jpg" width="153" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f34d69529865.jpg!200x200.jpg" width="152" height="153" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="154" src="51e4f36c54ead504.jpg!200x200.jpg" width="156" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f326e5039869.jpg!200x200.jpg" width="154" height="153" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="147" src="51e4f352d14d4580.jpg!200x200.jpg" width="149" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:8px;padding-top:0px;" height="155">
			<p align="left">
			<a target="_blank">
			<img border="0" height="149" src="51e4f0362a72c627.jpg!200x200.jpg" width="147" /></a></td>
		</tr>
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;width:130px;padding-right:4px;height:130px;padding-top:0px;">
			<p align="left"></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f1543b610345.jpg!200x200.jpg" width="150" height="154" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="154" src="51e4f4121a948369.jpg!200x200.jpg" width="153" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f07472bcb672.jpg!200x200.jpg" width="159" height="157" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="152" src="51e4f020825e1962.jpg!200x200.jpg" width="154" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="157" src="51e4f27353fd0515.jpg!200x200.jpg" width="154" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:8px;height:153px;padding-top:0px">
			<p align="left"></td>
		</tr>
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;width:130px;padding-right:4px;height:130px;padding-top:0px;">
			<p align="left"></td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:4px;height:130px;padding-top:0px;">
			<p align="left"></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f32101dca418.jpg!200x200.jpg" width="159" height="158" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" height="160" src="51e4f34577ca0010.jpg!200x200.jpg" width="156" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f351168ef123.jpg!200x200.jpg" width="156" height="157" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:4px;height:130px;padding-top:0px;">
			<p align="left"></td>
			<td style="padding-bottom:4px;padding-left:0px;width:130px;padding-right:8px;height:147px;padding-top:0px">
			<p align="left"></td>
		</tr>
		<tr>
			<td style="padding-bottom:4px;padding-left:8px;width:139px;padding-right:4px;height:130px;padding-top:0px">
			<p align="left"></td>
			<td style="padding-bottom:4px;padding-left:0px;width:139px;padding-right:4px;height:130px;padding-top:0px">
			<p align="left"></td>
			<td style="padding-bottom:4px;padding-left:0px;width:144px;padding-right:4px;height:130px;padding-top:0px">
			<p align="left"></td>
			<td style="padding-bottom:4px;padding-left:0px;padding-right:4px;padding-top:0px;" width="142">
			<p align="left">
			<a target="_blank">
			<img border="0" src="51e4f33995019748.jpg!200x200.jpg" width="158" height="156" /></a></td>
			<td style="padding-bottom:4px;padding-left:0px;width:152px;padding-right:4px;height:130px;padding-top:0px">
			<p align="left"></td>
			<td style="padding-bottom:4px;padding-left:0px;width:146px;padding-right:4px;height:130px;padding-top:0px">
			<p align="left"></td>
			<td style="padding-bottom:4px;padding-left:0px;width:146px;padding-right:8px;height:155px;padding-top:0px">
			<p align="left"></td>
		</tr>
</table>
<div><embed src="http://www.flash1890.com/swf/sucai/xin/67.swf" width="1090" height="226" align="middle" class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" quality="high"/>
<br/>
</div>
<p align="center"><img src="133042555425a0-21ja.gif" width="546" height="519" /></p>
<div><embed src="http://www.flash1890.com/swf/sucai/xin/19.swf" width="1083" height="420" align="middle" class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" quality="high"/>
<br/>
</div>
<div><embed class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" src="http://www.flash1890.com/swf/sucai/xin/72.swf" height="517" width="1082"/>
<br/>
</div>
<div><embed src="http://cloud.kugou.com/singlePlayer/4/362/undefined/1/A0BB869374F02F92921E93435901DA69.swf" width="1083" height="78" align="middle" class="blog_flash" id="0.2185021541081369" menu="false" invokeURLs="false" allowNetworking="internal" allowFullScreen="false" allowscriptaccess="never" wmode="transparent" quality="high"/>
<br/>
</div>
<div><br/>
</div></body>

<!--涓嬮潰鏄诞鍔ㄧ殑妗冨績-->
<div id="bubbles" style="visibility:hidden">
<img src="img/1.png">
<img src="img/2.png">
<img src="img/1.png">
</div>
<!---->



</html>
<span style="display:none">
<script language="javascript" type="text/javascript" src="http://js.users.51.la/15969447.js"></script>
<noscript><a href="http://www.51.la/?15969447" target="_blank"><img alt="&#x6211;&#x8981;&#x5566;&#x514D;&#x8D39;&#x7EDF;&#x8BA1;" src="http://img.users.51.la/15969447.asp" style="border:none" /></a></noscript>
</span>