Как подключить или просто кодам написать следующий таймер?
Есть таймер
function timer(elem, min, sec) { (--sec < 0) && (sec = min-- ? 59 : 0); min = Math.max(min, 0); elem.innerHTML = min + " : " + sec; if (sec || min) setTimeout(timer.bind(0, elem, min, sec), 1000); else { alert('Время вышло!'); location.href = "/rekord.html"; } } timer(document.getElementById('play_timer'), 3, 0); //Время в игре function tick() { var nowTime = new Date(); console.log('прошло секунд: ' + (nowTime + timer) / 1000); А вот нашел таймер который записывает данный в локал стореч(на основе стандартных JQuery ) var interval; let minutes = 1; let currentTime = localStorage.getItem('currentTime'); let targetTime = localStorage.getItem('targetTime'); if (targetTime == null && currentTime == null) { currentTime = new Date(); targetTime = new Date(currentTime.getTime() + (minutes * 60000)); localStorage.setItem('currentTime', currentTime); localStorage.setItem('targetTime', targetTime); } else{ currentTime = new Date(currentTime); targetTime = new Date(targetTime); } if(!checkComplete()){ interval = setInterval(checkComplete, 1000); } function checkComplete() { if (currentTime > targetTime) { clearInterval(interval); alert("Time is up"); } else { currentTime = new Date(); document.write( "\n <font color=\"white\"> Seconds Remaining:" + ((targetTime - currentTime) / 1000) + "</font>"); } } document.onbeforeunload = function(){ localStorage.setItem('currentTime', currentTime); } Подскажите, как переделать, так что бы он работал без подключения просто на JS. |
Pavel_16,
:-? |
Цитата:
все продолжаю бороться с тем же ,но осталось только захватить киким-то образом время от начала загрузки страницы и поместить его в стореч. Но таймер должен отображаться для пользователя.. |
Pavel_16,
я не понимаю, что вы пишите, в чём проблема? |
Pavel_16,
if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) { tick(); let time = document.getElementById('play_timer').innerHTML; // здесь сохраняйте куда вам нужно setTimeout(() => alert('Вы всё закрасили!')); /*location.href = "/rekord.html";*/ } |
Цитата:
Цитата:
"use strict"; $(document).ready(function(){ if (localStorage.getItem("users") === null) { $.getJSON('Storage/users.json', function(users) { localStorage.setItem("users", JSON.stringify(users)); }); } var users = localStorage.getItem("users"); var $select = $('#name'); $select.ready(function(event){ $.each(JSON.parse(users), function (key, value) { $('<option>').val(value.name).text(value.name).appendTo($select); }); }); $('#play_game').click(function() { var userName = $('#new_name').val(); var newUser = {name:userName}; users = JSON.parse(users); users.push(newUser); console.log(users); localStorage.setItem("users", JSON.stringify(users)); }); }); |
Pavel_16,
надо обьединять скрипты, чтоб имя было доступно в игре ... как то так ... if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) { tick(); let time = document.getElementById('play_timer').innerHTML; newUser.time = time; localStorage.setItem("users", JSON.stringify(users)); // здесь вывод таблицы на основе обьекта users setTimeout(() => alert('Вы всё закрасили!')); /*location.href = "/rekord.html";*/ } |
Цитата:
svg.js:54 Uncaught ReferenceError: newUser is not defined at SVGPathElement.handleClick (svg.js:54) handleClick @ svg.js:54 + до это-го прошло секунд: NaN |
Цитата:
Цитата:
|
Pavel_16,
var userName и var newUser нужно сделать глобальными |
Pavel_16,
на странице(блоке) приветствия нужно сохранить только имя, на странице(блоке) игры только время, на странице(блоке) рекордов запросить данные с рекордами и после получения добавить в них имя и время , потом вывести таблицу. как - то так. |
Цитата:
$(document).ready(function(){ if (localStorage.getItem("users") === null) { $.getJSON('Storage/users.json', function(users) { localStorage.setItem("users", JSON.stringify(users)); }); } var users = localStorage.getItem("users"); var $select = $('#name'); $select.ready(function(event){ $.each(JSON.parse(users), function (key, value) { $('<option>').val(value.name).text(value.name).appendTo($select); }); }); $('#play_game').click(function() { var userName = $('#new_name').val(); var newUser = {name:userName}; users = JSON.parse(users); users.push(newUser); console.log(users); localStorage.setItem("users", JSON.stringify(users)); }); }); |
Цитата:
const save = { elem: this, color: this.getAttribute("fill") }; stateStack.push(save); this.setAttribute("fill", currentColor.dataset.color); if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) { tick(); let time = document.getElementById('play_timer').innerHTML; newUser.time = time; localStorage.setItem("users", JSON.stringify(users)); setTimeout(() => alert('Вы всё закрасили!')); *location.href = "/rekord.html"; } |
Pavel_16,
приветствие let userName = document.getElementById('new_name').value; localStorage.setItem("userName", userName) игра let time = document.getElementById('play_timer').innerHTML; ; localStorage.setItem("time ", time) рекорды if (localStorage.getItem("users") === null) { $.getJSON('Storage/users.json', function(users) { localStorage.setItem("users", JSON.stringify(users)); }); } let users = localStorage.getItem("users"); let userName = localStorage.getItem("userName"); let time = localStorage.getItem("userName"); users.push({userName, time}); |
Цитата:
===null - не совсем, на пустую строку еще И мне нужно хранить массив имен нужно добавить еще наверное: Каррент-юзер тогда для нового юзера, и ещё раз - объект имя+время {name:name, time:time} ????? как думаешь? |
Pavel_16,
для начала можно так рекорды if (localStorage.getItem("users") === null) { localStorage.setItem("users", JSON.stringify([])); } let users = JSON.parse(localStorage.getItem("users")); let userName = localStorage.getItem("userName"); let time = localStorage.getItem("time") users.push({userName, time}); localStorage.setItem("users", JSON.stringify(users)); for (const item of users) console.log(item); |
[quote=рони;522296]Pavel_16,
для начала можно так а чего для начала???:) |
Pavel_16,
для отработки игры без сервера, к вашему получению данных с сервера есть вопросы, вы не учитываите время ответа сервера. |
Цитата:
:agree: а сервер, то.....:blink: |
Цитата:
ПОЛУЧАЕТСЯ ТАК: $(document).ready(function () { if (localStorage.getItem("users") === null) { localStorage.setItem("users", JSON.stringify([])); } let users = JSON.parse(localStorage.getItem("users")); let userName = localStorage.getItem("userName"); let time = localStorage.getItem("time") users.push({ userName, time }); localStorage.setItem("users", JSON.stringify(users)); for (const item of users) console.log(item); var $select = $('#name'); $select.ready(function (event) { $.each(JSON.parse(users), function (key, value) { $('<option>').val(value.name).text(value.name).appendTo($select); }); }); $('#play_game').click(function () { var userName = $('#new_name').val(); var newUser = { name: userName }; users = JSON.parse(users); users.push(newUser); console.log(users); localStorage.setItem("users", JSON.stringify(users)); }); }); :write: Только куда прикрутить вот это не понял:?! let userName = document.getElementById('new_name').value; localStorage.setItem("userName", userName) а наверное с 22- |
Цитата:
{ userName: null, time: null } jQuery.Deferred exception: Unexpected token o in JSON at position 1 SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at HTMLDocument.<anonymous> ([url]https://fd2projectcoloring--pavelmishyn.repl.co/userHandler.js:18:17[/url]) at mightThrow ([url]https://fe.it-academy.by/JQ/jquery.js:3570:29[/url]) at process ([url]https://fe.it-academy.by/JQ/jquery.js:3638:12[/url]) undefined Script error. |
Pavel_16,
страница приветствия. <!DOCTYPE html> <html> <head> <title>страница приветствия</title> <meta charset="utf-8"> <script> document.addEventListener("DOMContentLoaded", function() { let user = localStorage.getItem("userName"); let title = user ? `Привет ${user}!` : `Введите своё имя.`; let h1 = document.querySelector("h1"); h1.textContent = title; let newname = document.querySelector("[name='newname']"); newname.hidden = !user; let username = document.querySelector("[name='username']"); username.hidden = user; user && (username.value = user); let form = document.querySelector("form"); form.addEventListener("click", event => { let {target} = event; let txt = username.value.trim(); if (target == newname) { localStorage.removeItem('userName'); form.action = "" } else if (txt) { localStorage.setItem("userName", txt); form.action = "https://javascript.ru/forum/"//переход на страницу игры } else event.preventDefault() }) }); </script> </head> <body> <h1></h1> <form action="http://" > <input name="username" hidden="hidden" required="required"> <input name="newname" type="submit" value="Новый игрок" hidden="hidden"> <input name="next" type="submit" value="Далее"> </form> </body> </html> |
спасибо!
|
Рони - что-то не так пошло!!,,,,,???:(
По итогу: приветствие document.addEventListener("DOMContentLoaded", function () { let user = localStorage.getItem("userName"); let title = user ? `Привет ${user}!` : `Введите своё имя.`; let h1 = document.querySelector("h1"); h1.textContent = title; let newname = document.querySelector("[name='newname']"); newname.hidden = !user; let username = document.querySelector("[name='username']"); username.hidden = user; user && (username.value = user); let form = document.querySelector("form"); form.addEventListener("click", event => { let { target } = event; let txt = username.value.trim(); if (target == newname) { localStorage.removeItem('userName'); form.action = "" } else if (txt) { localStorage.setItem("userName", txt); form.action = 'play.html'//переход на страницу игры } else event.preventDefault() }) }); игра -тут проблема вылетили карандаши...... "use strict"; //Работа с цветам const colors = [ { color: '#ff0000', image: 'Pic/pencil_red.png' }, { color: '#ffa500', image: 'Pic/pencil_orange.png' }, { color: '#ffff00', image: 'Pic/pencil_yellow.png' }, { color: '#008000', image: 'Pic/pencil_green.png' }, { color: '#0000ff', image: 'Pic/pencil_blue.png' }, { color: '#00008b', image: 'Pic/pencil_dark_blue.png' }, { color: '#800080', image: 'Pic/pencil_purple.png' }, ]; function renderColorPalette() { const paletteContainer = document.querySelector(".palette"); const colorsItems = colors .map(n => ` <button style="background-image: url(${n.image})" class="palette-button" data-color="${n.color}" ></button>`) .join(''); paletteContainer.innerHTML = colorsItems; } function handleClickOnColor(event) { const button = event.target.closest(".palette-button"); if (!button) return; const oldActiveButton = document.querySelector(".palette-button-active"); if (oldActiveButton) { oldActiveButton.classList.remove("palette-button-active"); } button.classList.add("palette-button-active"); } function setEventsOnFilledElements() { function handleMouseEnter() { this.classList.add("selected"); } function handleMouseLeave() { this.classList.remove("selected"); } const elements = document.querySelectorAll("*[fill]"); function handleClick() { const currentColor = document.querySelector(".palette-button-active"); if (!currentColor) { alert("Цвет не выбран"); return; } const save = { elem: this, color: this.getAttribute("fill") }; stateStack.push(save); this.setAttribute("fill", currentColor.dataset.color); if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) { tick(); let time = document.getElementById('play_timer').innerHTML; localStorage.setItem("time ", time); setTimeout(() => alert('Вы всё закрасили!')); * location.href = "/rekord.html"; } } elements.forEach(element => { element.addEventListener("mouseenter", handleMouseEnter); element.addEventListener("mouseleave", handleMouseLeave); element.addEventListener("click", handleClick); }); } document.addEventListener("DOMContentLoaded", renderColorPalette); document.addEventListener("click", handleClickOnColor); document.addEventListener("DOMContentLoaded", setEventsOnFilledElements); function check() { const { length } = [...document.querySelectorAll("*[fill]")].filter(ep => ep.getAttribute('fill') == '#ffffff'); const txt = length ? `Ещё ${length} фигур не закрашено` : 'Вы всё закрасили!' alert(txt) } const stateStack = [] function rev() { if (stateStack.length) { const { elem, color } = stateStack.pop(); elem.setAttribute("fill", color) } } есть еще вот это "use strict"; $(document).ready(function () { if (localStorage.getItem("users") === null) { localStorage.setItem("users", JSON.stringify([])); } let users = JSON.parse(localStorage.getItem("users")); let userName = localStorage.getItem("userName"); let time = localStorage.getItem("time") users.push({ userName, time }); localStorage.setItem("users", JSON.stringify(users)); for (const item of users) console.log(item); var $select = $('#name'); $select.ready(function (event) { $.each(JSON.parse(users), function (key, value) { $('<option>').val(value.name).text(value.name).appendTo($select); }); }); $('#play_game').click(function () { let userName = document.getElementById('new_name').value; localStorage.setItem("userName", userName) users = JSON.parse(users); users.push(newUser); console.log(users); localStorage.setItem("users", JSON.stringify(users)); }); }); Рони, я тебе что-бы проще было, в личку полностью файл(ссылку), если не против, там картинки и лого, не могу сдесь выложить:agree: Прошу прощения форумчане. |
form.addEventListener("click", event => { let { target } = event; let txt = username.value.trim(); if (target == newname) { localStorage.removeItem('userName'); form.action = "" } else if (txt) { localStorage.setItem("userName", txt); form.action = 'play.html'//переход на страницу игры } else event.preventDefault() }) }); Вот здесь проблема - нужно что-бы перерисовывало страницу, а оно выкидывает на главную... |
Pavel_16,
заменить на event.preventDefault(); window.location.reload(); |
Pavel_16,
пример выделения кода *!* строка или строки кода */!* form.addEventListener("click", event => { let { target } = event; let txt = username.value.trim(); if (target == newname) { localStorage.removeItem('userName'); *!* event.preventDefault(); window.location.reload(); */!* } else if (txt) { localStorage.setItem("userName", txt); form.action = 'play.html'//переход на страницу игры } else event.preventDefault() }) }); |
Цитата:
Может в DOM не правильно сделано? <h1></h1> <form action="play.html" > <input name="username" hidden="hidden" required="required" pattern="^[a-zA-Z]+$" placeholder="Имя на латинице!"> <input name="newname" type="submit" value="Новый игрок" hidden="hidden" placeholder="Имя на латинице!" pattern="^[a-zA-Z]+$"> <input name="next" type="submit" value="Продолжить"> </form> |
Pavel_16,
if (target == newname) { event.preventDefault(); localStorage.removeItem('userName'); h1.textContent = `Введите своё имя.`; newname.hidden = true; username.value = ""; username.hidden = false; } |
Цитата:
|
Цитата:
у меня время постоянно null? а нужно что бы ложило сколько прошло со старта(начала отсчета таймера) |
вот сейчас весь код по JS
отдельно модалка на приветствие: "use strict"; document.addEventListener("DOMContentLoaded", function () { let user = localStorage.getItem("userName"); let title = user ? `Привет ${user}!` : `Введите своё имя.`; let h1 = document.querySelector("h1"); h1.textContent = title; let newname = document.querySelector("[name='newname']"); newname.hidden = !user; let username = document.querySelector("[name='username']"); username.hidden = user; user && (username.value = user); let form = document.querySelector("form"); form.addEventListener("click", event => { let { target } = event; let txt = username.value.trim(); if (target == newname) { event.preventDefault(); localStorage.removeItem('userName'); h1.textContent = `Введите или выберете из списка:`; newname.hidden = true; username.value = ""; username.hidden = false; } }) }); отдельно работа с рисунком "use strict"; //Работа с цветам const colors = [ { color: '#ff0000', image: 'Pic/pencil_red.png' }, { color: '#ffa500', image: 'Pic/pencil_orange.png' }, { color: '#ffff00', image: 'Pic/pencil_yellow.png' }, { color: '#008000', image: 'Pic/pencil_green.png' }, { color: '#0000ff', image: 'Pic/pencil_blue.png' }, { color: '#00008b', image: 'Pic/pencil_dark_blue.png' }, { color: '#800080', image: 'Pic/pencil_purple.png' }, ]; function renderColorPalette() { const paletteContainer = document.querySelector(".palette"); const colorsItems = colors .map(n => ` <button style="background-image: url(${n.image})" class="palette-button" data-color="${n.color}" ></button>`) .join(''); paletteContainer.innerHTML = colorsItems; } function handleClickOnColor(event) { const button = event.target.closest(".palette-button"); if (!button) return; const oldActiveButton = document.querySelector(".palette-button-active"); if (oldActiveButton) { oldActiveButton.classList.remove("palette-button-active"); } button.classList.add("palette-button-active"); } function setEventsOnFilledElements() { function handleMouseEnter() { this.classList.add("selected"); } function handleMouseLeave() { this.classList.remove("selected"); } const elements = document.querySelectorAll("*[fill]"); function handleClick() { const currentColor = document.querySelector(".palette-button-active"); if (!currentColor) { alert("Цвет не выбран"); return; } const save = { elem: this, color: this.getAttribute("fill") }; stateStack.push(save); this.setAttribute("fill", currentColor.dataset.color); if ([...elements].every(ep => ep.getAttribute('fill') != '#ffffff')) { tick(); let time = document.getElementById('play_timer').innerHTML; localStorage.setItem("time ", time); setTimeout(() => alert('Вы всё закрасили!')); location.href = "/rekord.html"; } } elements.forEach(element => { element.addEventListener("mouseenter", handleMouseEnter); element.addEventListener("mouseleave", handleMouseLeave); element.addEventListener("click", handleClick); }); } document.addEventListener("DOMContentLoaded", renderColorPalette); document.addEventListener("click", handleClickOnColor); document.addEventListener("DOMContentLoaded", setEventsOnFilledElements); function check() { const { length } = [...document.querySelectorAll("*[fill]")].filter(ep => ep.getAttribute('fill') == '#ffffff'); const txt = length ? `Ещё ${length} фигур не закрашено` : 'Вы всё закрасили!' alert(txt) } const stateStack = [] function rev() { if (stateStack.length) { const { elem, color } = stateStack.pop(); elem.setAttribute("fill", color) } } отдельно таймер "use strict"; /*таймер игры*/ function timer(elem, min, sec) { (--sec < 0) && (sec = min-- ? 59 : 0); min = Math.max(min, 0); elem.innerHTML = min + " : " + sec; if (sec || min) setTimeout(timer.bind(0, elem, min, sec), 1000); else { alert('Время вышло!'); location.href = "/rekord.html"; } } timer(document.getElementById('play_timer'), 3, 0); //Время в игре function tick() { var nowTime = new Date(); console.log('прошло секунд: ' + (nowTime + timer) / 1000); } отдельно работа с пользователем "use strict"; $(document).ready(function () { if (localStorage.getItem("users") === null) { localStorage.setItem("users", JSON.stringify([])); } let users = JSON.parse(localStorage.getItem("users")); let userName = localStorage.getItem("userName"); let time = localStorage.getItem("time") users.push({userName, time}); localStorage.setItem("users", JSON.stringify(users)); for (const item of users) console.log(item); var $select = $('#name'); $select.ready(function (event) { $.each(JSON.parse(users), function (key, value) { $('<option>').val(value.name).text(value.name).appendTo($select); }); }); $('#play_game').click(function () { let userName = document.getElementById('new_name').value; localStorage.setItem("userName", userName) users = JSON.parse(users); users.push(newUser); console.log(users); localStorage.setItem("users", JSON.stringify(users)); }); }); Где-то ошибка в последнем коде, т.к. после того как закрасил, выдаёт null на время и ссылается на этот .js |
Pavel_16,
строка 54 пробел в ключе уберите localStorage.setItem("time ", time); |
Pavel_16,
на всякий случай $select.ready это бред. |
Цитата:
но теперь вот что - где наш юзер исчез, И время можно как то -захватить которое прошло, а не осталось!? {userName: null, time: "2 : 34"} |
Цитата:
|
почему то перестало имя передаваться- после изменения формы или нет? нужно поковыряться....
|
Pavel_16,
страница рекордов <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> table{ border: 1px solid #000000; border-collapse: collapse; } td{ border: 1px solid #000000; } </style> <script> document.addEventListener( "DOMContentLoaded" , function() { if (localStorage.getItem("users") === null) { localStorage.setItem("users", JSON.stringify([])); } let users = JSON.parse(localStorage.getItem("users")); let userName = localStorage.getItem("userName"); let time = localStorage.getItem("time"); if(time) { users.push({userName, time}); localStorage.setItem("users", JSON.stringify(users)); localStorage.removeItem('time'); } let html = '' for (const {userName, time} of users) html += `<tr> <td>${userName}</td> <td>${time}</td> </tr>`; document.querySelector('table tbody').innerHTML = html; }); </script> </head> <body> <table> <thead><tr> <td>имя</td> <td>время</td> </tr> </thead> <tbody></tbody> </table> </body> </html> |
рони, что-то null ? вместо имени пользователя все равно передаёт!, а можно сделать так, что бы сортировало от меньшего кол-ва времени к большему?
|
Цитата:
|
Часовой пояс GMT +3, время: 14:03. |