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