點擊了#armaway()按鈕，怎么做節目？也許通過使用JavaScript代碼？JS中有沒有需要修復的語法錯誤？我不確定這里是否還有我不小心弄亂的代碼。 密碼
<!DOCTYPE html>
<html>
<body>
<head>
<center>
<div class="system-status-menu">
<style id="armStyle">
.arm-away, .arm-stay, .night-stay, .arm-away-bypass, .alarm {
/* gradient and fallback color */
fill: url(#arm) #d00202;
u }
</style>
<style id="settingsStyle">
.settings {
/* gradient and fallback color */
fill: url(#settingsother) #595959;
}
</style>
<style id="wifiOther">
.wifi {
/* gradient and fallback color */
fill: url(#wifiOption) #87dce8;
}
</style>
<style id="MAIL">
.MAIL {
/* gradient and fallback color */
fill: url(#MAIL) #5BFDFD;
}
</style>
<style id="warning">
.warning {
/* gradient and fallback color */
fill: url(#warning) #ffce44;
}
</style>
<!---->
<div id="configuration-settings" style="display: none;">
<br>
<label>Brightness</label>
<input type="range">
<br>
<label>Contrast</label>
<input type="range">
<br>
<label>Volume</label>
<input type="range">
<br><br>
<label class="container">
<label>Voice Chime</label>
<input type="checkbox">
<label>Tone Chime</label>
<input type="checkbox">
<span class="checkmark"></span>
<br><br>
</label>
<button id="btn-back">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
</button>
<button id="btn-clean">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M15,11V1H9v10H3v12h18V11H15z M19,21h-2v-4h-2v4h-2v-4h-2v4H9v-4H7v4H5v-8h14V21z"/></g></svg>
<br>
Clean
</button>
</div>
<div class="armscreen" style="display: none;">
<br>
<button class="back-button" onclick="back()">? Back</button>
<br><br><br><br><br><br>
<p class="armscreen-mode-text">Arm the system in <span class="arming-mode-text-type"></span> mode</p>
<div class="password-icon"></div>
<input type="text" maxlength="4" class="arm-code-entry"><p id="button-space">
<br>
<button class="keypad-code-number">1</button>
<button class="keypad-code-number">2</button>
<button class="keypad-code-number">3</button>
<br>
<button class="keypad-code-number">4</button>
<button class="keypad-code-number">5</button>
<button class="keypad-code-number">6</button>
<br>
<button class="keypad-code-number">7</button>
<button class="keypad-code-number">8</button>
<button class="keypad-code-number">9</button>
<br>
<!-- reference: 0 -->
<button class="keypad-code-number">0</button>
</p>
</div>
<div class="header">
<button style="float: left;" id="wifi" title="Network Settings" onclick="configureWifi()">
<div class="container">
<div class="wired alert alert-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="#87dce8" class="wifi" style="display: none;"><path d="M4.504 13.572l-1.505-1.489c2.201-2.805 5.413-4.583 9.001-4.583s6.8 1.779 9 4.583l-1.504 1.489c-1.835-2.338-4.512-3.822-7.496-3.822s-5.661 1.484-7.496 3.822zm7.496.678c1.791 0 3.397.891 4.498 2.293l1.502-1.488c-1.467-1.869-3.608-3.055-6-3.055s-4.533 1.186-6 3.055l1.502 1.488c1.101-1.402 2.707-2.293 4.498-2.293zm0 2.25c-1.196 0-2.258.602-2.99 1.536l2.99 2.964 2.99-2.963c-.732-.935-1.794-1.537-2.99-1.537zm0-11.25c4.179 0 7.927 2.078 10.495 5.351l1.505-1.491c-2.935-3.739-7.217-6.11-12-6.11s-9.065 2.371-12 6.11l1.505 1.491c2.568-3.273 6.316-5.351 10.495-5.351z"/></svg>
</div>
<div class="unwired alert alert-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="#474747" class="offline"><path d="M4.504 13.572l-1.505-1.489c2.201-2.805 5.413-4.583 9.001-4.583s6.8 1.779 9 4.583l-1.504 1.489c-1.835-2.338-4.512-3.822-7.496-3.822s-5.661 1.484-7.496 3.822zm7.496.678c1.791 0 3.397.891 4.498 2.293l1.502-1.488c-1.467-1.869-3.608-3.055-6-3.055s-4.533 1.186-6 3.055l1.502 1.488c1.101-1.402 2.707-2.293 4.498-2.293zm0 2.25c-1.196 0-2.258.602-2.99 1.536l2.99 2.964 2.99-2.963c-.732-.935-1.794-1.537-2.99-1.537zm0-11.25c4.179 0 7.927 2.078 10.495 5.351l1.505-1.491c-2.935-3.739-7.217-6.11-12-6.11s-9.065 2.371-12 6.11l1.505 1.491c2.568-3.273 6.316-5.351 10.495-5.351z"/></svg>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 24 24" width="15px" fill="#7f413a" class="network-x" style="display: none;"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
</button>
<div class="system-top-text-readonly-status" style="user-select: none;">
<div class="status1">
<span class="value">Ready To Arm</span>
<button id="helpButton" title="Help">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" class="help"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm1 14h-2v-2h2v2zm0-3h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z" opacity=".3"/><path d="M11 16h2v2h-2zm1-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
</div>
</div>
</div>
<br>
<div class="emergency-icons">
<button id="emergency">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#cf1111"><path d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"/></svg>
<div class="emergency-menu" style="display: none;"></div>
</button>
</div>
<br>
<br>
<br>
<br>
<button id="system-status" title="Ready To Arm">
<svg style="position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="disarmed" x2="0" y2="1">
<stop offset="0%" stop-color="#1dd82a" />
<stop offset="100%" stop-color="#3aa53b" />
</linearGradient>
</svg>
<svg style="position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="trouble" x2="0" y2="1">
<stop offset="0%" stop-color="#ff8800" />
<stop offset="100%" stop-color="#bd6500" />
</linearGradient>
</svg>
<svg style="position:absolute;" aria-hidden="true" focusable="false">
<g transform=""></g>
<linearGradient id="fault" x2="0" y2="1">
<stop offset="0%" stop-color="#88ff00" />
<stop offset="100%" stop-color="#5cad00" />
</linearGradient>
</svg>
<svg style="position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="MAIL" x2="0" y2="1">
<stop offset="0%" stop-color="#5BFDFD" />
<stop offset="100%" stop-color="#87dce8" />
</linearGradient>
</svg>
<svg style="position:absolute;" aria-hidden="true" focusable="false">
<radialGradient id="warning" x2="0" y2="1">
<stop offset="0%" stop-color="#fffb00" />
<stop offset="100%" stop-color="#b5b200" />
</radialGradient>
</svg>
<style>
.disarmed {
/* gradient and fallback color */
fill: url(#disarmed) #1c6c5f;
}
</style>
<style>
.trouble, .trouble1, .trouble2 {
/* gradient and fallback color */
fill: url(#trouble);
}
</style>
<style>
.fault, .fault2 {
/* gradient and fallback color */
fill: url(#fault);
}
</style>
<div class="svg-icons">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="150px" viewBox="0 0 24 24" width="150px" fill="#disarmed" class="disarmed"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M15.5,14.09l-1.41,1.41L12,13.42L9.91,15.5 L8.5,14.09L10.59,12L8.5,9.91L9.91,8.5L12,10.59l2.09-2.09l1.41,1.41L13.42,12L15.5,14.09z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 24 24" width="150px" fill="#000000" class="fault" style="display: none;"><path d="M0 0h24v24H0V0z" fill="none"></path>
<path xmlns="http://www.w3.org/2000/svg" d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 24 24" width="150px" fill="#000000" class="fault2" style="display: none;"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 24 24" width="150px" class="trouble" fill="#trouble" style="display: none;"><path d="M0 0h24v24H0z" fill="none"></path><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 24 24" width="150px" fill="#trouble" class="trouble1" style="display: none;"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 7V3h-2v4h-4V3H8v4H6v7.5L9.5 18v3h5v-3l3.5-3.51V7h-2z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="150px" viewBox="0 0 24 24" width="150px" fill="#warning" class="trouble1" style="display: none;"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 4h-3V2h-4v2H7v18h10V4zm-4 14h-2v-2h2v2zm0-4h-2V9h2v5z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="150" viewBox="0 96 960 960" width="150" class="alarm" style="display: none;"><path d="M450 628h60V416h-60v212Zm29.982 108q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM160 856v-60h84V490q0-84.174 49.5-149.587Q343 275 424 258v-29q0-23 16.265-38 16.264-15 39.5-15Q503 176 519.5 191t16.5 38v29q81 17 131 82.413T717 490v306h83v60H160Zm320-295Zm0 415q-32 0-56-23.5T400 896h160q0 33-23.5 56.5T480 976ZM304 796h353V490q0-74-51-126t-125-52q-74 0-125.5 52T304 490v306Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="150px" viewBox="0 0 24 24" width="150px" fill="#arm" class="night-stay" style="display: none;"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M15.97,14.41c-1.84,2.17-5.21,2.1-6.96-0.07 c-2.19-2.72-0.65-6.72,2.69-7.33c0.34-0.06,0.63,0.27,0.51,0.6c-0.46,1.23-0.39,2.64,0.32,3.86c0.71,1.22,1.89,1.99,3.18,2.2 C16.05,13.72,16.2,14.14,15.97,14.41z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="150px" viewBox="0 0 24 24" width="150px" fill="#000000" class="night-stay" style="display: none;"><g><rect fill="none" height="24" width="24"></path></g><g><g><g><path d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"/></g><path d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"/></g></g></svg>
</div>
<div class="button-status">Ready To Arm</div>
<!-- svg code must be separate -->
</button>
<div><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"/></svg>
<!-- divider -->
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 8h-3V6.21c0-2.61-1.91-4.94-4.51-5.19C9.51.74 7 3.08 7 6h2c0-1.13.6-2.24 1.64-2.7C12.85 2.31 15 3.9 15 6v2H4v14h16V8zm-2 12H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>
</div>
<br>
<button id="disarm" class="mainOptions" style="display: none;"> <!-- This button should only display when the system is armed.-->
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="60px" viewBox="0 0 24 24" width="60px" fill="#disarmed" class="disarmed"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M15.5,14.09l-1.41,1.41L12,13.42L9.91,15.5 L8.5,14.09L10.59,12L8.5,9.91L9.91,8.5L12,10.59l2.09-2.09l1.41,1.41L13.42,12L15.5,14.09z"/></g></svg>
Disarm
</button>
<button id="armAway" onclick="alertArmAway()" class="mainOptions">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="60px" viewBox="0 0 24 24" width="60px" fill="none" class="arm-away"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M10.94,15.54L7.4,12l1.41-1.41l2.12,2.12 l4.24-4.24l1.41,1.41L10.94,15.54z"/></g></svg>
<br>
Arm Away
</button>
<button id="armedStay" onclick="alertArmStay()" class="mainOptions">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="60px" viewBox="0 0 24 24" width="60px" fill="none" class="arm-stay"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M17,11c0.34,0,0.67,0.04,1,0.09V6.27L10.5,3L3,6.27v4.91c0,4.54,3.2,8.79,7.5,9.82c0.55-0.13,1.08-0.32,1.6-0.55 C11.41,19.47,11,18.28,11,17C11,13.69,13.69,11,17,11z"/><path d="M17,13c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4C21,14.79,19.21,13,17,13z M17,14.38c0.62,0,1.12,0.51,1.12,1.12 s-0.51,1.12-1.12,1.12s-1.12-0.51-1.12-1.12S16.38,14.38,17,14.38z M17,19.75c-0.93,0-1.74-0.46-2.24-1.17 c0.05-0.72,1.51-1.08,2.24-1.08s2.19,0.36,2.24,1.08C18.74,19.29,17.93,19.75,17,19.75z"/></g></g></svg>
<br>
Arm Stay
</button>
<button id="armCustom" onclick="custom_arm" class="mainOptions">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="60px" viewBox="0 0 24 24" width="60px" fill="#000000" class="arm-away-bypass"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M3,17.25V21h3.75L17.81,9.94l-3.75-3.75L3,17.25z M21.41,6.34l-3.75-3.75l-2.53,2.54l3.75,3.75L21.41,6.34z"/></g></g></svg>
Arm Custom
</button>
<button class="mainOptions" id="settings" onclick="openSettings()">
<svg xmlns="http://www.w3.org/2000/svg" height="60px" viewBox="0 0 24 24" width="60px" fill="#FFFFFF" class="settings"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.44 12.99l-.01.02c.04-.33.08-.67.08-1.01 0-.34-.03-.66-.07-.99l.01.02 2.44-1.92-2.43-4.22-2.87 1.16.01.01c-.52-.4-1.09-.74-1.71-1h.01L14.44 2H9.57l-.44 3.07h.01c-.62.26-1.19.6-1.71 1l.01-.01-2.88-1.17-2.44 4.22 2.44 1.92.01-.02c-.04.33-.07.65-.07.99 0 .34.03.68.08 1.01l-.01-.02-2.1 1.65-.33.26 2.43 4.2 2.88-1.15-.02-.04c.53.41 1.1.75 1.73 1.01h-.03L9.58 22h4.85s.03-.18.06-.42l.38-2.65h-.01c.62-.26 1.2-.6 1.73-1.01l-.02.04 2.88 1.15 2.43-4.2s-.14-.12-.33-.26l-2.11-1.66zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>
<br>
Settings
</button>
<button class="mainOptions" id="open-notificationsMAIL">
<svg xmlns="http://www.w3.org/2000/svg" height="60" viewBox="0 96 960 960" width="60" fill="#MAIL" class="MAIL"><path d="M80 896V256h800v640H80Zm400-302L140 371v465h680V371L480 594Zm0-60 336-218H145l335 218ZM140 371v-55 55Z"></path></svg>
<br>
Message
<span class="message-value">(0)</span>
</button>
<svg style="position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="arm" x2="0" y2="1">
<stop offset="0%" stop-color="#eb0505"></stop>
<stop offset="100%" stop-color="#bd1313"></stop>
</linearGradient>
</svg>
<svg style="position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="settingsother" x2="0" y2="1">
<stop offset="0%" stop-color="#c0c0c0"></stop>
<stop offset="100%" stop-color="#595959"></stop>
</linearGradient>
</svg>
<svg style="position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="wifiOption" x2="100%" y2="0%">
<stop offset="0%" stop-color="#b6c2c8"></stop>
<stop offset="100%" stop-color="#87dce8"></stop>
</linearGradient>
</svg>
<style id="helpQuestion">
.help {
/* gradient and fallback color */
fill: url(#help) #5BFDFD;
}
</style>
<svg style="position:absolute;" aria-hidden="true" focusable="false">
<radialGradient id="help" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0000ff"></stop>
<stop offset="100%" stop-color="#000088"></stop>
</radialGradient>
</svg> <br><br>
<div class="bottom-buttonMenu" id="bottom-buttons">
<button>Zones</button>
<button>Scenes</button>
<button>Automation</button>
<button onclick="openSystemStatusMenu();">System</button>
<button>Tools</button>
<div class="windows">
<div class="helpPage" style="display: none;">
<h1 class="title">Help</h1>
<p>Choose the status that is showing on the system.</p>
<details>
<summary>AC Loss</summary>
<criteria></criteria>
Automatic Current power to the system has been lost.<br> Check the system battery and restore the power. See video below. <br><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8PPf5NHPN9U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</details><br>
<details></details><br>
<details></details><br>
<details></details><br>
<details></details><br>
<details></details><br>
</div>
</div>
</div>
</div>
<footer id="footer" class="myFooter">
<button id="delay">Delay</button>
<iframe src="https://free.timeanddate.com/clock/i82y1s0q/n784/fn3/fs18/fcfff/tct/pct/ahr/ts1" frameborder="0" width="55" height="22" allowtransparency="true"></iframe>
<iframe src="https://free.timeanddate.com/clock/i82y1s0q/n784/fn3/fs18/fcfff/tct/pct/tt1/tw0" frameborder="0" width="136" height="22" allowtransparency="true"></iframe>
<button id="back">Back</button>
<br>
</footer>
</center>
</head>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
.header {
background-image: linear-gradient(to top, #3aa53b, #1dd82a);
width: 100%;
height: 35px;
font-family: 'Bebas Neue', cursive;
}
body {
background-image: linear-gradient(to right, #2d52ae, #283039, #2d52ae);
font-family: "Roboto";
overflow-x: hidden;
overflow-y: hidden;
}
div[class="system-top-text-readonly-status"] {
background: transparent;
border: none;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 26px;
display: block;
box-sizing: border-box;
box-shadow: 0px 4px 16px #3aa53b;
}
button[id="system-status"] {
background: transparent;
border: none;
}
.armscreen {
background-color: #011935;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.keypad-code-number {
color: #9ABCE1;
background-color: #031322;
border: 2px solid white;
}
.armscreen-mode-text {
color: #ffffff;
}
.back-button{
}
.arm-code-entry {
width: 70px;
}
.mainOptions {
border: 1px solid #e3e3e3;
border-radius: 2px;
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(215,210,204,0.25) 89%);
color: #fff;
width: 92px;
height: 92px;
user-select: none;
box-sizing: border-box;
cursor: pointer;
}
#wifi {
background-color: #1e2028;
border-top: 3px solid #1e2028;
border-left: 3px solid #1e2028;
border-right: 3px solid #1e2028;
border-bottom: 3px solid #2d3952;
border-radius: 4px;
}
#wifi:active {
background-color: #4c4f5d;
}
footer#footer.myFooter {
background-image: linear-gradient(#2f2f31, #28457e);
width: 100%;
height: 23px;
position: absolute;
bottom: 0;
}
#delay, #back {
background-image: LINEAR-GRADIENT(to top, #1782d2, #a5dff3);
border: 2px solid black;
border-radius: 6px;
}
div[class="cover"] {
background-color: white;
}
iframe {
user-select: none;
}
#helpButton {
background-color: #bbd2e6;
border-top: 3px solid #b1e2e5;
border-left: 3px solid #bbd2e6;
border-right: 3px solid #bbd2e6;
border-bottom: 3px solid #bbd2e6;
border-radius: 2px;
float: right;
cursor: pointer;
width: 70px;
align-items: center;
display: none;
}
.bottom-buttonMenu {
width: 270px;
white-space: nowrap;
overflow-x: scroll;
}
.emergency-icons {
float: right;
}
button#emergency {
background-color: #000000
}
div[class="password-check"] p[class="wrong"] {
color: #c63023;
}
button.mainOptions:disabled {
/* background-color: #4a4a4a; */
opacity: 25%;
/* color: #000000; */
cursor: default;
box-sizing: border-box;
}
.configuration-settings{
background-color: #011935;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
p#button-space {
line-height: 1.6;
}
.wired, .unwired {
display: none;
}
body.online .wired {
display: block;
}
body.offline .unwired {
display: block;
}
body.offline .wired {
display: none;
}function openSettings() {
var btn = document.getElementById("settings");
//this is what you're looking for
var x = document.getElementById("configuration-settings");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function armstatus {
document.getElementByClassName("button-status").innerHTML = "Exit Now" + time + "Seconds"
}
// Code for Wi-Fi Sign on network settings button starts
function updateConnectionStatus(msg, connected) {
if (connected) {
document.body.className = "online";
} else {
document.body.className = "offline";
}
}
window.addEventListener('load', function(e) {
if (navigator.onLine) {
updateConnectionStatus('Online', true);
} else {
updateConnectionStatus('Offline', false);
}
}, false);
window.addEventListener('online', function(e) {
updateConnectionStatus('Online', true);
}, false);
window.addEventListener('offline', function(e) {
updateConnectionStatus('Offline', false);
}, false);我嘗試使用另一個問題的答案中的代碼，但它不起作用。
# # #要讓一個div在按鈕單擊事件中消失/重新出現，可以利用display: none的css屬性和JavaScript的toggle方法。
下面是一個你想在你的網站中使用的功能的例子:
const divToToggle = document.getElementById('exampleDiv');
function toggleDiv() {
divToToggle.classList.toggle('hideClass');
}#exampleDiv {
border: 2px solid black;
height: 100px;
width: 100px;
}
.hideClass {
display: none;
}<div id="exampleDiv">
<h1>Test</h1>
</div>
<button onClick="toggleDiv()">Hide/Show Div</button>