Благодарим за выбор нашего сервиса!
Тестовое сообщение
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться22025-10-21 11:31:31
[html]<div class="dag-cal" id="dag-cal">
<div class="dag-cal__card" id="dag-cal__add-years-card">
<h3 class="dag-cal__card-title">1) Прибавить/вычесть годы к дате</h3>
<div class="dag-cal__row">
<label class="dag-cal__field">
<span class="dag-cal__label">День</span>
<input class="dag-cal__input dag-cal__input--narrow" type="number" id="dag-cal__dDay" min="1" max="30" value="1">
</label>
<label class="dag-cal__field">
<span class="dag-cal__label">Месяц (1–8 или название)</span>
<input class="dag-cal__input dag-cal__input--medium" type="text" id="dag-cal__dMonth" placeholder="напр. 3 или месяц дождей">
</label>
<label class="dag-cal__field">
<span class="dag-cal__label">Год (≥1)</span>
<input class="dag-cal__input dag-cal__input--narrow" type="number" id="dag-cal__dYear" min="1" value="1">
</label>
<label class="dag-cal__field">
<span class="dag-cal__label">Смещение (лет, можно −)</span>
<input class="dag-cal__input dag-cal__input--narrow" type="number" id="dag-cal__offsetYears" value="0">
</label>
<button class="dag-cal__btn" id="dag-cal__btnAddYears">Посчитать</button>
</div>
<div class="dag-cal__out" id="dag-cal__outAddYears"></div>
</div>
<div class="dag-cal__card" id="dag-cal__diff-card">
<h3 class="dag-cal__card-title">2) Разница между двумя датами</h3>
<div class="dag-cal__row">
<label class="dag-cal__field">
<span class="dag-cal__label">A — день</span>
<input class="dag-cal__input dag-cal__input--narrow" type="number" id="dag-cal__aDay" min="1" max="30" value="1">
</label>
<label class="dag-cal__field">
<span class="dag-cal__label">A — месяц</span>
<input class="dag-cal__input dag-cal__input--medium" type="text" id="dag-cal__aMonth" placeholder="напр. 1 или месяца луны">
</label>
<label class="dag-cal__field">
<span class="dag-cal__label">A — год</span>
<input class="dag-cal__input dag-cal__input--narrow" type="number" id="dag-cal__aYear" min="1" value="1">
</label>
</div>
<div class="dag-cal__row">
<label class="dag-cal__field">
<span class="dag-cal__label">B — день</span>
<input class="dag-cal__input dag-cal__input--narrow" type="number" id="dag-cal__bDay" min="1" max="30" value="1">
</label>
<label class="dag-cal__field">
<span class="dag-cal__label">B — месяц</span>
<input class="dag-cal__input dag-cal__input--medium" type="text" id="dag-cal__bMonth" placeholder="напр. 8 или месяц бурь">
</label>
<label class="dag-cal__field">
<span class="dag-cal__label">B — год</span>
<input class="dag-cal__input dag-cal__input--narrow" type="number" id="dag-cal__bYear" min="1" value="1">
</label>
<button class="dag-cal__btn" id="dag-cal__btnDiff">Разница</button>
</div>
<div class="dag-cal__out" id="dag-cal__outDiff"></div>
</div>
<!-- Кастомный alert-модал -->
<div class="dag-cal__modal" id="dag-cal__modal" aria-hidden="true">
<div class="dag-cal__modal-backdrop" id="dag-cal__modal-backdrop"></div>
<div class="dag-cal__modal-dialog" role="dialog" aria-modal="true" aria-labelledby="dag-cal__modal-title">
<div class="dag-cal__modal-header" id="dag-cal__modal-title">Результат</div>
<div class="dag-cal__modal-body" id="dag-cal__modal-body"></div>
<button class="dag-cal__btn dag-cal__modal-close" id="dag-cal__modal-close">OK</button>
</div>
</div>
</div>
<style>
.dag-cal { font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; max-width: 720px; }
.dag-cal h3 { margin: 0 0 12px; font-size: 16px; }
.dag-cal__title { font-size: 20px; margin-bottom: 12px; }
.dag-cal__subtitle { color: #666; font-size: 13px; margin-bottom: 12px; }
.dag-cal__card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin: 12px 0; }
.dag-cal__card-title { font-weight: 700; }
.dag-cal__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 6px; }
.dag-cal__field { display: flex; flex-direction: column; gap: 4px; }
.dag-cal__label { font-weight: 600; }
.dag-cal__input { padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
.dag-cal__input--narrow { width: 110px; }
.dag-cal__input--medium { width: 180px; }
.dag-cal__btn { padding: 8px 12px; border: 1px solid #ccc; border-radius: 8px; background: #f5f5f5; cursor: pointer; }
.dag-cal__out { margin-top: 8px; font-size: 14px; color: #a33; display:none; }
.dag-cal__out--error { display:block; }
/* Модал */
.dag-cal__modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.dag-cal__modal--open { display: block; }
.dag-cal__modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.dag-cal__modal-dialog { position: relative; max-width: 480px; margin: 10vh auto; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 16px; }
.dag-cal__modal-header { font-weight: 700; margin-bottom: 8px; }
.dag-cal__modal-body { white-space: pre-wrap; margin-bottom: 12px; }
.dag-cal__modal-close { display: inline-block; }
</style>
<script>
(function () {
// --- Месяцы и утилиты ---
var GEN = [
"месяца луны","месяца ветров","месяца ласточки","месяца дождей",
"месяца солнца","месяца охоты","месяца жатвы","месяца бурь"
];
var MAP = {
"1":0,"луны":0,"месяц луны":0,"месяца луны":0,
"2":1,"ветров":1,"месяц ветров":1,"месяца ветров":1,
"3":2,"ласточки":2,"месяц ласточки":2,"месяца ласточки":2,
"4":3,"дождей":3,"месяц дождей":3,"месяца дождей":3,
"5":4,"солнца":4,"месяц солнца":4,"месяца солнца":4,
"6":5,"охоты":5,"месяц охоты":5,"месяца охоты":5,
"7":6,"жатвы":6,"месяц жатвы":6,"месяца жатвы":6,
"8":7,"бурь":7,"месяц бурь":7,"месяца бурь":7
};
function parseMonth(v) {
var k = String(v || "").trim().toLowerCase().replace(/^месяц(?:а)?\s+/, "");
if (MAP.hasOwnProperty(k)) return MAP[k];
throw new Error("Месяц: введите 1–8 или название (напр. «дождей»).");
}
function fmt(day, m, y) { return day + " " + GEN[m] + " " + y + " год"; }
function toAbs(day, m, y){ return (y-1)*240 + m*30 + (day-1); }
// --- DOM ----
var $ = function(id){ return document.getElementById(id); };
var dDay=$("dag-cal__dDay"), dMonth=$("dag-cal__dMonth"), dYear=$("dag-cal__dYear"),
offsetYears=$("dag-cal__offsetYears"), outAdd=$("dag-cal__outAddYears"),
btnAdd=$("dag-cal__btnAddYears");
var aDay=$("dag-cal__aDay"), aMonth=$("dag-cal__aMonth"), aYear=$("dag-cal__aYear"),
bDay=$("dag-cal__bDay"), bMonth=$("dag-cal__bMonth"), bYear=$("dag-cal__bYear"),
outDiff=$("dag-cal__outDiff"), btnDiff=$("dag-cal__btnDiff");
// --- Кастомный alert ---
var modal = $("dag-cal__modal"),
modalBody = $("dag-cal__modal-body"),
modalClose = $("dag-cal__modal-close"),
modalBackdrop = $("dag-cal__modal-backdrop");
function showModal(message, title){
$("dag-cal__modal-title").textContent = title || "Результат";
modalBody.textContent = message;
modal.classList.add("dag-cal__modal--open");
}
function hideModal(){
modal.classList.remove("dag-cal__modal--open");
}
modalClose.addEventListener("click", hideModal);
modalBackdrop.addEventListener("click", hideModal);
document.addEventListener("keydown", function(e){ if(e.key === "Escape") hideModal(); });
function showErr(outEl, msg){
outEl.textContent = "Ошибка: " + msg;
outEl.classList.add("dag-cal__out--error");
}
function clearErr(outEl){
outEl.textContent = "";
outEl.classList.remove("dag-cal__out--error");
}
// --- 1) Прибавить/вычесть годы ---
btnAdd.addEventListener("click", function(){
try{
clearErr(outAdd);
var day = Number(dDay.value);
var m = parseMonth(dMonth.value);
var y = Number(dYear.value);
var s = Number(offsetYears.value);
if (!(day>=1 && day<=30)) throw new Error("День 1–30.");
if (!(y>=1)) throw new Error("Год ≥1.");
var ny = y + s;
if (ny < 1) throw new Error("После смещения год стал < 1.");
showModal("Новая дата: " + fmt(day, m, ny));
}catch(e){
showErr(outAdd, e.message);
}
});
// --- 2) Разница ---
btnDiff.addEventListener("click", function(){
try{
clearErr(outDiff);
var aAbs = toAbs(Number(aDay.value), parseMonth(aMonth.value), Number(aYear.value));
var bAbs = toAbs(Number(bDay.value), parseMonth(bMonth.value), Number(bYear.value));
var diff = bAbs - aAbs;
var sign = diff<0 ? -1 : 1;
diff = Math.abs(diff);
var y = Math.floor(diff/240); diff%=240;
var m = Math.floor(diff/30); diff%=30;
var d = diff;
var total = (y*240 + m*30 + d) * sign;
var msg = "Разница: " + (sign<0?"−":"") + y + " лет, " + m + " месяцев, " + d + " дней\n" +
"Всего дней: " + total;
showModal(msg);
}catch(e){
showErr(outDiff, e.message);
}
});
})();
</script>
[/html]
Страница: 1