纯JS实现的Popup框+自定义checkbox绑值获取值+动态html文本插入父标签
<!DOCTYPE html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=0.5,maximum-scale=1.0,minimum-scale=0.5,user-scalable=yes">
<title>闹钟</title>
</head>
<body>
<div class="info-base">
<div class="info-content">
<div class="div-add">
<span class="div-add-title">闹钟设置</span>
</div>
<div id="alarmBody" class="div-alarm-body">
</div>
</div>
</div>
<div id="alarmOverlay"></div>
<div id="alarmPopup">
<h2 class="popup-title">闹钟设置</h2>
<div class="popup-body">
<div class="popup-content"><span class="popup-content-title t-r">时间：</span>
<div class="popup-content-item">
<select id="alarmHour">
<option value="">---请选择时---</option>
</select>
:
<select id="alarmMinute">
<option value="">---请选择分---</option>
</select>
</div>
</div>
<div class="popup-content"><span class="popup-content-title t-r">重复：</span>
<div class="popup-content-item"> <input name='checkR' type='checkbox'>周一
<input name='checkR' type='checkbox'>周二
<input name='checkR' type='checkbox'>周三
<input name='checkR' type='checkbox'>周四
<input name='checkR' type='checkbox'>周五
<input name='checkR' type='checkbox'>周六
<input name='checkR' type='checkbox'>周日
</div>
</div>
<div class="popup-content"><span class="popup-content-title t-r">是否启用：</span>
<div class="popup-content-item">
<div class="btn_switch">
<input class="btn_switch-checkbox" id="onoffswitchP" type="checkbox">
<label class="btn_switch-label" for="onoffswitchP">
<span class="btn_switch-inner" data-on="ON" data-off="OFF"></span>
<span class="btn_switch-switch"></span>
</label>
</div>
</div>
</div>
</div>
<div class="popup-bottom">
<button id="save-btn" onclick="saveAlarmPopup()">保存</button>
<button id="close-btn" onclick="closeAlarmPopup()">关闭</button>
</div>
</div>
</body>
<script>
// 获取DOM元素
const overlay = document.getElementById('alarmOverlay');
const popup = document.getElementById('alarmPopup');
const alarmBody = document.getElementById('alarmBody');
var list = [];
var currItem = null;
window.onload = function () {
//方法内容
console.log("onload");
// 调用接口 获取数据 TODO
list = [{
hour: "08",
minute: "34",
play0: "1",
play1: "1",
play2: "1",
play3: "1",
play4: "1",
play5: "1",
play6: "1",
isEnable: false, // 是否启用
}, {
hour: "13",
minute: "00",
play0: "0",
play1: "0",
play2: "1",
play3: "0",
play4: "1",
play5: "0",
play6: "1",
isEnable: true, // 是否启用
}];
var htmlStr = "";
for (var i = 0; i < list.length; i++) {
var item = list[i];
htmlStr += "<div class='alarm-content'>" +
"<div class='alarm-item'>" +
"<span class='alarm-item-time'>" + item["hour"] + ":" + item["minute"] + "</span>" +
" <span class='alarm-item-label'>" + (item["play0"] === '1' ? '周一 ' : '') + (item["play1"] === '1' ? '周二 ' : '') + (item["play2"] === '1' ? '周三 ' : '') +
(item["play3"] === '1' ? '周四 ' : '') + (item["play4"] === '1' ? '周五 ' : '') + (item["play5"] === '1' ? '周六 ' : '') + (item["play6"] === '1' ? '周日 ' : '') +
"</span>" +
" </div>" +
" <div class='alarm-item-switch'>" +
" <div class='btn_switch'>" +
" <input class='btn_switch-checkbox' id='onoffswitch" + i + "' type='checkbox' onclick='switchBtn(" + i + ")'>" +
" <label class='btn_switch-label' for='onoffswitch" + i + "'>" +
" <span class='btn_switch-inner' data-on='ON' data-off='OFF'></span>" +
" <span class='btn_switch-switch'></span>" +
" </label>" +
" </div>" +
" </div>" +
" <div class='div-divider'></div>" +
" <div class='div-alarm-btn'>" +
" <button class='edit_base edit_btn' onclick='editAlarmClick(" + i + ")'>编辑</button>" +
"</div>" +
" </div>";
}
alarmBody.innerHTML = htmlStr;
setTimeout(function () {
for (var i = 0; i < list.length; i++) {
var onoffswitch = document.getElementById('onoffswitch' + i);
onoffswitch.checked = list[i]["isEnable"];
}
}, 10);
};
// switch切换
function switchBtn(currIndex) {
console.log(currIndex);
var onoffswitch = document.getElementById('onoffswitch' + currIndex);
console.log(onoffswitch["checked"]);
};
function switchPopupBtn() {
console.log("switchBtn2");
};
// 添加闹钟 打卡Popup
function editAlarmClick(currIndex) {
currItem = list[currIndex];
overlay.style.display = 'block';
popup.style.display = 'block';
// 时
var option1 = document.getElementById("alarmHour");
option1.options.length = 1;//直接设置总长度为1,留一个《请选择》，直接设置长度为1
for (var x = 0; x < 24; x++) {
var opt = document.createElement("option");
opt.innerHTML = x.toString().padStart(2, "0");
option1.appendChild(opt);
}
option1["value"] = currItem["hour"];
// 分
var option2 = document.getElementById("alarmMinute");
option2.options.length = 1;//直接设置总长度为1,留一个《请选择》，直接设置长度为1
for (var x = 0; x < 60; x++) {
var opt = document.createElement("option");
opt.innerHTML = x.toString().padStart(2, "0");
option2.appendChild(opt);
}
option2["value"] = currItem["minute"];
// 重复
var checkboxs = document.getElementsByName("checkR");
if (checkboxs && checkboxs.length > 0) {
for (var i = 0; i < checkboxs.length; i++) {
checkboxs[i].checked = currItem["play" + i] === "1" ? true : false;
}
}
// 启用
var onoffswitch = document.getElementById('onoffswitchP');
onoffswitch.checked = currItem["isEnable"];
};
// 关闭Popup
function closeAlarmPopup() {
overlay.style.display = 'none';
popup.style.display = 'none';
};
// 保存
function saveAlarmPopup() {
// 时
var option1 = document.getElementById("alarmHour");
currItem["hour"] = option1["value"] === "" ? "00" : option1["value"];
// 分
var option2 = document.getElementById("alarmMinute");
currItem["minute"] = option2["value"] === "" ? "00" : option2["value"];
// 重复
var checkboxs = document.getElementsByName("checkR");
if (checkboxs && checkboxs.length > 0) {
for (var i = 0; i < checkboxs.length; i++) {
currItem["play" + i] = checkboxs[i].checked === true ? "1" : "0";
}
}
// 启用
var onoffswitch = document.getElementById('onoffswitchP');
currItem["isEnable"] = onoffswitch.checked;
console.log(currItem);
// 调用接口 保存数据 TODO
closeAlarmPopup();
};
</script>
<style>
body {
padding: 0;
margin: 0;
height: 100%;
background-color: #9e9e9e30;
height: 100vh;
}
.info-base {
margin: auto;
top: 5%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.info-content {
/* width: 50%; */
/* height: 50%; */
}
.div-add {
display: flex;
justify-content: center;
align-items: center;
}
.div-add-title {
display: inline-block;
color: #3c3c3c;
font-size: 24px;
font-weight: bold;
}
.edit_base {
/* padding: 10px; */
border-radius: 5px;
font-family: "KaiTi";
color: rgb(60, 60, 60);
font-weight: 100;
cursor: pointer;
}
.edit_btn {
width: 50px;
height: 30px;
font-size: 16px;
color: #e6a23c;
background-color: rgba(255, 255, 255, 0.582);
border: 0px;
}
.del_btn {
width: 50px;
height: 30px;
font-size: 16px;
color: #f56c6c;
background-color: rgba(255, 255, 255, 0.582);
border: 0px;
}
.edit_btn:hover,
.del_btn:hover {
box-shadow: 2px 2px 15px 2px rgb(220, 240, 255);
background-color: transparent;
}
.div-alarm-body {
/* max-height: 300px; */
display: flex;
justify-content: center;
flex-direction: column;
margin-top: 20px;
background-color: white;
padding: 15px;
border-radius: 5px;
}
.alarm-content {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
border-bottom: 1px solid #dcdfe6;
padding-bottom: 10px;
padding-top: 10px;
}
.alarm-item {
display: flex;
flex-direction: column;
justify-content: center;
width: 25rem;
}
.alarm-item-time {
font-size: 18px;
font-weight: 800;
}
.alarm-item-label {
font-size: 14px;
color: gray;
}
.btn_switch {
position: relative;
float: left;
width: 5rem;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.btn_switch-checkbox {
display: none;
}
.btn_switch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 1px solid #dcdfe6;
border-radius: 20px;
}
.btn_switch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.btn_switch-inner::before,
.btn_switch-inner::after {
display: block;
float: right;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: "KaiTi";
/* font-weight: bold; */
box-sizing: border-box;
}
.btn_switch-inner::after {
content: attr(data-on);
/* content: ""; */
padding-left: 8px;
background-color: #00e500;
color: #FFFFFF;
}
.btn_switch-inner::before {
content: attr(data-off);
/* content: ""; */
padding-right: 5px;
background-color: #9e9e9e5e;
/* color: #dcdfe6; */
color: #FFFFFF;
text-align: right;
}
.btn_switch-switch {
position: absolute;
display: block;
width: 1.8rem;
height: 1.8rem;
margin: 4px;
background: #FFFFFF;
top: 0;
bottom: 0;
right: 2.5rem;
border: 1px solid #dcdfe6;
border-radius: 1.8rem;
transition: all 0.3s ease-in 0s;
}
.btn_switch-checkbox:checked+.btn_switch-label .btn_switch-inner {
margin-left: 0;
}
.btn_switch-checkbox:checked+.btn_switch-label .btn_switch-switch {
right: 0px;
}
.div-divider {
clear: both;
height: 1.5em;
display: inline-block;
width: 1px;
margin: 0 10px;
vertical-align: middle;
border-left: 1px solid #dcdfe6;
}
.div-alarm-btn {
/* margin-left: 15px; */
}
#alarmOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
#alarmPopup {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -55%);
width: 50%;
height: 300px;
background-color: white;
padding: 20px;
display: none;
}
.popup-title {
text-align: center;
font-size: 24px;
margin-top: 5px;
margin-bottom: 24px;
}
.popup-bottom {
position: fixed;
bottom: 10px;
display: flex;
justify-content: center;
width: calc(100% - 45px);
}
.popup-body {
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
font-size: 16px;
}
#save-btn {
background-color: rgba(255, 255, 255, 0.582);
border: 1px solid rgb(190, 225, 255);
/* padding: 10px; */
border-radius: 5px;
font-family: "KaiTi";
color: rgb(60, 60, 60);
font-weight: 100;
cursor: pointer;
width: 80px;
height: 35px;
font-size: 16px;
}
#save-btn:hover {
box-shadow: 2px 2px 15px 2px rgb(220, 240, 255);
background-color: transparent;
}
#close-btn {
background-color: rgba(255, 255, 255, 0.582);
border: 1px solid #dcdfe6;
/* padding: 10px; */
border-radius: 5px;
font-family: "KaiTi";
color: rgb(60, 60, 60);
font-weight: 100;
cursor: pointer;
width: 80px;
height: 35px;
font-size: 16px;
margin-left: 5px;
}
#close-btn:hover {
box-shadow: 2px 2px 15px 2px rgba(173, 171, 171, 0.466);
background-color: transparent;
}
.popup-content {
display: flex;
align-items: flex-start;
margin-bottom: 24px;
}
.popup-content-title {
flex: 1 0 35%;
}
.popup-content-item {
flex: 1 0 65%;
}
.t-r {
text-align: right;
}
#alarmMinute,
#alarmHour {
height: 30px;
border-radius: 5px;
box-sizing: border-box;
outline: none;
border: none;
background: none;
box-shadow: 0 0 0 1px #dcdfe6 inset;
font-size: 16px;
}
.div-item-input {
height: 30px;
/* */
color: rgb(80, 80, 80);
font-size: 16px;
margin: 10px 0px 30px 0px;
padding: 15px;
border-radius: 5px;
box-sizing: border-box;
outline: none;
border: none;
background: none;
box-shadow: 0 0 0 1px #dcdfe6 inset;
margin: 0px;
}
.div-item-input:focus {
box-shadow: 0 0 0 1px #79bbff inset;
}
@media only screen and (max-width: 767px) {
#alarmPopup {
width: 90%;
}
}
</style>
</html>
浙公网安备 33010602011771号