利用HTML编写生日祝福

李现分现

已于 2022-12-10 19:29:53 修改

阅读量2w

点赞数 22

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

于 2021-01-17 20:45:52 首次发布

本文链接：https://blog.csdn.net/qq_47828130/article/details/112757480

版权

html 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

利用HTML编写生日祝福（更新版）

注意

最近，有很多朋友反映图片。视频加载不出来，只要所有文件都放在一起就好
在这里插入图片描述

朋友生日到了，利用所学知识给他/她一个惊喜，是作为计算机专业的你最大的乐趣。
如果你是非计算机专业的，也没关系。
操作步骤：

新建记事本
粘贴代码
文件名后缀改为.html
双击打开
是我多心了吧！为何在下如此话多。

图片如何寻找？直接上网搜索，能用PS扣下来最好，实在不行也没关系，直接简单粗暴导入即可。
视频如何寻找？很简单，上某gou音乐点击分享，视频分享，便可保存于手机，自己发送给电脑

1.首先，做个低配版百度首页
利用爬虫抓取百度窗口图标ico（如果你对python不熟悉，请自行忽略这一步骤！）

#引入库，若报错cmd界面切换到python安装路径/Scripts/pip install requests
import requests
r=requests.get("https://baidu.com/favicon.ico")
#在.py文件目录下保存图片
with open('favicon.ico','wb')as f:
    f.write(r.content)

效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="icon" href="D:\python\爬虫练习\favicon.ico" type="image/x-icon"/><!--如果你忽略了上面的步骤，请忽略这一步骤-->
		
		<style type="text/css">/*css样式，页面布局*/
			table{border-collapse:collapse;}
			#txt{
				resize:none;
				width:600px;
				height:40px;
				font-size:20px;
				font-color:red;
				}
			a{
				border:1px solid;
				text-decoration:none;
				font-family:微软雅黑；
				font-size:10px;
				font-color:red;
				}
			img{width:600px;
				height:300px;
				
				}
			.img_1{text-align:center;}
			#btn{
				width:100px;
				height:40px;
				
				font-size:20px;
				}	
		</style>
		<script>
			window.onload=function(){//引用方法，进入页面自动弹出
				alert("请输入您的生日！\nx月x日");
				var oBtn=document.getElementById("btn");//获取按钮
				var oTxt=document.getElementById("txt");//获取文本框
				oTxt.focus();//获得光标焦点
				oBtn.onclick=function(){//按钮功能
					if (oTxt.value == "") {//文本框为空，提示输入！
						alert("请输入你的生日！")
						}
						if (oTxt.value == "1月16日"){//判断输入日期是否一致，一致打开另一个窗口，自动播放视频
							alert("生日快乐！")//点击确定，开始播放视频
							window.open(url="srkl.mp4",target="_blank")
							}
							if(oTxt.value != ""&&oTxt.value != "1月16日"){
								alert("请重新输入！")
						}
					}
				}	
		</script>
	</head>
	<body>
		<div class="img_1">
		<img  src="百度logo.jpg"/><!--主页百度logo图片，找张像样点的照片插入-->
		</div>
		<form>
			<div class="img_1">
	    <input id="txt" type="text"/>
		<input id="btn" type="button" value="搜索"/>
		
		    </div>
		 </form>
	</body>
</html>