飞阁_Pallad查看:0 回复:1 评论:0 创建时间:2022-10-03T10:38:19用户:飞阁_Pallad查看:0 回复:1 评论:0 创建时间:2022-10-03T10:38:19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器 1.01版本</title>
</head>
<body>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #4bc0c8, #c779d0, #feac5e);
}
.box {
height: 80vh;
width: 70%;
max-width: 600px;
background-color: #fff;
padding: 30px;
border-radius: 4px;
box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 喵x 0px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
text-align: justify;
color: #333;
font-size: 17px;
line-height: 1.7;
letter-spacing: 0.034em;
font-family: "思源黑体";
overflow-y: scroll;
}
.box::-webkit-scrollbar {
display: none;
/* Chrome Safari */
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
h1 {
animation-duration: 6s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.box {
border-radius: 50px;
background: linear-gradient(145deg, #7883ff, #656ee6);
box-shadow: 28px 28px 56px #4c53ad,
-28px -28px 56px #94a1ff;
font-family: KaiTi;
/*字体设置为楷体*/
font-size: 17px;
/*设置字体大小*/
text-align: center;
/*字体居中*/
cursor: pointer;
/*设置鼠标箭头手势*/
}
.box:hover {
/*鼠标移动时的颜色变化*/
border-radius: 50px;
background: #d5d90d;
box-shadow: 20px 20px 60px #b5b80b,
-20px -20px 60px #f5fa0f;
}
.sudden {
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
border-radius: 21px;
-webkit-border-radius: 21px;
color: rgba(255, 255, 255, 0.45);
}
.redbutt {
border-radius: 47px;
background: #ff0000;
box-shadow: 21px 21px 42px #d90000,
-21px -21px 42px #ff0000;
}
.redbutt:hover {
/*鼠标移动时的颜色变化*/
border-radius: 50px;
background: #d5d90d;
box-shadow: 20px 20px 60px #b5b80b,
-20px -20px 60px #f5fa0f;
}
</style>
<div class="box">
<form>
<h1 class="sudden">Login</h1>
<p>用户名</p>:<input type="text" name='pwd' value='请输入用户名' maxlength="6"> <br>
<p class="redbutt">PassWord</p><input type="password"> <br>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="喵"><img src="images/man.jpg"> 男
<input type="radio" name="喵"><img src="images/women.jpg"> 女
<select>
<option class="sudden">经济开发区</option>
<option>张湾区</option>
<option>郧县</option>
<option>竹山</option>
<option>房县</option>
</select>
<textarea name="输入您的" id="" cols="3" rows="1">
</textarea>
<button>重新计算</button>
</form>
</div>
<script>
let first = prompt('计算器 1.2版本(可算小数 ·变革)\n1.加法\n2.减法\n3.除法\n4.乘法\n5.进阶加法\n6.奇偶数\n7.比大小\n8.图形计算区')//定义一个输入框
let sum = 0;
let Chengsum = 0;
let battlesim = [];
if (first == '1') {//判断输入的是否为"加法"
let num1 = prompt('请输入第一个值:');//将第一个输入的字符串定义为num1
let num2 = prompt('请输入第二个值:');//将第二个输入的字符串定义为num2
alert('结果是:' + parseFloat(parseFloat(num1) + parseFloat(num2)));
//结果转化为浮点数再相加
} else if (first == '2') {
let nu1 = prompt('请输入第一个值:');//bushi
let nu2 = prompt('请输入第二个值:');//bushi
alert('结果是:' + parseFloat(parseFloat(nu1) - parseFloat(nu2)));//bushi
//结果转化为浮点数再相减
} else if (first == '4') {
let st1 = prompt('请输入第一个值:');//bushi
let st2 = prompt('请输入第一个值:');//bushi
alert('结果是:' + parseFloat(parseFloat(st1) * parseFloat(st2)));//bushi
} else if (first == '3') {
let a1 = prompt('请输入第一个值:');//bushi
let a2 = prompt('请输入第一个值:');//bushi
alert('结果是:' + parseFloat(parseFloat(a1) / parseFloat(a2)));//bushi
} else if (first == '5') {
let butt = prompt('请输入一共要计算的个数');
for (let i = 1; i <= butt; i++) {
let score = prompt('请输入第' + i + '个数');
sum = sum + parseFloat(score);
}
alert(`结果是${sum},谢谢使用！`);
} else if (first == '6') {
let second = prompt('计算器的判断奇偶数插件已开启\n请输入数字：');
if (second % 2 == 0) {
alert('您输入的' + second + '是偶数')
} else {
alert('您输入的' + second + '是奇数');
}
} else if (first == '7') {
let battle1 = prompt('请输入第一个要比较的数:');
let battle2 = prompt('请输入第二个要比较的数');
let end = Math.max(battle1, battle2);
alert('最大值为' + end + '谢谢使用');
} else if (first == '8') {
let question = prompt('图形计算区(beta 1.1)\n1.长方形(或长方体) 2.正方形(或正方体) 3.平行四边形');
if (question == '1') {
let question1 = prompt('1.面积2.周长3.体积');
if (question1 == '1') {
let MianJi_1 = prompt('请输入长:');
let MianJi_2 = prompt('请输入宽');
let Mianji = parseFloat(MianJi_1) * parseFloat(MianJi_2);
alert('面积是' + Mianji);
} else if (question1 == '2') {
let ZhouChang1 = prompt('请输入长:');
let ZhouChang2 = prompt('请输入宽');
ChangKuanSum = parseFloat(ZhouChang1) + parseFloat(ZhouChang2);
let ZhouChang_end = ChangKuanSum * 2;
alert('周长是' + ZhouChang_end);
} else if (question1 == '3') {
let TiJi1 = prompt('请输入长:');
let TiJi2 = prompt('请输入宽');
let TiJi3 = prompt('请输入高');
let TiJi = parseFloat(TiJi1) * parseFloat(TiJi2) * parseFloat(TiJi3);
alert('体积是' + TiJi);
}
}
} else if (question == '2') {
let question_zheng = prompt('1.面积 2.周长 3.体积');
if (question_zheng == '1') {
let Zheng_ZhouChang1 = prompt('请输入边长:');
let Zheng_Chang_over = parseFloat(quetion_zheng) * parseFloat(quetion_zheng);
alert('周长是' + Zheng_Chang_over);
} else if (question_zheng == '2') {
let zheng_bianChang = prompt('请输入边长:');
let mianJi_zheng = parseFloat(zheng_bianChang) * 4;
alert('面积是' + mianJi_zheng);
}
} else {
console.log('cenlerder');
}
/* 特 效 */
function a() {
function n(n, e, t) {
return n.getAttribute(e) || t
}
function e(n) {
return document.getElementsByTagName(n)
}
function t() {
var t = e("script")
, o = t.length
, i = t[o - 1];
return {
l: o,
z: n(i, "zIndex", -1),
o: n(i, "opacity", .5),
c: n(i, "color", "0,0,0"),
n: n(i, "count", 99)
}
}
function o() {
a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function (i, x) {
for (i.x += i.xa,
i.y += i.ya,
i.xa *= i.x > a || i.x < 0 ? -1 : 1,
i.ya *= i.y > c || i.y < 0 ? -1 : 1,
r.fillRect(i.x - .5, i.y - .5, 1, 1),
e = x + 1; e < u.length; e++)
n = u[e],
null !== n.x && null !== n.y && (o = i.x - n.x,
m = i.y - n.y,
l = o * o + m * m,
l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o,
i.y -= .03 * m),
t = (n.max - l) / n.max,
r.beginPath(),
r.lineWidth = t / 2,
r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")",
r.moveTo(i.x, i.y),
r.lineTo(n.x, n.y),
r.stroke()))
}),
x(i)
}
var a, c, u, m = document.createElement("canvas"), d = t(), l = "c_n" + d.l, r = m.getContext("2d"), x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (n) {
window.setTimeout(n, 1e3 / 45)
}
, w = Math.random, y = {
x: null,
y: null,
max: 2e4
};
m.id = l,
m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
e("body")[0].appendChild(m),
o(),
window.onresize = o,
window.onmousemove = function (n) {
n = n || window.event,
y.x = n.clientX,
y.y = n.clientY
}
,
window.onmouseout = function () {
y.x = null,
y.y = null
}
;
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a
, g = w() * c
, v = 2 * w() - 1
, p = 2 * w() - 1;
s.push({
x: h,
y: g,
xa: v,
ya: p,
max: 6e3
})
}
u = s.concat([y]),
setTimeout(function () {
i()
}, 100)
}
a();
/* Other */
//<details>
//<summary>非常感谢您使用计算器1.2版本，更高级的版本敬请期待</summary>
//</details>
</script>
</body>
</html>