利用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)
效果如下:
<!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有了初步的了解并将自己的想法实践出来!
图片及视频来源于网络,侵联删!
更多推荐
已为社区贡献5条内容
所有评论(0)