yxw
/
AudioHTML
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

初始化

main
yxw 2023-10-29 16:52:53 +08:00
commit 15a3999378
11 changed files with 11612 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

356
css/app.css Normal file
View File

@ -0,0 +1,356 @@
body,
html {
height: 100%;
}
body {
background-color: #1B1D1E;
color: #fff;
}
.content-warp {
background-color: #1E1F21 !important;
}
.dotblock {
background-image: url(../images/dotline.png);
max-height: 80px;
color: #fff;
font-size: 16px;
font-weight: bold;
background-size: cover;
}
.login {
width: 600px;
background-color: #1E1E1E;
}
.login-title {
font-size: 30px;
font-weight: bold;
}
.login-form {
width: 400px;
}
.login input {
/* background-color: #000; */
color: #fff;
}
.login input::placeholder {
color: #888888;
font-size: 0.8em;
}
.login input {
border: none;
background: #000;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
color: #fff;
}
.login button {
border: none;
background: #191919;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
color: #fff;
}
.nav {
border-top: 2px solid black;
border-bottom: 2px solid black;
background-color: #282828;
font-size: 14px;
}
.nav>div {
border-left: 2px solid black;
padding: 10px 25px;
}
.nav>div.last {
border-right: 2px solid black;
}
.nav>div.active {
background-color: #000;
/*设置发光效果*/
box-shadow: #1BC8F2 0px 0px 14px inset;
color: #1BC8F2;
background: linear-gradient(to bottom, #000, #353535, #000);
}
.nav>div:hover {
background-color: #000;
/*设置发光效果*/
/* box-shadow: #1BC8F2 0px 0px 14px inset; */
color: #1BC8F2;
background: linear-gradient(to bottom, #000, #353535, #000);
cursor: pointer;
}
.nav a {
text-decoration: none;
}
.nav a:visited {
color: #fff;
}
.password-form {
width: 800px;
}
.form input {
border: none;
background: #000;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
color: #fff;
}
.form input::placeholder {
color: #888888;
font-size: 0.8em;
}
.col-form-label {
text-align: end;
}
.form button {
border: none;
background: #191919;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 2px 2px rgba(0, 0, 0, 0.35);
color: #fff;
}
.ruleraxisy {
/* position: absolute; */
background-color: #303030;
background-size: 20px 50px;
background-image: linear-gradient(0deg, #696969 0, #696969 2%, transparent 2%), linear-gradient(90deg, #303030 50%, transparent 50%), linear-gradient(0deg, transparent 50%, #696969 50%, #696969 52%, transparent 52%), linear-gradient(90deg, #303030 70%, transparent 70%), linear-gradient(0deg, transparent 10%, #696969 10%, #696969 12%, transparent 12%, transparent 20%, #696969 20%, #696969 22%, transparent 22%, transparent 30%, #696969 30%, #696969 32%, transparent 32%, transparent 40%, #696969 40%, #696969 42%, transparent 42%, transparent 60%, #696969 60%, #696969 62%, transparent 62%, transparent 70%, #696969 70%, #696969 72%, transparent 72%, transparent 80%, #696969 80%, #696969 82%, transparent 82%, transparent 90%, #696969 90%, #696969 92%, transparent 92%);
background-repeat: repeat-y;
width: 20px;
height: 300px;
/* left: 30px; */
/* top: 50px; */
min-height: 20px;
}
.scaley {
list-style-type: none;
/* position: absolute; */
left: 0px;
top: -25px;
margin: 0;
padding: 0;
width: 50px;
height: 100%;
overflow: hidden;
white-space: nowrap;
color: #b1b4b4;
font-size: 0;
text-shadow: 0px 1px 1px #000;
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
z-index: 1;
}
.scaley li {
writing-mode: vertical-lr;
height: 50px;
text-align: center;
font-size: 11px;
}
.container {
padding-top: 40px;
position: relative;
display: inline-block;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
padding-bottom: 20px;
}
@media (min-height: 500px) {
.container {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
padding-bottom: 0;
}
}
.range-slider {
display: inline-block;
width: 40px;
position: relative;
text-align: center;
height: 300px;
max-height: 100%;
}
.range-slider:before {
position: absolute;
top: -2em;
left: 0.5em;
content: attr(data-slider-value) "%";
color: white;
font-size: 90%;
}
.range-slider__thumb {
position: absolute;
left: 5px;
width: 30px;
height: 30px;
line-height: 30px;
background: white;
color: #777;
font-size: 50%;
box-shadow: 0 0 0 4px #3d3d4a;
border-radius: 50%;
pointer-events: none;
}
.range-slider__bar {
left: 16px;
bottom: 0;
position: absolute;
background: linear-gradient(dodgerblue, blue);
pointer-events: none;
width: 8px;
border-radius: 10px;
}
.range-slider input[type=range][orient=vertical] {
position: relative;
margin: 0;
height: 100%;
width: 100%;
display: inline-block;
position: relative;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3d3d4a;
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3d3d4a;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
border: none;
background: #343440;
width: 8px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3d3d4a;
color: transparent;
height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.theme1 {
background: linear-gradient(pink, deeppink);
}
.theme2 {
background: linear-gradient(tomato, red);
}
.theme3 {
background: linear-gradient(yellow, orange);
}
#handle1 .rs-handle {
background-color: transparent;
border: 8px solid transparent;
border-right-color: black;
margin: -6px 0px 0px 14px !important;
border-width: 6px 104px 6px 4px;
}
#handle1 .rs-handle:before {
display: block;
content: " ";
position: absolute;
height: 22px;
width: 22px;
background: black;
right: -11px;
bottom: -11px;
border-radius: 100px;
}
#handle1 .rs-tooltip {
top: 75%;
font-size: 11px;
}
#handle1 .rs-tooltip div {
text-align: center;
background: orange;
color: white;
border-radius: 4px;
padding: 1px 5px 2px;
margin-top: 4px;
}
#handle1 .rs-range-color {
background-color: #DB5959;
}
#handle1 .rs-path-color {
background-color: #F0C5C5;
}
.progress-4 {
width:120px;
height:20px;
-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
background:
linear-gradient(#000 0 0) 0/0% no-repeat
#ddd;
animation:p4 2s infinite steps(6);
}
@keyframes p4 {
100% {background-size:120%}
}

6
css/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
css/roundslider.min.css vendored Normal file
View File

@ -0,0 +1,2 @@
/*! roundSlider v1.6.1 | (c) 2015-2020, Soundar | MIT license | http://roundsliderui.com/licence.html */
.rs-ie,.rs-edge,.rs-handle{-ms-touch-action:none;touch-action:none}.rs-control{position:relative;outline:0 none}.rs-container{position:relative}.rs-control *,.rs-control *:before,.rs-control *:after{-webkit-box-sizing:border-box;box-sizing:border-box}.rs-animation .rs-transition{transition:all 0.5s linear 0s}.rs-bar{-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.rs-control .rs-split .rs-path,.rs-control .rs-overlay1,.rs-control .rs-overlay2{-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%}.rs-control .rs-overlay{-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}.rs-rounded .rs-seperator,.rs-split .rs-path{-webkit-background-clip:padding-box;background-clip:padding-box}.rs-disabled{opacity:.35}.rs-inner-container{height:100%;width:100%;position:absolute;top:0;overflow:hidden}.rs-control .rs-quarter div.rs-block{height:200%;width:200%}.rs-control .rs-half.rs-top div.rs-block,.rs-control .rs-half.rs-bottom div.rs-block{height:200%;width:100%}.rs-control .rs-half.rs-left div.rs-block,.rs-control .rs-half.rs-right div.rs-block{height:100%;width:200%}.rs-control .rs-bottom .rs-block{top:auto;bottom:0}.rs-control .rs-right .rs-block{right:0}.rs-block.rs-outer{border-radius:1000px}.rs-block{height:100%;width:100%;display:block;position:absolute;top:0;overflow:hidden;z-index:3}.rs-block .rs-inner{border-radius:1000px;display:block;height:100%;width:100%;position:relative}.rs-overlay{width:50%}.rs-overlay1,.rs-overlay2{width:100%}.rs-overlay,.rs-overlay1,.rs-overlay2{position:absolute;background-color:#fff;z-index:3;top:0;height:50%}.rs-bar{display:block;position:absolute;bottom:0;height:0;z-index:10}.rs-bar.rs-rounded{z-index:5}.rs-bar .rs-seperator{height:0;display:block;float:left}.rs-bar:not(.rs-rounded) .rs-seperator{border-left:none;border-right:none}.rs-bar.rs-start .rs-seperator{border-top:none}.rs-bar.rs-end .rs-seperator{border-bottom:none}.rs-bar.rs-start.rs-rounded .rs-seperator{border-radius:0 0 1000px 1000px}.rs-bar.rs-end.rs-rounded .rs-seperator{border-radius:1000px 1000px 0 0}.rs-full .rs-bar,.rs-half .rs-bar{width:50%}.rs-half.rs-left .rs-bar,.rs-half.rs-right .rs-bar,.rs-quarter .rs-bar{width:100%}.rs-full .rs-bar,.rs-half.rs-left .rs-bar,.rs-half.rs-right .rs-bar{top:50%}.rs-bottom .rs-bar{top:0}.rs-half.rs-right .rs-bar,.rs-quarter.rs-right .rs-bar{right:100%}.rs-handle.rs-move{cursor:move}.rs-readonly .rs-handle.rs-move{cursor:default}.rs-classic-mode .rs-path{display:block;height:100%;width:100%}.rs-split .rs-path{border-radius:1000px 1000px 0 0;overflow:hidden;height:50%;position:absolute;top:0;z-index:2}.rs-control .rs-svg-container{display:block;position:absolute;top:0}.rs-control .rs-bottom .rs-svg-container{top:auto;bottom:0}.rs-control .rs-right .rs-svg-container{right:0}.rs-tooltip{position:absolute;cursor:default;border:1px solid transparent;z-index:10}.rs-full .rs-tooltip{top:50%;left:50%}.rs-bottom .rs-tooltip{top:0}.rs-top .rs-tooltip{bottom:0}.rs-right .rs-tooltip{left:0}.rs-left .rs-tooltip{right:0}.rs-half.rs-top .rs-tooltip,.rs-half.rs-bottom .rs-tooltip{left:50%}.rs-half.rs-left .rs-tooltip,.rs-half.rs-right .rs-tooltip{top:50%}.rs-tooltip .rs-input{outline:0 none;border:none;background:transparent}.rs-tooltip-text{font-family:verdana;font-size:13px;border-radius:7px;text-align:center;color:inherit}.rs-tooltip.rs-edit{padding:5px 8px}.rs-tooltip.rs-hover,.rs-tooltip.rs-edit:hover{border:1px solid #AAA;cursor:pointer}.rs-readonly .rs-tooltip.rs-edit:hover{border-color:transparent;cursor:default}.rs-tooltip.rs-center{margin:0px!important}.rs-half.rs-top .rs-tooltip.rs-center,.rs-half.rs-bottom .rs-tooltip.rs-center{transform:translate(-50%,0)}.rs-half.rs-left .rs-tooltip.rs-center,.rs-half.rs-right .rs-tooltip.rs-center{transform:translate(0,-50%)}.rs-full .rs-tooltip.rs-center{transform:translate(-50%,-50%)}.rs-tooltip.rs-reset{margin:0px!important;top:0px!important;left:0px!important}.rs-handle{border-radius:1000px;outline:0 none;float:left}.rs-handle.rs-handle-square{border-radius:0}.rs-handle-dot{border:1px solid #AAA;padding:6px}.rs-handle-dot:after{display:block;content:"";border:1px solid #AAA;height:100%;width:100%;border-radius:1000px}.rs-seperator{border:1px solid #AAA}.rs-border{border:1px solid #AAA}.rs-path-color{background-color:#FFF}.rs-range-color{background-color:#54BBE0}.rs-bg-color{background-color:#FFF}.rs-handle{background-color:#838383}.rs-handle-dot{background-color:#FFF}.rs-handle-dot:after{background-color:#838383}.rs-path-inherited .rs-path{opacity:.2}.rs-svg-mode .rs-path{stroke:#FFF}.rs-svg-mode .rs-range{stroke:#54BBE0}.rs-svg-mode .rs-border{stroke:#AAA}

BIN
images/dotline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

10716
js/jquery-3.7.1.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2
js/roundslider.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

61
login.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
</head>
<body class="d-flex h-100 text-center text-bg-dark">
<div class="d-flex w-100 h-100 mx-auto flex-column">
<header class="mb-auto">
<!-- <div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
<a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
<a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
</nav>
</div> -->
</header>
<main class="px-3 d-flex justify-content-center">
<div class="border border-black login">
<div class="dotblock py-3 login-title">GEAZAN</div>
<div class="login-form pt-5 mx-auto">
<div class="mb-4 input-group input-group-lg">
<input class="form-control" placeholder="Username" />
</div>
<div class="mb-5 input-group input-group-lg">
<input class="form-control" placeholder="Password" />
</div>
<div class="mt-5 pb-5 d-grid">
<button type="button" class="btn btn-lg btn-dark border border-black">LOGIN</button>
</div>
<div class="mt-5 mb-3" style="color: #888888;">
<div>GUI V1.0.0
</div>
<div>FIRMWARE V1.0.0</div>
</div>
</div>
</div>
<!-- <h1>Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit
the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
</p> -->
</main>
<footer class="mt-auto text-white-50">
<div class="dotblock d-flex justify-content-between px-5 py-4">
<div class="">Geazan</div>
<div>www.geazan.com</div>
</div>
</footer>
</div>
</body>
</html>

95
network.html Normal file
View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
</head>
<body class="h-100 text-center text-bg-dark content-warp">
<div class="d-flex w-100 h-100 mx-auto flex-column">
<header class="mb-auto pb-5">
<div class="dotblock d-flex justify-content-between px-5 py-4">
<div class="fs-3">GEAZAN</div>
<div></div>
</div>
<div class="d-flex justify-content-center fw-bold border-black nav">
<div>INPUT</div>
<div>EQ</div>
<div>VOLUME</div>
<div>RS232</div>
<div class="active"><a href="network.html">NETWORK</a></div>
<div class="">
<a href="password.html">PASSWORD</a>
</div>
<div class="last">SYSTEM</div>
</div>
</header>
<main class="px-3 d-flex justify-content-center">
<div class="form">
<div class="border border-black m-6 password-form">
<div class=" m-5 mx-auto form" style="width: 500px;">
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">IP Configuration</label>
<div class="col-sm-7 text-start py-2">
<div class="form-check form-check-inline">
<input class="form-check-input" checked type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">DHCP</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">Static IP</label>
</div>
</div>
</div>
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Mac Address</label>
<div class="col-sm-7 text-start py-2">
10-A6-56-EF-23-D6
</div>
</div>
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">IP Address</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Subnet Mask</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Gateway</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Host Name</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</div>
</div>
<div class="mt-5 pb-5">
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
</div>
</div>
</main>
<footer class="mt-auto text-white-50">
<div class="dotblock d-flex justify-content-between px-5 py-4">
<div class="">Geazan</div>
<div>www.geazan.com</div>
</div>
</footer>
</div>
</body>
</html>

82
password.html Normal file
View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
</head>
<body class="h-100 text-center text-bg-dark content-warp">
<div class="d-flex w-100 h-100 mx-auto flex-column">
<header class="mb-auto pb-5">
<div class="dotblock d-flex justify-content-between px-5 py-4">
<div class="fs-3">GEAZAN</div>
<div></div>
</div>
<div class="d-flex justify-content-center fw-bold border-black nav">
<div>INPUT</div>
<div>EQ</div>
<div>VOLUME</div>
<div>RS232</div>
<div><a href="network.html">NETWORK</a></div>
<div class="active">
<a href="password.html">PASSWORD</a>
</div>
<div class="last">SYSTEM</div>
</div>
</header>
<main class="px-3 d-flex justify-content-center">
<div class="form">
<div class="border border-black m-6 password-form">
<div class=" m-5 mx-auto form" style="width: 500px;">
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Old Username</label>
<div class="col-sm-7">
<input class="form-control" placeholder="" />
</div>
</div>
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">New Username</label>
<div class="col-sm-7">
<input class="form-control" placeholder="" />
</div>
</div>
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-5 col-form-label">Old Password</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="mb-3 row">
<label for="inputPassword" class="col-sm-5 col-form-label">New Password</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="mb-3 row">
<label for="inputPassword" class="col-sm-5 col-form-label">Confirm New Password</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</div>
</div>
<div class="mt-5 pb-5">
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
</div>
</div>
</main>
<footer class="mt-auto text-white-50">
<div class="dotblock d-flex justify-content-between px-5 py-4">
<div class="">Geazan</div>
<div>www.geazan.com</div>
</div>
</footer>
</div>
</body>
</html>

114
test.html Normal file
View File

@ -0,0 +1,114 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
#box {
width: 40px;
height: 430px;
border: 1px solid #000;
margin: 300px;
position: relative;
}
#box1 {
width: 40px;
height: 00px;
background: green;
position: absolute;
}
#span1 {
height: 30px;
width: 60px;
background: green;
display: block;
border-radius: 10px;
position: absolute;
left: -10px;
}
p {
position: absolute;
width: 200px;
height: 40px;
top: 50px;
text-align: center;
line-height: 40px;
font-size: 32px;
}
input[type=range]::-webkit-slider-runnable-track{
-webkit-appearance: none;/*清除系统默认样式*/
width: 16px;/*拖动块宽度*/
background: #cccccc;/*拖动块背景*/
}
input[type=range]{
writing-mode: bt-lr; /*for IE */
-webkit-appearance: slider-vertical; /* for chrome */
width: 10px;
height: 200px;
padding: 0 5px;
}
</style>
</head>
<body>
<input type="range" orient="vertical" min="0" max="100" />
<div id="box">
<div id="box1">
<span id="span1">
</span>
</div>
<div>
<p id="p1"></p>
</div>
</div>
<script type="text/javascript">
var Span = document.getElementById("span1");
var Box = document.getElementById("box");
var Box1 = document.getElementById("box1");
var P1 = document.getElementById("p1");
Span.onmousedown = function (e) {
var evt = e || event;
var x = evt.offsetX;
var y = evt.offsetY;
console.log(x)
console.log(y)
//console.log("Aa")
Box.onmousemove = function (e) {
var evt = e || event;
Span.style.top = evt.clientY - Box.offsetTop - x + "px";
if (evt.clientY - Box.offsetTop - x <= 0) {
Span.style.top = "0px";
}
if (evt.clientY - Box.offsetTop - x >= 400) {
Span.style.top = "400px";
}
//console.log(Span.offsetLeft);
P1.innerHTML = "音量：" + Math.floor(Span.offsetTop / 4);
Box1.style.height = Span.offsetTop + "px";
}
document.onmouseup = function () {
//Box1.style.width=evt.offsetX+"px";
Box.onmousemove = null;
}
}
</script>
</body>
</html>

