七夕表白

最新推荐文章于 2021-09-07 11:07:04 发布

ACE1125

最新推荐文章于 2021-09-07 11:07:04 发布

阅读量527

点赞数 2

分类专栏：前端文章标签：七夕表白 HTML Javascript 动图循环

本文链接：https://blog.csdn.net/h_h_1122/article/details/98762681

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、七夕表白主页面

界面功能实现：

1.播放音乐；

2.大小标题；

3.循环歌词；

4.更换图片；

5.点击“OK”，跳转到副页面；

6.点击“ON”，跳转到另外窗口。

第一部分

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link href="img/mail.PNG" rel="icon" sizes="any" type="image/x-icon" />
		<title>七夕快乐！</title>
		<style>
			h2{
				background-color: chartreuse;
				color: coral;
				width: 400px;
				height: 40px;
			}
			h3{
				background-color: palegreen;
				color: palevioletred;
				width: 400px;
				height: 30px;
			}
			div{
				position: relative;
				text-align: center;
				color: white;
			}
			#c1{
				color: red;
			}
			#c2{
				color: #333399;
			}
			#c3{
				color: #99FF00;
			}
			#c4{
				color: white;
			}
			form{
				position: relative;
				  
			}
			img{
				 width: 300px;
				 height: 200px;
			}
			body{
				background-color: palevioletred;
			}
			input{
				background-color: gold;
				width: 100px;
				height: 20px;
			}
		</style>
	</head>
	<body> 
		<embed src="img/程潇 - 若情.mp3" width="" height=""  autostart="true" loop="true"  ></embed>
	<center> 
		<h2>"小姐姐，我观察你好久了！！！"</h2>
		<h3>"我可能大概也许八成，看上你了！"</h3>
			<marquee direction="up"> 
		 <div >
		<p id="c2">对面的女孩看过来</p>

          <p id="c1">看过来 看过来</p> 

         <p id="c3">这里的表演很精彩</p>

         <p id="c1">请不要假装不理不睬</p>

        <p id="c2">对面的女孩看过来</p>

        <p id="c1">看过来 看过来</p>

         <p id="c4">不要被我的样子吓坏</p>

         <p id="c3">其实我很可爱</p>

         <p id="c2">寂寞男孩的悲哀</p>

		<p id="c4">说出来 谁明白</p>

		<p id="c1">求求你抛个媚眼过来</p>

		<p id="c3">哄哄我</p>

		<p id="c4">逗我乐开怀</p>

		<p id="c3">我左看右看 上看下看</p>

		<p id="c4">原来每个女孩都不简单</p>

		<p id="c2">我想了又想 我猜了又猜</p>

		<p id="c4">女孩们的心事还真奇怪</p>

		<p id="c4">寂寞男孩的苍蝇拍</p>

		<p id="c3">左拍拍 右拍拍</p>

		<p id="c1">为什么还是没人来爱</p>

		<p id="c2">无人问津 真无奈</p>

		<p id="c4">对面的女孩看过来</p>

		<p id="c3">看过来 看过来</p>

		<p id="c4">寂寞男孩情窦初开</p>

		<p id="c2">需要你给我一点爱</p>

		<p id="c3">Hi Hi</p>

		<p id="c4">我左看右看 上看下看</p>

		<p id="c2">原来每个女孩都不简单</p>

		<p id="c1">我想了又想 我猜了又猜</p>

		<p id="c3">女孩们的心事还真奇怪</p>

		<p id="c4">我左看右看 上看下看</p>

		<p id="c3">原来每个女孩都不简单</p>

		<p id="c4">我想了又想 我猜了又猜</p>

		<p id="c2">女孩们的心事还真奇怪</p>

		<p id="c3">爱 真奇怪</p>

		<p id="c2">来 来 哦嘿哦</p>

		<p id="c4">来 来 哦</p>
		</div>
		</marquee>
	<form onmouseover="stopRotate()" onmouseout="startRotate()"> 
	<img id="img1"  src="img/01.jpeg"  />
	<br /><br />
	</form>
	<input type="button" value="OK" onclick="btn1()"/>&ensp;&ensp;
	<input type="button" value="NO" onclick="btn2()"/>
	</center>
	</body>

