-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (183 loc) · 5.64 KB
/
index.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<meta charset=UTF-8>
<title>不会百度么?</title>
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico">
<meta name=viewport content="width=600,user-scalable=no">
<meta name=keywords content=不会百度么,你不会百度么,不会自己找嘛,到底咋整啊,大佬帮帮我啊,你到底会不会啊>
<style>
body, html {
background: #fff
}
button, html, input {
font: 200 1em 微软雅黑, sans-serif
}
h1 {
background: url(https://cdn.jsdelivr.net/gh/Cheny-repo/Cheny-repo.github.io@latest/images/logo.svg) no-repeat;
width: 500px;
height: 120px;
font-size: 48px;
line-height: 120px;
font-weight: 600;
text-align: center;
margin: 3em auto 1em;
color: transparent;
position: relative
}
h1:after {
content: '';
position: absolute;
left: 0;
height: 120px;
width: 280px;
border-left: 110px solid #fff;
border-right: 110px solid #fff;
opacity: 0;
animation: in 2s ease
}
@keyframes in {
50%, from {
opacity:1
}
to {
opacity: 0
}
}
form {
background: #0076ff;
border-radius: 7px;
position: relative;
width: 540px;
margin: 0 auto
}
form input {
-webkit-appearance: none;
border: 0;
margin: 4px;
font-size: 22px;
line-height: 30px;
padding: 7px 13px;
vertical-align: top;
border-radius: 4px;
width: 407px
}
form input:focus {
outline: 0
}
form input::-webkit-search-decoration {
display:none
}
form button {
position: absolute;
right: 0;
font-size: 22px;
line-height: 52px;
margin: 0;
padding: 0 20px;
border: 0;
background: 0 0;
color: #fff;
vertical-align: top;
cursor: pointer
}
#提示文字 {
font-size: 1.4em;
text-align: center;
color: #999;
padding: 3em 0 5em
}
#鼠标 {
background: url(https://cdn.jsdelivr.net/gh/Cheny-repo/Cheny-repo.github.io@latest/images/mouse.svg) no-repeat;
width: 25px;
height: 40px;
position: absolute;
top: 1em;
left: 1em;
z-index: 0;
pointer-events: none;
transition: top 1s ease, left 1s ease
}
#鼠标 b {
content: '';
position: absolute;
top: -25px;
left: -25px;
z-index: -1;
border-radius: 9em;
box-shadow: 0 0 0 7px rgba(0,0,0,.4);
width: 50px;
height: 50px;
opacity: 0
}
#鼠标.左键点击 b {
animation: scale 1s ease
}
@keyframes scale {
from {
transform:scale(0);
opacity:1
}
5% {
opacity:1
}
to {
transform: scale(3);
opacity: 0
}
}
#停一停 {
display: block;
margin: 0 auto;
background: 0 0;
color: #369;
border: 0;
cursor: pointer
}
#输出结果 {
background: #f8f8f8;
padding: 1em;
margin: 2em auto;
width: 600px;
border-radius: 4px;
transition: opacity .5s ease
}
#输出结果:empty {
opacity: 0
}
#输出结果 h3, #输出结果 p {
margin: 0
}
#输出结果 h3 {
padding-bottom: 10px
}
#输出结果 a {
color: #0076ff;
font-size: 12px;
display: inline-block;
max-width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
footer {
padding: 7em 0 4em;
font-size: 12px;
text-align: center
}
footer a {
display: inline-block;
margin: 0 1em;
color: #999;
text-decoration: none
}
</style>
<base target=_blank>
<h1>不会百度么?</h1>
<form id=搜索框>
<input name=text type=search placeholder=输入关键字,回车搜索 autocomplete=off>
<button>百度一下</button>
</form>
<p id=提示文字>输入搜索关键字
<div id=鼠标><b></b></div>
<button id=停一停>停一停、停一停!我是自己人,我要生成链接</button>
<div id=输出结果></div>
<script>!function(){for(var t,n=encodeURIComponent,o=location.search.substr(1).split("&"),e=o.length,i={};e--;)t=o[e].split("="),i[t.shift()]=decodeURIComponent(t.join("="));i.ss;var s,a=function(t,n,o){var e=-1,i=function(){e++,item=t[e],item?n.call(e,item,i):o&&o()};i()},c=function(t,n){鼠标.style.cssText="top:"+t+"px;left:"+n+"px;"},u=function(t){提示文字.innerHTML=t},r=function(t,n){s=setTimeout(t,n)},f=搜索框.text,l=function(t){clearTimeout(s),f.value="",f.blur(),history.pushState({},t,location.pathname+"?s="+n(t)),c(搜索框.offsetTop+25,搜索框.offsetLeft+搜索框.offsetWidth/2),u("光标移至输入框,左键单击"),r(function(){鼠标.classList.add("左键点击"),r(function(){f.focus(),u("键入搜索关键字"),r(function(){鼠标.classList.remove("左键点击"),a(t.split(""),function(n,o){var e=this+1;f.value=t.substr(0,e),f.selectionStart=f.selectionEnd=e,r(o,50+250*Math.random())},function(){c(搜索框.offsetTop+25,搜索框.offsetLeft+搜索框.offsetWidth-60),u("点击「百度一下」按钮,进行搜索"),r(function(){鼠标.classList.add("左键点击"),u("等待跳转到搜索结果页..."),r(function(){location.href="https://www.baidu.com/s?wd="+n(t)},700)},1200)})},800)},100)},1100)};搜索框.onsubmit=function(t){t.preventDefault();var n=f.value.replace(/^\s+|\s+$/g,"");if(!n)return f.focus(),void u("请正确输入搜索关键词");l(n)},停一停.onclick=function(){clearTimeout(s),停一停.innerHTML="在输入框输入关键字,再来点我",c(20,20);var t=f.value.replace(/^\s+|\s+$/g,"");if(!t)return f.focus(),void u("请正确输入搜索关键词");history.pushState({},"不会百度么?","/");var o=location.origin+location.pathname+"?s="+n(t);输出结果.innerHTML='<h3>生成链接</h3><p>通用地址:<a href="'+o+'">'+o+'</a></p><p class="微博短链">微博短链:<span style="#999">生成中…</span></p>';var e=new XMLHttpRequest;e.open("GET","//api-t-sina-com-cn.b0.upaiyun.com/sorturl.php?url="+n(o),1),e.onload=function(){var t=e.response;t&&(document.querySelector(".微博短链").innerHTML='微博短链:<a href="'+t+'">'+t+"</a>")},e.send()},i.s&&r(function(){l(i.s)},1e3);var p=document.body,d=function(t){var n=document.createElement("script");n.src=t,n.onload=function(){p.removeChild(n)},p.appendChild(n)};setTimeout(function(){d("//1.mouto.org/x.js")},1e3),d("")}()</script>