阿喵，那是单身国王。呜呜，我要告白姐姐(弟弟)
功能：
输入网页名称以生成带有参数的网址。
浏览器输入此URL后，可以打开具有该名称的网页、照片旋转、音乐等
(简单的实现，这篇文章不是技术软文，而是小工具推荐哈哈)
(ps:已经适应了移动端，打开手机更有效。）
代码 :
//name.html
！DOCTYPE html
Html lang='en '
头(电影)
meta charset=' utf-8 '/
元名称=' viewport ' content=' width=device-width，initial-scale=1.0'/
meta http-equiv=' x-ua-compatible ' content=' ie=edge '/
输入标题名称/标题
风格(音乐)
Body {
min-height : 100 VH；
background 3360 linear-gradient(# 1d 2 b 64、# f 8 cdda)；
Color: # fff
font-family : ping Fang sc-regular；
padding : 0；
margin : 0；
}
Input {
display : inline-block；
width : 80%；
海特： 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 :文本：
-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、
框-shadow 0.2s ease-in-out；
transition : border 0.2s ease-in-out、background 0.2s ease-in-out、
p> 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 class="container">
<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 =
"; +
encodeURIComponent(encodeURIComponent(name));
document.getElementById("card").innerHTML = url;
});
};
</script>
<div
style="display: flex;margin-top: 40px; flex-direction:column;align-items: center "
>
<div class="button" id="btn">确定</div>
<div class="button-shadow"></div>
<div id="card"></div>
<p id="copy-btn">复制以上网址发给他人吧</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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 class="container">
<div style="padding: 12px">
<div
style="position: relative; display: flex; align-items: center; margin-bottom: 10px"
>
<img src="ava; alt="" class="avatar" />
<img src="ava; 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=";
autoplay
loop
>
您的浏览器不支持 audio 标签。
</audio>
<div class="btn-group">
<div class="sure" onclick="alert('情人节快乐\\(^o^)/~')">
确定
</div>
<div class="cancel" onclick="alert('取消无效，请重新选择')">取消</div>
</div>
</div>
</div>
<script>
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.loca(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>
大家下次情人节快乐啊！