User-Profile-Image
hankin
  • 5
  • 首页
  • 仓库
  • 留言
  • 免费下载v1.3.5
  • 分类
    • Yii2
    • wordpress
    • typeecho
    • server
    • qrcode
    • postgresql
    • php
    • jquery
    • javascript
    • html5
    • go
    • css3
    • coding
  • 页面
    • icon图标
    • 专题
    • 建站维护
    • 留言
    • 站点地图
  • 友链
    • 老赵茶馆
    • 淮城一只猫
    • 雨林寒舍
    • 饼子的博客
    • 轩枫阁
    • 广告联盟大事记
    • 主题笔记
    • 八方博客
    • 张维龙的个人博客
    • 瑞课学院
    • BBJ不败君
    • 悠悠吧
    • Heanny Blog
    • 资源谷
    • Yolen
Help?

Please contact us on our email for need any support

Support
    首页   ›   正文
php

2020情人节表白页面(代码分享)

2020-04-17 10:16:45
875  0 5

趁此单身汪伤心之日,作为一名前端程序猿的我也按捺不住了,撸个表白页面送给广大想表白的人儿。话不多说,先看效果(网页地址):

功能
一个网页输入名称,生成带参数的网址。
浏览器输入该网址,即可打开带有该名字的网页,图片轮播,还带有音乐哟
(简单实现,本文不是技术软文,而是小工具推荐啊啊哈哈)
(ps: 已经做了移动端适配,手机打开效果更加哦)
代码
// name.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<title>输入名字</title>
<style>
body {
min-height: 100vh;
background: linear-gradient(#1d2b64, #f8cdda);
color: #fff;
font-family: PingFangSC-Regular;
padding: 0;
margin: 0;
}
input {
display: inline-block;
width: 80%;
height: 32px;
line-height: 1.5;
padding: 4px 7px;
margin: 20px auto 0 auto;
font-size: 16px;
border: 1px solid #dcdee2;
border-radius: 4px;
color: #515a6e;
background-color: #fff;
background-image: none;
position: relative;
cursor: text;
-webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
-webkit-box-shadow 0.2s ease-in-out;
transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
-webkit-box-shadow 0.2s ease-in-out;
transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}
.button {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
width: 80%;
height: 40px;
background: rgba(89, 126, 247, 1);
border-radius: 44px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 20px;
cursor: pointer;
}
.button-shadow {
width: 80%;
height: 40px;
background: rgba(106, 140, 253, 1);
border-radius: 44px;
opacity: 0.3081;
-webkit-filter: blur(4px);
filter: blur(4px);
margin-top: -36px;
}
#card {
width: 80%;
box-sizing: border-box;
padding: 20px 12px;
word-wrap: break-word;
}
@media screen and (min-width: 800px) {
.container {
width: 350px;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div>
<div style=”text-align: center; margin-top: 40px”>
<h2>Happy Valentine’s Day</h2>
<input type=”text” id=”name” />
</div>
<script>
window.onload = function() {
document.getElementById(“btn”).addEventListener(“click”, function() {
let name = document.getElementById(“name”).value;
if (name === “”) {
alert(“请输入姓名”);
return;
}
let url =
“https://zxpsuper.github.io/Demo/valentine_day/index.html?name=” +
encodeURIComponent(encodeURIComponent(name));
document.getElementById(“card”).innerHTML = url;
});
};
</script>
<div
style=”display: flex;margin-top: 40px; flex-direction:column;align-items: center ”
>
<div id=”btn”>确定</div>
<div></div>
<div id=”card”></div>
<p id=”copy-btn”>复制以上网址发给他人吧</p>
</div>
</div>
</body>

</html>

//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<title>情人节快乐</title>
<style>
img {
width: 100%;
}
body {
min-height: 100vh;
background: linear-gradient(#1d2b64, #f8cdda);
color: #fff;
font-family: PingFangSC-Regular;
padding: 0;
margin: 0;
}
.avatar {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid #fff;
}
.shadow {
position: absolute;
left: 0;
z-index: -1;
filter: blur(50px);
}
.btn-group {
display: flex;
margin-top: 40px;
justify-content: space-between;
align-items: center;
}
.btn-group div {
flex: 1;
text-align: center;
}
.sure {
padding: 14px 0;
background: linear-gradient(
180deg,
rgba(255, 127, 87, 1) 0%,
rgba(221, 40, 39, 1) 100%
);
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.cancel {
padding: 14px 0;
background: #eee;
color: #333;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
marquee {
background: none;
}
@media screen and (min-width: 800px) {
.container {
width: 350px;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div>
<div style=”padding: 12px”>
<div
style=”position: relative; display: flex; align-items: center; margin-bottom: 10px”
>
<img src=”avatar.jpg” alt=”” />
<img src=”avatar.jpg” alt=”” class=”avatar shadow” />
<span style=”margin-left: 10px” id=”name”>小皮咖</span>
</div>
<marquee scrolldelay=”0″ scrollamount=”20″>
<img src=”1.png” />
<img src=”2.png” />
<img src=”3.png” />
<img src=”4.png” />
<img src=”5.png” />
<img src=”6.png” />
<img src=”7.png” />
</marquee>
<audio
src=”http://att.chinauui.com/day_181211/20181211_8480d0323003455bd6de8CcQ3Eq28Mm9.mp3″
autoplay
loop
>
您的浏览器不支持 audio 标签。
</audio>
<div>
<div onclick=”alert(‘情人节快乐(^o^)/~’)”>
确定
</div>
<div onclick=”alert(‘取消无效,请重新选择’)”>取消</div>
</div>
</div>
</div>
<script>
function getQueryString(name) {
var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”, “i”);
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return r[2];
}
return null;
}
window.onload = function() {
let name = getQueryString(“name”);
document.getElementById(“name”).innerHTML = decodeURIComponent(
decodeURIComponent(name)
);
};
</script>
</body>
</html>
源码地址

最后祝大家情人节快乐!!

相关推荐:
1.2018浪漫七夕:7款程序员必备表白源码(超炫酷)
2.浪漫程序员:情人节唯美表白代码
3.2019浪漫情人节:8款程序员必备表白源码
4.2019浪漫七夕:十款程序员必备表白源码

微信
分享

相关标签:情人节

本文转载于:segmentfault,如有侵犯,请联系a@php.cn删除

上一篇:兄弟连PHP培训学校倒闭的背后原因

下一篇:微盟运维删库跑路事件,程序员圈内怎么看?

如本文“对您有用”,欢迎随意打赏作者,让我们坚持创作!

5 打赏
hankin
smarty_hankin主题 持续为开发者免费开源!
143文章 290评论 760点赞 192652浏览

关注公众号 回复【下载主题】
加QQ群1018841266
最新评论
+207
随机文章
开发者福音:苹果宣布开始默认完全屏蔽第三方 Cookie
1年前
php网站即时截图
1年前
php中怎么将中文转换拼音
1年前
php中echo与print有什么区别
1年前
2020北京php培训哪里好?
1年前
我的作品




tags
css3 html5 javascript php postgresql qrcode typeecho wordpress wordpress主题 Yii2
Copyright © 2021 网站备案号: 浙ICP备20002401号
smarty_hankin 主题. Designed by hankin
主页
页面
  • icon图标
  • 专题
  • 建站维护
  • 留言
  • 站点地图
博主
hankin
hankin 管理员
博客模板_网站模板_HTML模板_博客模板网站免费下载
143 文章 290 评论 192652 浏览
测试
测试
赞赏作者

请通过微信、支付宝 APP 扫一扫

感谢您对作者的支持!

 支付宝 微信支付