178
volume.html Normal file
View File

@ -0,0 +1,178 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<link href="css/roundslider.min.css" rel="stylesheet">
<script src="js/jquery-3.7.1.js"></script>
<script src="js/roundslider.min.js"></script>
</head>
<body class="h-100 text-center text-bg-dark content-warp">
<div class="d-flex w-100 h-100 mx-auto flex-column">
<header class="mb-auto pb-5">
<div class="dotblock d-flex justify-content-between px-5 py-4">
<div class="fs-3">GEAZAN</div>
<div></div>
</div>
<div class="d-flex justify-content-center fw-bold border-black nav">
<div>INPUT</div>
<div>EQ</div>
<div>VOLUME</div>
<div>RS232</div>
<div class="active"><a href="network.html">NETWORK</a></div>
<div class="">
<a href="password.html">PASSWORD</a>
</div>
<div class="last">SYSTEM</div>
</div>
</header>
<main class="px-3 d-flex justify-content-center">
<div class="form">
<div class="border border-black m-6 password-form">
<div class=" m-5 mx-auto form" style="width: 500px;">
<div>
<div class="container">
<div class="range-slider" data-slider-value="50">
<input type="range" orient="vertical" min="0" max="100" value="50">
<div class="range-slider__bar" style="height: calc(45% + 15px);"></div>
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
</div>
<div class="range-slider" data-slider-value="50">
<input type="range" orient="vertical" min="0" max="100" value="50">
<div class="range-slider__bar theme1" style="height: calc(45% + 15px);"></div>
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
</div>
<div class="range-slider" data-slider-value="50">
<input type="range" orient="vertical" min="0" max="100" value="50">
<div class="range-slider__bar theme2" style="height: calc(45% + 15px);"></div>
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
</div>
<div class="range-slider" data-slider-value="50">
<input type="range" orient="vertical" min="0" max="100" value="50">
<div class="range-slider__bar theme3" style="height: calc(45% + 15px);"></div>
<div class="range-slider__thumb" style="bottom: 45%;">50%</div>
</div>
</div>
<div class="ruleraxisy">
<ul class="scaley">
<li></li>
<li>50</li>
<li>100</li>
<li>150</li>
<li>200</li>
<li>250</li>
<li>300</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div class="progress-4"></div>
</div>
<div>
<div class="box-inner">
<div>
<div class="row _slider_customizations cus_handle">
<div class="block">
<div class="cell">
<div id="handle1"></div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5 pb-5">
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
</div>
</div>
</main>
<footer class="mt-auto text-white-50">
<div class="dotblock d-flex justify-content-between px-5 py-4">
<div class="">Geazan</div>
<div>www.geazan.com</div>
</div>
</footer>
</div>
</body>
<script>
let app = (() => {
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
if (lastValue === element.value) {
return; // No value change, no need to update then
}
parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider__thumb'),
$bar = parent.querySelector('.range-slider__bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
$thumb.textContent = `${element.value}%`;
}
}
return {
updateSlider: updateSlider
};
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
$("#handle1").roundSlider({
sliderType: "min-range",
editableTooltip: false,
radius: 105,
width: 16,
value: 38,
handleSize: 0,
handleShape: "square",
circleShape: "custom-half",
startAngle:0,
endAgle:359.9
// startAngle: 315,
// tooltipFormat: "changeTooltip"
});
function changeTooltip(e) {
var val = e.value, speed;
if (val < 20) speed = "Slow";
else if (val < 40) speed = "Normal";
else if (val < 70) speed = "Speed";
else speed = "Very Speed";
return val + " km/h" + "<div>" + speed + "<div>";
}
</script>
</html>