javascript代码

<script type="text/javascript">
		var imageArray=["01.jpeg","02.jpeg","03.jpeg","04.jpeg","05.jpeg","06.jpeg","07.jpeg","08.jpeg","09.jpeg","10.jpeg","11.jpeg","12.jpeg","13.jpeg","14.jpeg","15.jpeg","16.jpeg","17.jpeg","18.jpeg","19.jpeg",
		"20.jpeg","21.jpeg","22.jpeg","23.jpeg","24.jpeg","25.jpeg"];
		//当前所显示的图片的索引
		var imageIndex=1;
		//定时器对象
		var imageTimer;
		//启动图片轮转
		function startRotate(){
			var rotateFunc=function(){
				var image=document.getElementById("img1");
				 
				image.src="img/"+imageArray[imageIndex];
				if(imageIndex==imageArray.length-1){
					imageIndex=0;
				}else{
					imageIndex++;
				}
				
			}
			imageTimer=window.setInterval(rotateFunc,900);
		}
		function stopRotate(){
			window.clearInterval(imageTimer);
		}
		function btn1(){
			alert("真的吗？幸福来得太突然，不会再做梦吧！！！，你捏我一下下。");
			window.open("js/houxu.html");
		}
		function btn2(){
			alert("你错过了一个亿哦！");
			window.open("img/10000.png");
		}
	</script>

第二部分

主要是实现动态图的表达以及文字示爱

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>喜欢吗？</title>
		<style>
			body{
				
				background-color:red;
			}
			table{
				
				border: 1px solid cyan;
				width: 420px;
				height: 140px;
			}
			td{
				width: 200px;
				height: 140px;
				border: 1px solid aqua;
			}
			img{
				width: 200px;
				height: 140px;
			}
			div{
				color: cyan;
			}
		</style>
	</head>
	<body>
		<center> 
		<table border="1">
			<caption><h2 style="color: #00FFFF;"> 喜欢吗？</h2></caption>
			<tr>
				<td><img src="../img/1.gif" /> </td>
				<td><img src="../img/2.gif" /> </td>
				<td><img src="../img/3.gif" /> </td>
			</tr>
			<tr>
				<td><img src="../img/4.gif" /> </td>
				<td><img src="../img/5.gif" /> </td>
				<td><img src="../img/6.gif" /> </td>
			</tr>
		</table>
		<div>
			<p>我喜欢你 </p>
			<p>天生丽质  慧质兰心  秀外慧中  暗香盈袖  闭月羞花  沉鱼落雁  倾国倾城  温婉娴淑  花容月貌  明目皓齿<br />
			        <br />
			      仪态万端  婉风流转  美撼凡尘  聘婷秀雅  娥娜翩跹  俏丽多姿   美艳绝世  国色天香  美愈天人  清秀高雅<br />
			       <br />
			      楚楚动人  貌赛西施  姿容绝代  如花似玉  窈窕淑女  气质高雅   顾盼流转  清丝纠缠  美丽四射  樱桃小口<br />
			   <br />
			      秋波流转  樱桃小口  粉妆玉琢  桃腮杏脸  亭亭玉立  楚楚动人   明眸善睐  娇艳妩媚  贤良淑德  秀色可餐  <br />
			      <br />
			      婀娜多姿  美丽动人  人面桃花  柳眉杏眼  温文尔雅  明艳动人   肤如凝脂  眉如新月  一代佳人  一代容华<br />
			           </p>
		</div>
		</center>
	</body>
</html>

运行界面

“NO”按钮实现界面

ACE1125

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
七夕表白

一、七夕表白主页面界面功能实现：1.播放音乐；2.大小标题；3.循环歌词；4.更换图片；5.点击“OK”，跳转到副页面；6.点击“ON”，跳转到另外窗口。第一部分HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <li...
复制链接

扫一扫