fix
parent
e7fc1edab7
commit
89cafea6f0
|
|
@ -160,6 +160,13 @@
|
|||
$("#submit").on('click',function(){
|
||||
alert('on submit')
|
||||
})
|
||||
|
||||
$("#timer").on('change',function(){
|
||||
var num = $("#timer").val()
|
||||
if(num < 5 || num > 30){
|
||||
alert("The hibernation timer lasts only 5-30 minutes")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function loadData(){
|
||||
|
|
|
|||
28
css/app.css
28
css/app.css
|
|
@ -115,17 +115,17 @@ body {
|
|||
width: 800px;
|
||||
}
|
||||
|
||||
.select{
|
||||
.select {
|
||||
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;
|
||||
border-radius: 5px;
|
||||
color: #888888;
|
||||
outline:none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select:focus{
|
||||
.select:focus {
|
||||
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);
|
||||
|
|
@ -146,6 +146,14 @@ body {
|
|||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.form-control:disabled {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.col-form-label {
|
||||
text-align: end;
|
||||
}
|
||||
|
|
@ -667,6 +675,20 @@ body {
|
|||
top: 80%;
|
||||
}
|
||||
|
||||
.volume-ruler.left-ruler {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.volume-ruler.left-ruler .mm {
|
||||
position: absolute;
|
||||
border-top: 1px solid #555;
|
||||
height: 80%;
|
||||
width: 8px;
|
||||
top: 80%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
.volume-ruler .mm {
|
||||
width: 5px;
|
||||
}
|
||||
|
|
|
|||
290
ducking.html
290
ducking.html
|
|
@ -46,15 +46,13 @@
|
|||
<div style="width: 200px;">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||
<div class="d-flex redio-switche">
|
||||
<input type="checkbox" class="btn-check" name="input1" id="mic1"
|
||||
autocomplete="off">
|
||||
<input type="checkbox" class="btn-check" name="mic1" id="mic1">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="mic1">Mic1</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||
<div class="d-flex redio-switche">
|
||||
<input type="checkbox" class="btn-check" name="input1" id="mic2"
|
||||
autocomplete="off">
|
||||
<input type="checkbox" class="btn-check" name="mic2" id="mic2">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="mic2">Mic2</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,16 +68,16 @@
|
|||
<div class="d-flex">
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="threshold">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Threshold
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="volume-slider-box">
|
||||
<div class="volume-slider" data-slider-value="50">
|
||||
<div class="volume-slider">
|
||||
<input type="range" orient="vertical" min="0" max="100"
|
||||
step="0.1" value="30">
|
||||
step="0.01">
|
||||
<div class="range-slider-bar" style="height: calc(45% + 15px);">
|
||||
</div>
|
||||
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
||||
|
|
@ -127,16 +125,16 @@
|
|||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="attack">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Attack
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="volume-slider-box">
|
||||
<div class="volume-slider" data-slider-value="50">
|
||||
<div class="volume-slider">
|
||||
<input type="range" orient="vertical" min="0" max="100"
|
||||
step="0.1" value="30">
|
||||
step="0.01">
|
||||
<div class="range-slider-bar" style="height: calc(45% + 15px);">
|
||||
</div>
|
||||
<div class="range-slider-thumb" style="bottom: 45%;"></div>
|
||||
|
|
@ -145,31 +143,31 @@
|
|||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<span>500</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<span>245</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
<span>10</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -183,10 +181,10 @@
|
|||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="ducklevel">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Hold
|
||||
DuckLevel
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="volume-slider-box">
|
||||
|
|
@ -205,27 +203,27 @@
|
|||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<span>-45</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
<span>-100</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -239,7 +237,7 @@
|
|||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="release">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Release
|
||||
|
|
@ -257,31 +255,31 @@
|
|||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<span>2000</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<span>-995</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
<span>10</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -294,6 +292,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||
<div class="d-flex redio-switche">
|
||||
<input type="radio" class="btn-check" name="switch" id="switch-on" value="on">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="switch-on">ON</label>
|
||||
<input type="radio" class="btn-check" name="switch" id="switch-off" value="off">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="switch-off">OFF</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -312,74 +321,171 @@
|
|||
</body>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
//初始化配置
|
||||
loadData();
|
||||
attackSlider();
|
||||
thresholdSlider();
|
||||
ducklevelSlider();
|
||||
releaseSlider();
|
||||
})
|
||||
|
||||
let app = (() => {
|
||||
$(document).ready(function () {
|
||||
let mic1 = $("#mic1")
|
||||
let mic2 = $("#mic2")
|
||||
|
||||
function updateSlider(element) {
|
||||
if (element) {
|
||||
$("input[name='switch']").on('change', function () {
|
||||
let $value = $("input[name='switch']:checked").val()
|
||||
console.log($("input[name='switch']:checked").val())
|
||||
alert($value)
|
||||
})
|
||||
|
||||
let parent = element.parentElement,
|
||||
lastValue = parent.getAttribute('data-slider-value');
|
||||
let container = parent.parentElement.parentElement.parentElement.parentElement;
|
||||
mic1.on('change',function(){
|
||||
var isChecked = mic1.prop('checked');
|
||||
alert(isChecked)
|
||||
})
|
||||
|
||||
console.log(`${lastValue}===${element.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'),
|
||||
$value = container.querySelector('.slider-value')
|
||||
console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
|
||||
console.log(`===${((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight)}===`)
|
||||
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
|
||||
mic2.on('change',function(){
|
||||
var isChecked = mic2.prop('checked');
|
||||
alert(isChecked)
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
$thumb.style.bottom = `${pct}%`;
|
||||
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
|
||||
$value.value = `${((element.value * (60 / 100)) - 60).toFixed(1)}dB`;
|
||||
}
|
||||
}
|
||||
return {
|
||||
updateSlider: updateSlider
|
||||
};
|
||||
function loadData() {
|
||||
$("input[name='switch']").val(['on'])
|
||||
$("#mic1").prop("checked", true)
|
||||
$("#mic2").prop("checked", true)
|
||||
|
||||
})();
|
||||
|
||||
(function initAndSetupTheSliders() {
|
||||
const inputs = [].slice.call(document.querySelectorAll('.volume-slider-container .volume-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: 60,
|
||||
width: 10,
|
||||
value: 0,
|
||||
handleSize: 0,
|
||||
handleShape: "square",
|
||||
circleShape: "pie",
|
||||
startAngle: 315,
|
||||
tooltipFormat: "changeTooltip",
|
||||
mouseScrollAction: true
|
||||
});
|
||||
|
||||
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>";
|
||||
}
|
||||
|
||||
function attackSlider() {
|
||||
let element = $('#attack')
|
||||
let input = $("#attack .volume-slider input")
|
||||
input.attr('value', (100 - 10) / (490 / 100))
|
||||
updateAttackSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateAttackSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateAttackSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateAttackSlider(element) {
|
||||
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (490 / 100)) + 10).toFixed(1)}ms`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function thresholdSlider() {
|
||||
let element = $('#threshold')
|
||||
let input = $("#threshold .volume-slider input")
|
||||
input.attr('value', (-40 + 60) / (60 / 100))
|
||||
updateThresholdSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateThresholdSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateThresholdSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateThresholdSlider(element) {
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (60 / 100)) - 60).toFixed(1)}dB`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function ducklevelSlider() {
|
||||
let element = $('#ducklevel')
|
||||
let input = $("#ducklevel .volume-slider input")
|
||||
input.attr('value', (-20 + 100) / (100 / 100))
|
||||
updateDucklevelSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateDucklevelSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateDucklevelSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateDucklevelSlider(element) {
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (100 / 100) - 100)).toFixed(1)}dB`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function releaseSlider() {
|
||||
let element = $('#release')
|
||||
let input = $("#release .volume-slider input")
|
||||
input.attr('value', (1000 - 10) / (2000 / 100))
|
||||
updateReleaseSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateReleaseSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateReleaseSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateReleaseSlider(element) {
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (2000 / 100)) + 10).toFixed(1)}ms`);
|
||||
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
699
eq.html
699
eq.html
|
|
@ -40,13 +40,13 @@
|
|||
<div class="me-3"
|
||||
style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
||||
<div class="divider">
|
||||
<div class="divider-text"><span class="fw-bold">Equalizer</span></div>
|
||||
<div class="divider-text"><span class="fw-bold">Mic1 Equalizer</span></div>
|
||||
</div>
|
||||
<div class="p-3 d-flex justify-content-center">
|
||||
<div class="d-flex">
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="mic1threshold">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Threshold
|
||||
|
|
@ -64,31 +64,31 @@
|
|||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<span>10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-0</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="mic1attack">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Attack
|
||||
|
|
@ -121,31 +121,31 @@
|
|||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<span>10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-0</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="mic1hold">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Hold
|
||||
|
|
@ -177,31 +177,31 @@
|
|||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<span>10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-0</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="mic1release">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Release
|
||||
|
|
@ -233,31 +233,31 @@
|
|||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<span>10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-0</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -274,13 +274,13 @@
|
|||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||
<div class="d-flex redio-switche">
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
||||
<input type="radio" class="btn-check" name="mic1switch" id="mic1switch-on"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ON</label>
|
||||
<label class="btn btn-sm redio-btn on-btn" for="mic1switch-on">ON</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||
<input type="radio" class="btn-check" name="mic1switch" id="mic1switch-off"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">OFF</label>
|
||||
<label class="btn btn-sm redio-btn off-btn" for="mic1switch-off">OFF</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -288,13 +288,13 @@
|
|||
<div class="me-3"
|
||||
style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
||||
<div class="divider">
|
||||
<div class="divider-text"><span class="fw-bold">Equalizer</span></div>
|
||||
<div class="divider-text"><span class="fw-bold">Mic2 Equalizer</span></div>
|
||||
</div>
|
||||
<div class="p-3 d-flex justify-content-center">
|
||||
<div class="d-flex">
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="mic2threshold">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Threshold
|
||||
|
|
@ -312,31 +312,31 @@
|
|||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<span>10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-0</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -351,7 +351,7 @@
|
|||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="mic2attack">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Attack
|
||||
|
|
@ -369,31 +369,31 @@
|
|||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<span>10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-0</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -407,7 +407,7 @@
|
|||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="mic2hold">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Hold
|
||||
|
|
@ -425,31 +425,31 @@
|
|||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<span>10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-0</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -463,7 +463,7 @@
|
|||
</div>
|
||||
<div class="volume-slider-container mx-3">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="me-3">
|
||||
<div class="me-3" id="mic2release">
|
||||
<div class="d-flex justify-content-center align-items-center mb-3"
|
||||
style="height: 30px;">
|
||||
Release
|
||||
|
|
@ -481,31 +481,31 @@
|
|||
<div>
|
||||
<section class="volume-ruler">
|
||||
<section class="cm">
|
||||
<span>0</span>
|
||||
<span>10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-0</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-10</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-20</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-30</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-40</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-50</span>
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<span>-60</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -522,13 +522,13 @@
|
|||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||
<div class="d-flex redio-switche">
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
||||
<input type="radio" class="btn-check" name="mic2switch" id="mic2switch-on"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ON</label>
|
||||
<label class="btn btn-sm redio-btn on-btn" for="mic2switch-on">ON</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||
<input type="radio" class="btn-check" name="input1" id="mic2switch-off"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">OFF</label>
|
||||
<label class="btn btn-sm redio-btn off-btn" for="mic2switch-off">OFF</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -549,73 +549,292 @@
|
|||
</body>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
//初始化配置
|
||||
loadData();
|
||||
mic1AttackSlider();
|
||||
mic1ThresholdSlider();
|
||||
mic1HoldSlider();
|
||||
mic1ReleaseSlider();
|
||||
|
||||
let app = (() => {
|
||||
mic2AttackSlider();
|
||||
mic2ThresholdSlider();
|
||||
mic2HoldSlider();
|
||||
mic2ReleaseSlider();
|
||||
})
|
||||
|
||||
function updateSlider(element) {
|
||||
if (element) {
|
||||
$(document).ready(function () {
|
||||
$("input[name='mic1switch']").on('change', function () {
|
||||
let $value = $("input[name='mic1switch']:checked").val()
|
||||
console.log($("input[name='mic1switch']:checked").val())
|
||||
alert($value)
|
||||
})
|
||||
|
||||
let parent = element.parentElement,
|
||||
lastValue = parent.getAttribute('data-slider-value');
|
||||
let container = parent.parentElement.parentElement.parentElement.parentElement;
|
||||
$("input[name='mic2switch']").on('change', function () {
|
||||
let $value = $("input[name='mic2switch']:checked").val()
|
||||
console.log($("input[name='mic2switch']:checked").val())
|
||||
alert($value)
|
||||
})
|
||||
|
||||
console.log(`${lastValue}===${element.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'),
|
||||
$value = container.querySelector('.slider-value')
|
||||
console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
|
||||
console.log(`===${((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight)}===`)
|
||||
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
|
||||
function loadData() {
|
||||
$("input[name='mic1switch']").val(['on'])
|
||||
$("input[name='mic2switch']").val(['on'])
|
||||
}
|
||||
|
||||
function mic1AttackSlider() {
|
||||
let element = $('#mic1attack')
|
||||
let input = $("#mic1attack .volume-slider input")
|
||||
input.attr('value', (0 + 10) / (20 / 100))
|
||||
updateMic1AttackSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateMic1AttackSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateMic1AttackSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateMic1AttackSlider(element) {
|
||||
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function mic1ThresholdSlider() {
|
||||
let element = $('#mic1threshold')
|
||||
let input = $("#mic1threshold .volume-slider input")
|
||||
input.attr('value', (0 + 10) / (20 / 100))
|
||||
updateMic1ThresholdSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateMic1ThresholdSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateMic1ThresholdSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateMic1ThresholdSlider(element) {
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function mic1HoldSlider() {
|
||||
let element = $('#mic1hold')
|
||||
let input = $("#mic1hold .volume-slider input")
|
||||
input.attr('value', (0 + 10) / (20 / 100))
|
||||
updateMic1HoldSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateMic1HoldSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateMic1HoldSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateMic1HoldSlider(element) {
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100) - 10)).toFixed(1)}dB`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function mic1ReleaseSlider() {
|
||||
let element = $('#mic1release')
|
||||
let input = $("#mic1release .volume-slider input")
|
||||
input.attr('value', (0 + 10) / (20 / 100))
|
||||
updateMic1ReleaseSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateMic1ReleaseSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateMic1ReleaseSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateMic1ReleaseSlider(element) {
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
|
||||
|
||||
$thumb.style.bottom = `${pct}%`;
|
||||
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
|
||||
$value.value = `${((element.value * (60 / 100)) - 60).toFixed(1)}dB`;
|
||||
}
|
||||
}
|
||||
return {
|
||||
updateSlider: updateSlider
|
||||
};
|
||||
function mic2AttackSlider() {
|
||||
let element = $('#mic2attack')
|
||||
let input = $("#mic2attack .volume-slider input")
|
||||
input.attr('value', (0 + 10) / (20 / 100))
|
||||
updateMic2AttackSlider(element);
|
||||
|
||||
})();
|
||||
|
||||
(function initAndSetupTheSliders() {
|
||||
const inputs = [].slice.call(document.querySelectorAll('.volume-slider-container .volume-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)));
|
||||
})();
|
||||
input.on('input', function () {
|
||||
updateMic2AttackSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateMic2AttackSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
$("#handle1").roundSlider({
|
||||
sliderType: "min-range",
|
||||
editableTooltip: false,
|
||||
radius: 60,
|
||||
width: 10,
|
||||
value: 0,
|
||||
handleSize: 0,
|
||||
handleShape: "square",
|
||||
circleShape: "pie",
|
||||
startAngle: 315,
|
||||
tooltipFormat: "changeTooltip",
|
||||
mouseScrollAction: true
|
||||
});
|
||||
function updateMic2AttackSlider(element) {
|
||||
|
||||
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";
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
// return val + " km/h" + "<div>" + speed + "<div>";
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function mic2ThresholdSlider() {
|
||||
let element = $('#mic2threshold')
|
||||
let input = $("#mic2threshold .volume-slider input")
|
||||
input.attr('value', (0 + 10) / (20 / 100))
|
||||
updateMic2ThresholdSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateMic2ThresholdSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateMic2ThresholdSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateMic2ThresholdSlider(element) {
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function mic2HoldSlider() {
|
||||
let element = $('#mic2hold')
|
||||
let input = $("#mic2hold .volume-slider input")
|
||||
input.attr('value', (0 + 10) / (20 / 100))
|
||||
updateMic2HoldSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateMic2HoldSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateMic2HoldSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateMic2HoldSlider(element) {
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100) - 10)).toFixed(1)}dB`);
|
||||
//调用接口提交数据
|
||||
}
|
||||
|
||||
function mic2ReleaseSlider() {
|
||||
let element = $('#mic2release')
|
||||
let input = $("#mic2release .volume-slider input")
|
||||
input.attr('value', (0 + 10) / (20 / 100))
|
||||
updateMic2ReleaseSlider(element);
|
||||
|
||||
|
||||
input.on('input', function () {
|
||||
updateMic2ReleaseSlider(element);
|
||||
})
|
||||
input.on('change', function () {
|
||||
updateMic2ReleaseSlider(element);
|
||||
})
|
||||
}
|
||||
|
||||
function updateMic2ReleaseSlider(element) {
|
||||
let box = element.children().find(".volume-slider")
|
||||
let input = element.children().find(".volume-slider input")
|
||||
let $thumb = element.children().find(".range-slider-thumb")
|
||||
let $bar = element.children().find(".range-slider-bar")
|
||||
let $value = element.children().find(".slider-value")
|
||||
pct = input.val() * ((box[0].clientHeight - $thumb[0].clientHeight) / box[0].clientHeight);
|
||||
|
||||
$thumb.attr('style', `bottom:${pct}%`)
|
||||
|
||||
let barHeight = `calc(${pct}% + ${$thumb[0].clientHeight / 2}px)`;
|
||||
$bar.attr('style', `height:${barHeight}`)
|
||||
$value.val(`${((input.val() * (20 / 100)) - 10).toFixed(1)}dB`);
|
||||
|
||||
//调用接口提交数据
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<div class="me-3"
|
||||
style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
||||
<div class="divider">
|
||||
<div class="divider-text"><span class="fw-bold">Mic1 Hight Pass Filter</span></div>
|
||||
<div class="divider-text"><span class="fw-bold">Mic1 HPF</span></div>
|
||||
</div>
|
||||
<div class="p-3 d-flex justify-content-center">
|
||||
<div style="width: 200px;">
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
<div class="me-3"
|
||||
style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
||||
<div class="divider">
|
||||
<div class="divider-text"><span class="fw-bold">Mic2 Hight Pass Filter</span></div>
|
||||
<div class="divider-text"><span class="fw-bold">Mic2 HPF</span></div>
|
||||
</div>
|
||||
<div class="p-3 d-flex justify-content-center">
|
||||
<div style="width: 200px;">
|
||||
|
|
|
|||
135
fs.html
135
fs.html
|
|
@ -40,30 +40,37 @@
|
|||
<div class="me-3"
|
||||
style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
||||
<div class="divider">
|
||||
<div class="divider-text"><span class="fw-bold">Frequency Shift</span></div>
|
||||
<div class="divider-text"><span class="fw-bold">Mic1 Frequency Shift</span></div>
|
||||
</div>
|
||||
<div class="p-3 d-flex justify-content-center">
|
||||
<div style="width: 200px;">
|
||||
<div style="width: 200px;" id="mic1">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||
<div class="d-flex redio-switche">
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
|
||||
<input type="radio" class="btn-check" name="mic1switch" id="mic1switch-on"
|
||||
value="enable">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="mic1switch-on">ENABLE</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
|
||||
<input type="radio" class="btn-check" name="mic1switch" id="mic1switch-off"
|
||||
value="disable">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="mic1switch-off">DISABLE</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row _slider_customizations cus_handle mb-4">
|
||||
<div class="block mt-5">
|
||||
<div class="cell d-flex justify-content-center">
|
||||
<div style="top: 100px; right: -20; width: 50px; position:relative;color: #888;"
|
||||
class="text-end">1.0</div>
|
||||
<div id="handle1" class="roundSlider"></div>
|
||||
<div
|
||||
style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
|
||||
10.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<input class="slider-value" id="handle1-value" style="width: 55px; text-align: center;" value="7FS" />
|
||||
<input class="slider-value" id="handle1-value"
|
||||
style="width: 55px; text-align: center;" value="7Hz" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,31 +78,37 @@
|
|||
<div class="me-3"
|
||||
style="border-left: 2px solid #000;border-right: 2px solid #000;border-bottom: 2px solid #000;">
|
||||
<div class="divider">
|
||||
<div class="divider-text"><span class="fw-bold">Frequency Shift</span></div>
|
||||
<div class="divider-text"><span class="fw-bold">Mic2 Frequency Shift</span></div>
|
||||
</div>
|
||||
<div class="p-3 d-flex justify-content-center">
|
||||
<div style="width: 200px;">
|
||||
<div style="width: 200px;" id="mic2">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 30px;">
|
||||
<div class="d-flex redio-switche">
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-on"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
|
||||
<input type="radio" class="btn-check" name="mic2switch" id="mic2switch-on"
|
||||
value="enable">
|
||||
<label class="btn btn-sm redio-btn on-btn" for="mic2switch-on">ENABLE</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="input1" id="inline1-off"
|
||||
autocomplete="off">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
|
||||
<input type="radio" class="btn-check" name="mic2switch" id="mic2switch-off"
|
||||
value="disable">
|
||||
<label class="btn btn-sm redio-btn off-btn" for="mic2switch-off">DISABLE</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row _slider_customizations cus_handle mb-4">
|
||||
<div class="block mt-5">
|
||||
<div class="cell d-flex justify-content-center">
|
||||
<div style="top: 100px; right: -20; width: 50px; position:relative;color: #888;"
|
||||
class="text-end">1.0</div>
|
||||
<div id="handle2" class="roundSlider"></div>
|
||||
<div
|
||||
style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
|
||||
10.0
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<input class="slider-value" id="handle2-value"
|
||||
style="width: 55px; text-align: center;" value="7FS" />
|
||||
style="width: 55px; text-align: center;" value="7Hz" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -117,98 +130,68 @@
|
|||
|
||||
<script>
|
||||
|
||||
let app = (() => {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
//初始化配置
|
||||
loadData()
|
||||
})
|
||||
|
||||
function updateSlider(element) {
|
||||
if (element) {
|
||||
$(document).ready(function () {
|
||||
$("input[name='mic1switch']").on('change', function () {
|
||||
let $value = $("input[name='mic1switch']:checked").val()
|
||||
alert($value)
|
||||
})
|
||||
|
||||
let parent = element.parentElement,
|
||||
lastValue = parent.getAttribute('data-slider-value');
|
||||
let container = parent.parentElement.parentElement.parentElement.parentElement.parentElement;
|
||||
$("input[name='mic2switch']").on('change', function () {
|
||||
let $value = $("input[name='mic2switch']:checked").val()
|
||||
alert($value)
|
||||
})
|
||||
})
|
||||
|
||||
console.log(`${lastValue}===${element.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'),
|
||||
$value = container.querySelector('.slider-value')
|
||||
console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
|
||||
console.log(`===${((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight)}===`)
|
||||
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
|
||||
|
||||
|
||||
|
||||
$thumb.style.bottom = `${pct}%`;
|
||||
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
|
||||
$value.value = `${((element.value * (60 / 100)) - 60).toFixed(1)}dB`;
|
||||
}
|
||||
}
|
||||
return {
|
||||
updateSlider: updateSlider
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
(function initAndSetupTheSliders() {
|
||||
const inputs = [].slice.call(document.querySelectorAll('.volume-slider-container .volume-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)));
|
||||
})();
|
||||
function loadData() {
|
||||
$("input[name='mic1switch']").val(['enable'])
|
||||
$("input[name='mic2switch']").val(['enable'])
|
||||
}
|
||||
|
||||
$("#handle1").roundSlider({
|
||||
sliderType: "min-range",
|
||||
editableTooltip: false,
|
||||
radius: 60,
|
||||
width: 10,
|
||||
value: 0,
|
||||
value: 7.0,
|
||||
min: 1.0,
|
||||
max: 10.0,
|
||||
handleSize: 0,
|
||||
handleShape: "square",
|
||||
circleShape: "pie",
|
||||
startAngle: 315,
|
||||
tooltipFormat: "changeTooltip",
|
||||
mouseScrollAction: true,
|
||||
drag: function (args) {
|
||||
$("#handle1-value").val(`${args.value}FS`);
|
||||
$("#handle1-value").val(`${args.value}Hz`);
|
||||
},
|
||||
change: function (args) {
|
||||
$("#handle1-value").val(`${args.value}FS`);
|
||||
$("#handle1-value").val(`${args.value}Hz`);
|
||||
}
|
||||
});
|
||||
|
||||
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>";
|
||||
}
|
||||
|
||||
$("#handle2").roundSlider({
|
||||
sliderType: "min-range",
|
||||
editableTooltip: false,
|
||||
radius: 60,
|
||||
width: 10,
|
||||
value: 0,
|
||||
value: 7.0,
|
||||
min: 1.0,
|
||||
max: 10.0,
|
||||
handleSize: 0,
|
||||
handleShape: "square",
|
||||
circleShape: "pie",
|
||||
startAngle: 315,
|
||||
tooltipFormat: "changeTooltip",
|
||||
mouseScrollAction: true,
|
||||
|
||||
drag: function (args) {
|
||||
$("#handle2-value").val(`${args.value}FS`);
|
||||
$("#handle2-value").val(`${args.value}Hz`);
|
||||
},
|
||||
change: function (args) {
|
||||
$("#handle2-value").val(`${args.value}FS`);
|
||||
$("#handle2-value").val(`${args.value}Hz`);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
81
home.html
81
home.html
|
|
@ -84,9 +84,66 @@
|
|||
<span style="opacity: 0;"></span>
|
||||
<span style="opacity: 0;"></span>
|
||||
<span style="opacity: 0;"></span>
|
||||
</div>
|
||||
<div>L</div>
|
||||
</div>
|
||||
<div class="pinpu-box pe-4">
|
||||
<div class="equalizer-bar">
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 1;"></span>
|
||||
<span style="opacity: 0;"></span>
|
||||
<span style="opacity: 0;"></span>
|
||||
</div>
|
||||
<div>R</div>
|
||||
</div>
|
||||
<div class="ps-1">
|
||||
<section class="volume-ruler left-ruler">
|
||||
<section class="cm">
|
||||
<!-- <span>0</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-10</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-20</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-30</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-40</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-50</span> -->
|
||||
<section class="mm"></section>
|
||||
</section>
|
||||
<section class="cm">
|
||||
<!-- <span>-60</span> -->
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<div class="volume-slider-box">
|
||||
<div class="volume-slider" data-slider-value="50">
|
||||
|
|
@ -653,30 +710,6 @@
|
|||
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: 60,
|
||||
width: 10,
|
||||
value: 0,
|
||||
handleSize: 0,
|
||||
handleShape: "square",
|
||||
circleShape: "pie",
|
||||
startAngle: 315,
|
||||
tooltipFormat: "changeTooltip",
|
||||
mouseScrollAction: true
|
||||
});
|
||||
|
||||
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>
|
||||
13
login.html
13
login.html
|
|
@ -28,13 +28,13 @@
|
|||
<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" />
|
||||
<input class="form-control" id="name" placeholder="Username" />
|
||||
</div>
|
||||
<div class="mb-5 input-group input-group-lg">
|
||||
<input class="form-control" placeholder="Password" />
|
||||
<input type="password" class="form-control" id="password" 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>
|
||||
<button type="button" id="submit" 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
|
||||
|
|
@ -66,11 +66,8 @@
|
|||
|
||||
$(document).ready(function () {
|
||||
$("#submit").on("click", function () {
|
||||
// let oldname = $("#oldname").val()
|
||||
// let newname = $("#newname").val()
|
||||
// let oldpassword = $("#oldpassword").val()
|
||||
// let newpassword = $("#newpassword").val()
|
||||
// let confirmpassword = $("#confirmpassword").val()
|
||||
let name = $("#name").val()
|
||||
let password = $("#password").val()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
89
network.html
89
network.html
|
|
@ -42,18 +42,20 @@
|
|||
<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="type" id="type-dhcp" value="dhcp">
|
||||
<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="type" id="type-static" value="static">
|
||||
<label class="form-check-label" for="inlineRadio2">Static IP</label>
|
||||
</div>
|
||||
<input class="form-check-input" checked type="radio" name="type" id="type-dhcp"
|
||||
value="dhcp">
|
||||
<label class="form-check-label" for="type-dhcp">DHCP</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="type" id="type-static"
|
||||
value="static">
|
||||
<label class="form-check-label" for="type-static">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">
|
||||
<div class="col-sm-7 text-start py-2" id="mac">
|
||||
10-A6-56-EF-23-D6
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -64,9 +66,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<label for="Subnet" class="col-sm-5 col-form-label">Subnet Mask</label>
|
||||
<label for="subnet" class="col-sm-5 col-form-label">Subnet Mask</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" id="Subnet">
|
||||
<input type="text" class="form-control" id="subnet">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
|
|
@ -84,7 +86,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mt-5 pb-5">
|
||||
<button type="button" class="btn btn-dark border border-black px-5">Confirm</button>
|
||||
<button type="button" class="btn btn-dark border border-black px-5" id="submit">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -96,6 +98,71 @@
|
|||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
//初始化配置
|
||||
loadData()
|
||||
checkDisable();
|
||||
})
|
||||
|
||||
$(document).ready(function () {
|
||||
$("input[name='type']").on('change', function () {
|
||||
console.log($("input[name=type]:checked").val())
|
||||
checkDisable();
|
||||
})
|
||||
|
||||
$("#submit").on('click', function () {
|
||||
if (isValidIP($("#ipaddress").val()) == false) {
|
||||
alert('The ip address format is incorrect')
|
||||
return
|
||||
}
|
||||
if (isValidIP($('#subnet').val()) == false) {
|
||||
alert('The subnet address format is incorrect')
|
||||
return
|
||||
}
|
||||
if (isValidIP($('#gateway').val()) == false) {
|
||||
alert('The gateway address format is incorrect')
|
||||
return
|
||||
}
|
||||
if ($('#hostName').val().length > 32) {
|
||||
alert('The host name contains a maximum of 32 characters')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
function checkDisable() {
|
||||
var type = $("input[name='type']:checked").val()
|
||||
if (type == 'dhcp') {
|
||||
$("#ipaddress").attr('disabled', "disabled");
|
||||
$('#subnet').attr('disabled', "disabled");
|
||||
$('#gateway').attr('disabled', "disabled");
|
||||
}
|
||||
else{
|
||||
$("#ipaddress").removeAttr("disabled");
|
||||
$('#subnet').removeAttr("disabled");
|
||||
$('#gateway').removeAttr("disabled");
|
||||
}
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
$('#mac').text("20-A6-56-EF-23-D6")
|
||||
$("#ipaddress").val('127.0.0.10')
|
||||
$('#subnet').val('255.255.255.0')
|
||||
$('#gateway').val('127.0.0.1')
|
||||
$('#hostName').val('host-name')
|
||||
}
|
||||
|
||||
function isValidIP(ip) {
|
||||
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
|
||||
return reg.test(ip);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -96,6 +96,30 @@
|
|||
let oldpassword = $("#oldpassword").val()
|
||||
let newpassword = $("#newpassword").val()
|
||||
let confirmpassword = $("#confirmpassword").val()
|
||||
|
||||
if (oldname.length > 32 || oldname.length < 1) {
|
||||
alert('The old user name cannot be empty and contains 1 to 32 characters')
|
||||
return
|
||||
}
|
||||
if (newname.length > 32 || newname.length < 1) {
|
||||
alert('The new user name cannot be empty and contains 1 to 32 characters')
|
||||
return
|
||||
}
|
||||
if (oldpassword.length > 16 || oldpassword.length < 5) {
|
||||
alert('Old passwords were between 5 and 16 characters long')
|
||||
return
|
||||
}
|
||||
if (newpassword.length > 16 || newpassword.length < 5) {
|
||||
alert('The new password must be between 5 and 16 characters long')
|
||||
return
|
||||
}
|
||||
if(newpassword != confirmpassword){
|
||||
alert('Confirm that the password is inconsistent with the new password')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
alert('submit')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -79,11 +79,11 @@
|
|||
<div class="mb-3 row">
|
||||
<label for="inputPassword" class="col-sm-4 col-form-label">Fimware Upgrade</label>
|
||||
<div class="col-sm-8 d-flex">
|
||||
<button id="selectFile" class="btn button btn-dark border border-black">Select</button>
|
||||
<button id="selectFile" class="btn button btn-dark border border-black">Browser</button>
|
||||
<input type="text" id="fileName" class="form-control" />
|
||||
<input type="file" id="uploadFile" style="display: none;">
|
||||
<button type="button" id="upgrade"
|
||||
class="btn button btn-dark border border-black ms-4">Confirm</button>
|
||||
class="btn button btn-dark border border-black ms-4">Load</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
114
test.html
114
test.html
|
|
@ -1,114 +0,0 @@
|
|||
<!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>
|
||||
180
volume copy.html
180
volume copy.html
|
|
@ -1,180 +0,0 @@
|
|||
<!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>
|
||||
<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>
|
||||
Loading…
Reference in New Issue