#javascript
#javascript
Вопрос:
У меня проблема. Я хочу создать счетчик, который считает от 1 до 9 и повторяется. Время между подсчетами должно быть переменным (от 1 до 10 секунд в одной и той же серии). Иногда он должен добавлять 1, иногда 2 (поэтому иногда пропускайте одно число).
Возможно ли это с помощью javascript?
Заранее благодарю вас.
Это код, который у меня есть, но он только подсчитывает, иногда не пропускает число, а время подсчета фиксировано на уровне 500 мс.
<div id="value">1</div>
<script>
function animateValue(id){
var obj = document.getElementById(id);
var current = obj.innerHTML;
setInterval(function(){
obj.innerHTML = current ;
},500);
}
animateValue('value');
</script>
</html>````
Комментарии:
1. Да, все это возможно. Используйте
setTimeout
и генерируйте различные подсчеты в зависимости от ваших требований. Не уверен, какая логика используется для определения того, когда пропускать / добавлять 1 против 2, но вместо этогоcurrent
вы могли бы сделатьobj.innerHTML = current count
, чтобы количество было равно 1 или 2 или любому другому числу.2. Как мне изменить 500 мс с помощью setTimeout? Спасибо.
3. Привет @Kargui, я добавил ответ, который объясняет использование setTimeout. Чтобы изменить 500 мс, вам нужно рекурсивно вызвать функцию, которая вызывает
setTimeout
. Функция, вызывающая setTimeout, будет отвечать за генерацию вашего значения таймера.
Ответ №1:
Во-первых, JSFiddle:http://jsfiddle.net/5k0xsrj6/embedded/result /
JSFiddle с увеличенным, стилизованным текстом:https://jsfiddle.net/9f4vgLbx/embedded/result
Редактировать: Я вижу, вы не знакомы с JavaScript. Я также включил JavaScript, отличный от ES6.
Самая большая проблема, с которой вы столкнетесь в своем коде, — это использование setInterval
, поскольку вам нужен переменный таймер.
Вместо setInterval
рассмотрим функцию, которая вызывает саму себя и устанавливает таймер. Как только setTimeout
будет вызван, он снова вызовет функцию, чтобы установить другой тайм-аут, эффективно создавая интервал.
Скрипт, отличный от ES6:
var el = document.body;
var max_count = 9;
var current_count = 1;
// Function which sets our timer
function timer(delay) {
// Set a timeout with our passed `delay` arg
setTimeout(function () {
// Adds either 1 or 2 based on the return value of getIteration
current_count = getIteration();
// As we have a max, reset to 1 if we're over
if (current_count > max_count) {
current_count = 1;
}
// Update innerHTML
writer();
// Call next iteration
loop();
}, delay);
}
// Writes our innerHTML
function writer() {
el.innerHTML = current_count;
}
// Returns 1000 through 10000
function getDelay() {
return Math.ceil(Math.random() * 10) * 1000;
}
// Returns either 1 or 2
function getIteration() {
return Math.ceil(Math.random() * 2);
}
// Our main function to loop
function loop() {
// getDelay will return a value between 1000 - 10000
timer(getDelay());
}
// Sets Initial Value
writer();
// Main
loop();
Оригинал:
Вот пример кода на JSFiddle. Я включил комментарии, чтобы, надеюсь, объяснить логику.
{
const el = document.body;
const max_count = 9;
let current_count = 1;
// Function which sets our timer
const timer = delay => {
setTimeout(() => {
current_count = getIteration();
if (current_count > max_count) {
current_count = 1;
}
// Update innerHTML
writer();
// Call next iteration
main();
}, delay);
}
// Writes our innerHTML
const writer = (str, log) => {
if (log) {
console.log(str);
} else {
el.innerHTML = `Current count: ${current_count}`;
}
}
// Returns 1000 through 10000
const getDelay = () => {
return Math.ceil(Math.random() * 10) * 1000;
}
// Returns either 1 or 2
const getIteration = () => {
return Math.ceil(Math.random() * 2);
}
// Our main function to loop
const main = () => {
const delay = getDelay();
writer(`Next delay is ${delay}ms`, true);
timer(delay);
}
// Set Initial Value
writer();
// Main
main();
}
Надеюсь, это поможет! Если у вас есть какие-либо вопросы, не стесняйтесь задавать!
Комментарии:
1. Приятно, большое вам спасибо, это то, чем это должно было быть. Я ценю это! Последний вопрос: могу ли я изменить размер шрифта в выходных данных? Спасибо
2. @Kargui — Абсолютно. Я использую
document.body
непосредственно для ввода нашего контента, но вы можете легко запросить другой элемент и использовать CSS для оформления выходных данных. Вот JSFiddle с примером этого: jsfiddle.net/9f4vgLbx (или встроенная версия: jsfiddle.net/9f4vgLbx/embedded/result )3. Я рад, что это сработало. Я поддерживаю его и удаляю свой ответ, который теперь в лучшем случае избыточен.