一个小HTML页面，不可拒绝

_苏歌

已于 2022-12-25 22:13:11 修改

阅读量229

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html css javascript

于 2022-07-20 00:42:27 首次发布

本文链接：https://blog.csdn.net/weixin_50767993/article/details/125883748

HTML 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了一个使用HTML、CSS和JavaScript编写的简单网页，该页面包含一个带有‘Yes’和‘No’按钮的div。点击'No'按钮时，div会随机改变位置，模拟一种互动的表白效果。代码示例详细解释了如何设置样式、监听事件以及实现元素动态移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说明代码的含义
icon图标主页下载资源里
可自行修改内容和数据

先搞一个div用来放按钮，
设置div的背景颜色、边缘距离等样式，
指定按钮设置js代码，随机改变位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author"  content="理查德;1295634075@qq.com" />
		<link rel="shortcut icon" href="img/爱心.ico" type="image/x-icon" />
		<title>LOVE</title> 
		<style>
			#love1{
				/*初始div宽度高度*/
				width: 250px;
				height: 250px;
				/*文字居中*/
				text-align: center; 
				
				/*边框、背景颜色、盒子*/
				border-radius: 0px;
				background: #0f26d7;
				
             	/*div初始边缘距离*/		
             	margin-top: 200px;
             	margin-left: 600px;	
			}
			#love1 input{
				width: 50px;
				height: 50px;
				margin: 30px;
				border-radius: 41px;
				background: #e2121d;	
			}	
		</style>
		
		<script>
			// yes键
			function Fun_Yes() {
			// 尝试询问
				prompt("您真的爱我嘛？（爱or不爱）","不爱")
				
			}
			// no键
			function Fun_No(){
				var love = document.getElementById("love1");
				// 移动div,随机改变边缘距离   							 1000、500 根据显示器分辨率不同可修改数据
				var left = Math.floor(Math.random()*1000);
				var top = Math.floor(Math.random()*500);
				// 改变边缘距离
				love.style.marginTop=top+"px";
				love.style.marginLeft=left+"px";
			}
			
		</script>
	</head>
	<body>
		<div id="love1">
			<hr />
			<h2>
				<!--文本提示信息-->
				Do you <font style="color: red;">LOVE</font> me?
			</h2>
			<!--是，确定键-->
			<input type="button" value="Yes" onclick="Fun_Yes()" />
			<!--否，取消键-->
			<input type="button" value="No" onmouseover="Fun_No()" />
		</div>
	</body>
</html>