soul2
2 years ago
commit
8f4c8cfa86
9 changed files with 288 additions and 0 deletions
@ -0,0 +1,61 @@ |
||||
@media(max-width:669px) { |
||||
|
||||
* { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
body .mv-bg { |
||||
animation-duration: 9s; |
||||
} |
||||
|
||||
body { |
||||
height: 100%; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#page { |
||||
padding: 0 5%; |
||||
padding-top: 11.5vh; |
||||
} |
||||
|
||||
input[type='text'] { |
||||
border-radius: 2.5px; |
||||
outline: none; |
||||
border: 1px solid rgba(153, 153, 255, .6); |
||||
background-color: rgba(0, 0, 0, .3); |
||||
color: #fff; |
||||
width: 300px; |
||||
padding-left: .5em; |
||||
height: 40px; |
||||
} |
||||
|
||||
input[type='text']:hover { |
||||
box-shadow: cyan 0 0 3px; |
||||
background-color: rgba(0, 0, 0, .1); |
||||
} |
||||
|
||||
input[type='text']:focus { |
||||
box-shadow: cyan 0 0 3px; |
||||
background-color: rgba(0, 0, 0, .1); |
||||
} |
||||
|
||||
input::input-placeholder { |
||||
color: #fff; |
||||
} |
||||
|
||||
#check-result { |
||||
color: #fff; |
||||
margin-top: 8px; |
||||
text-shadow: cyan 1px 1px 2.5px; |
||||
} |
||||
|
||||
.outlink { |
||||
width: 100%; |
||||
margin-top: 40px; |
||||
} |
||||
.outlink span { |
||||
color: white; |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,61 @@ |
||||
@media(min-width:669px) { |
||||
|
||||
body { |
||||
background: url(http://soul2.cn/images/background/home/1.jpg) center no-repeat fixed; |
||||
background-size: 100% 100%; |
||||
-moz-background-size: 100% 100%; |
||||
-webkit-background-size: 100% 100%; |
||||
height: 100%; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#page { |
||||
padding: 0 22vh; |
||||
padding-top: 4vh; |
||||
} |
||||
|
||||
input[type='text'] { |
||||
border-radius: 2.5px; |
||||
outline: none; |
||||
border: 1px solid rgba(153, 153, 255, .6); |
||||
background-color: rgba(255, 255, 255, .1); |
||||
color: #fff; |
||||
width: 200px; |
||||
padding-left: .5em; |
||||
height: 30px; |
||||
} |
||||
|
||||
input[type='text']:hover { |
||||
box-shadow: cyan 0 0 3px; |
||||
background-color: rgba(255, 255, 255, .175); |
||||
} |
||||
|
||||
input[type='text']:focus { |
||||
box-shadow: cyan 0 0 3px; |
||||
background-color: rgba(255, 255, 255, .25); |
||||
} |
||||
|
||||
input::input-placeholder { |
||||
color: #fff; |
||||
} |
||||
|
||||
input::-webkit-input-placeholder { |
||||
color: #cccccc; |
||||
} |
||||
|
||||
#check-result { |
||||
color: #fff; |
||||
margin-top: 2px; |
||||
text-shadow: cyan 1px 1px 2.5px; |
||||
} |
||||
|
||||
.outlink { |
||||
width: 15%; |
||||
margin-top: 30px; |
||||
} |
||||
.outlink span { |
||||
color: white; |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,31 @@ |
||||
function isQuality(n) { |
||||
let m = Math.floor(n / 2) + 1 |
||||
for (var i = 2; i < m; i++) { |
||||
if (n % i == 0) { |
||||
return false |
||||
} |
||||
} |
||||
return true |
||||
} |
||||
|
||||
function checkNaturalnumber(obj) { |
||||
return (/^[0-9]+$/.test(obj) && (obj > 0)) |
||||
} |
||||
|
||||
function handleInputChange() { |
||||
var a = document.querySelector("input[type='text']") |
||||
var r = document.getElementById("check-result") |
||||
if (!a.value) { |
||||
r.innerText = '未输入内容' |
||||
} else if (a.value.length > 10) { |
||||
r.innerText = '输入内容过长' |
||||
} else if (!checkNaturalnumber(a.value)) { |
||||
r.innerText = '输入内容不合法，请输入自然数！' |
||||
} else { |
||||
r.innerText = `${a.value} ${isQuality(a.value) ? '是' : '不是'}质数` |
||||
if (a.value == 1) { |
||||
r.innerText += `\n任何大于1的整数均可被表示成一串唯一素数之乘积。为了确保该定理的唯一性，1被定义为不是素数。——Wiki` |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Soul的记事本</title> |
||||
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> |
||||
<link rel="stylesheet" href="http://soul2.cn/example/style/globals.css"> |
||||
<link rel="stylesheet" href="./checkQuality-pc.css"> |
||||
<link rel="stylesheet" href="./checkQuality-move.css"> |
||||
<script src="http://soul2.cn/example/style/mv-bg.js"></script> |
||||
<script src="http://soul2.cn/example/style/footer.js"></script> |
||||
<script src="./checkQuality.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="page"> |
||||
<input type="text" placeholder="输入数字以判断是否为质数" oninput="handleInputChange()" /> |
||||
<div id="check-result">未输入内容</div> |
||||
<div class="outlink"> |
||||
<span> |
||||
关联资料: |
||||
</span><br> |
||||
<a href="https://zh.wikipedia.org/wiki/%E8%B4%A8%E6%95%B0">wiki - 质数的定义</a> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,11 @@ |
||||
.footer { |
||||
position: absolute; |
||||
bottom: 10px; |
||||
left: 0; |
||||
text-align: center; |
||||
width: 100%; |
||||
} |
||||
|
||||
.beianhao { |
||||
color: #fff; |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
setTimeout(() => { |
||||
let footer = document.createElement('div') |
||||
footer.innerHTML = `<div class="footer"> <span class="beianhao on-pointer"> @Soul | <a href="http://beian.miit.gov.cn"> 粤ICP备2020098994号 </a></span></div>` |
||||
footer.classList.add("off-select") |
||||
document.querySelector('body').appendChild(footer) |
||||
let footer_style = document.createElement('link') |
||||
footer_style.innerHTML = `<link rel="stylesheet" href="http://soul2.cn/example/style/footer.css">` |
||||
document.querySelector('head').appendChild(footer_style) |
||||
}, 0) |
||||
@ -0,0 +1,33 @@ |
||||
* { |
||||
font-family: '微软雅黑'; |
||||
box-sizing: border-box; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
.off-select, |
||||
.menu-item { |
||||
-webkit-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
} |
||||
|
||||
.on-pointer { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
input::-webkit-input-placeholder { |
||||
color: #aaa; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
color: #ff9600; |
||||
} |
||||
|
||||
a:hover { |
||||
border-bottom: 1px solid #ff9600; |
||||
} |
||||
|
||||
|
||||
@ -0,0 +1,46 @@ |
||||
@media(max-width:669px) { |
||||
.mv-bg { |
||||
background: linear-gradient(135deg, |
||||
hsl(170deg, 25%, 20%), |
||||
hsl(190deg, 45%, 30%), |
||||
hsl(240deg, 25%, 20%), |
||||
hsl(280deg, 45%, 30%), |
||||
hsl(320deg, 30%, 60%)); |
||||
background-size: 500% 500%; |
||||
-moz-background-size: 500% 500%; |
||||
-webkit-background-size: 500% 500%; |
||||
animation: bg-linear 60s infinite; |
||||
height: 100%; |
||||
width: 100%; |
||||
position: absolute; |
||||
top: 0%; |
||||
left: 0; |
||||
z-index: -1; |
||||
} |
||||
|
||||
@keyframes bg-linear { |
||||
0% { |
||||
background-position: 0% 0%; |
||||
} |
||||
|
||||
20% { |
||||
background-position: 50% 0%; |
||||
} |
||||
|
||||
40% { |
||||
background-position: 0% 50%; |
||||
} |
||||
|
||||
60% { |
||||
background-position: 100% 0%; |
||||
} |
||||
|
||||
80% { |
||||
background-position: 0% 100%; |
||||
} |
||||
|
||||
100% { |
||||
background-position: 0% 0%; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,10 @@ |
||||
if( window.innerWidth < 669 ){ |
||||
setTimeout(() => { |
||||
let mv_bg = document.createElement('div') |
||||
mv_bg.innerHTML = `<div class="mv-bg"></div>` |
||||
document.querySelector('body').appendChild(mv_bg) |
||||
let mv_bg_style = document.createElement('link') |
||||
mv_bg_style.innerHTML = `<link rel="stylesheet" href="http://soul2.cn/example/style/mv-bg.css">` |
||||
document.querySelector('head').appendChild(mv_bg_style) |
||||
}, 1) |
||||
} |
||||
Loading…
Reference in new issue