Как подключить или просто кодам написать следующий таймер?
Есть таймер
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, время: 05:34. |