利用HTML编写生日祝福_html生日快乐

作者：Monodyee | 2024-02-15 15:09:56

踩

html生日快乐

利用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)
1
2
3
4
5
6

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

<!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>

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

提供图片
不能说一模一样，只能说毫无关系，律师函警告！
在这里插入图片描述

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

插入视频比较简单，将所找视频放在html文件同一目录下即可！
在这里插入图片描述

注意：所有文件应位于同一文件目录中，记得把代码的路径改成自己所在文件路径。
这是最后一次更新了，由于菜，很多想法只能慢慢从脑海里浮现，再去实践。
我真的挺开心的，第一次这么用心写东西，利用上学期期末时间碎片对HTML，CSS以及JS有了初步的了解并将自己的想法实践出来！

图片及视频来源于网络，侵联删！

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