利用HTML编写生日祝福(更新版)

注意

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

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

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

图片如何寻找?直接上网搜索,能用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>

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

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

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

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

图片及视频来源于网络,侵联删!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