Еженастроенник на JavaScript
Скрипт сделан как пример приложения, но пара моментов может пригодиться в других кодах. Скрипт позволяет отметить и сохранить в cookies браузера своё сегодняшнее настроение, накапливая статистику о количестве кликов.
Единственная связь скрипта с "внешним миром" - идентификатор раздела myMood, который передаётся в самовызывающуюся функцию скрипта, создающую себе весь необходимый контент.
Для простоты она пишет форму непосредственно в свойство innerHTML динамически созданного абзаца p1.
А вот обработчики событий для динамически созданных элементов назначаются как
document.getElementById("myMood5").addEventListener ("click", function(e) { check(5); });
но не
document.getElementById("myMood5").addEventListener ("click", "check(5);");
, поскольку в слушатель события должен передаваться объект. Не подойдет и решение вроде
p1.innerHTML = '<input type="radio" name="moods" id="myMood5" value="5" onclick="check(5)">';
Абзац p2 служит для вывода сообщений, код его создания показывает, как поменять в созданном объекте стилевое свойство font-size.
Свойство
styleпредставляет собой сложный объект для управления стилем и напрямую сопоставляется с атрибутомstyleHTML-элемента. Этот объект содержит набор свойств CSS:element.style.свойствоCSS. Например, установим цвет шрифта:var root = document.documentElement; root.style.color = "blue";В данном случае название свойства
colorсовпадает со свойством CSS. Аналогично мы могли бы установить цвет с помощью CSS:html { color:blue; }Однако ряд свойств CSS в названиях имеют дефис, например,
font-family. В JavaScript для этих свойств дефис не употребляется, но первая буква, которая следует после дефиса, переводится в верхний регистр:var root = document.documentElement; root.style.fontFamily = "Verdana";
Короткие версии старых функций для получения и установки cookies сработали во всех основных браузерах - актуальных Chrome, Firefox и Opera и в IE11.
Код разрешает делать только один выбор радиокнопки в сутки по часам компьютера.
Вот скрипт в работе и код файла .html на момент написания, в разметке файла указана кодировка Юникода utf-8.
Следует также учесть написанное комментарием в коде:
Некоторые браузеры, например, Chrome, не сохраняют cookies для локальных файлов, открытых по протоколу
file://(то есть, просто как файл с диска, а не через URL-адрес).В этом случае откройте файл с помощью локального сервера, скажем, XAMPP
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Проект Javascript 4</title>
</head>
<body>
<div id="myMood"></div>
<script>
/* Некоторые браузеры, например, Chrome, не сохраняют
cookies для локальных файлов, открытых по протоколу
file://
В этом случае откройте файл с помощью локального
сервера, скажем, XAMPP
*/
(function (gameId) {
var divId = document.getElementById (gameId);
var p1 = document.createElement('p');
p1.innerHTML =
'Моё настроение сегодня:'+
'<br><input type="radio" name="moods" id="myMood5" value="5">'+
'<label for="myMood5">'+
'Вау! (<span id="cntMood5">0</span>)</label>'+
'<br><input type="radio" name="moods" id="myMood4" value="4">'+
'<label for="myMood4">'+
'Норм (<span id="cntMood4">0</span>)</label>'+
'<br><input type="radio" name="moods" id="myMood3" value="3">'+
'<label for="myMood3">'+
'Хм-м... (<span id="cntMood3">0</span>)</label>'+
'<br><input type="radio" name="moods" id="myMood2" value="2">'+
'<label for="myMood2">'+
'Бе-е (<span id="cntMood2">0</span>)</label>';
divId.appendChild (p1);
document.getElementById("myMood5").addEventListener ("click", function(e) { check(5); });
document.getElementById("myMood4").addEventListener ("click", function(e) { check(4); });
document.getElementById("myMood3").addEventListener ("click", function(e) { check(3); });
document.getElementById("myMood2").addEventListener ("click", function(e) { check(2); });
var p2 = document.createElement('p');
p2.id = "msgBox";
p2.style.fontSize = "80%";
divId.appendChild (p2);
var checked = true;
function setCookie (name, value, expires) {
let c = name + "=" + escape(value)+
(expires ? "; expires="+expires.toGMTString() : "");
document.cookie = c; //Ограничение 4 Кб!
}
function getCookie (name) {
let p = name+"=";
let i1 = document.cookie.indexOf(p);
if (i1 == -1) return null;
let i2 = document.cookie.indexOf(";",i1 + p.length);
if (i2 == -1) i2 = document.cookie.length;
return unescape(
document.cookie.substring(i1 + p.length,i2));
}
function fixDate(date) {
let base = new Date (0);
let t = base.getTime();
if (t > 0) date.setTime(date.getTime()-t);
}
function check (m) {
if (!checked) { putMessage (1); return; }
let el = document.getElementById("cntMood"+m);
let c = parseInt(el.innerHTML);
if (!isNaN(c)) c++; else c = 0;
el.innerHTML = c;
checked = false;
}
function today () {
let date = new Date();
let day=date.getDate();
let month=date.getMonth() + 1;
let year = date.getFullYear();
return (day<10 ? '0' : '') + day + '/' +
(month<10 ? '0' : '') + month + '/' + year;
}
function putMessage (n) {
let messages = [
"Отметьте настроение дня",
"Сегодняшнее настроение уже отмечено, приходите завтра :)"
];
if (n<0 || n>messages.length-1) n = 0;
document.getElementById("msgBox").innerHTML = messages[n];
}
window.addEventListener('load', function(e) {
for (let m = 5; m >= 2; m--) {
let c = getCookie("myMood"+m);
if (c==undefined || c=='') c = '0';
let el = document.getElementById("cntMood"+m);
el.innerHTML = c;
}
let c = getCookie("myDate");
let d = today();
if (c == d) {
checked = false;
putMessage (1);
}
else putMessage (0);
});
window.addEventListener('beforeunload', function(e) {
let n, now = new Date();
fixDate(now);
now.setTime(now.getTime()+5*365*24*60*60*1000);
for (let m = 5; m >= 2; m--) {
let el = document.getElementById("cntMood"+m).innerHTML;
setCookie("myMood"+m,parseInt(el),now);
}
setCookie("myDate",today(),now);
});
}("myMood"));
</script>
<noscript>
<p>Требуется JavaScript для работы приложения!</p>
</noscript>
</body></html>
19.11.2019, 10:43 [1435 просмотров]