06.06.2020, 15:20
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
Анимация цифр
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tsifry{
display: inline-block;
width: 100px;
height: 40px;
margin: 10px 10px 10px 10px;
border-bottom: 1px solid #000;
text-align: center;
}
.skidka{
display: inline-block;
width: 200px;
height: 20px;
padding: 20px 20px 20px 20px;
border: 10px solid #4E82BE;
text-align: center;
cursor: pointer;
}
.skidka:hover{
border: 10px solid #132E5A;
}
.tekst{
display: inline-block;
width: 100px;
height: 20px;
text-align: center;
margin: 20px 0px 20px 0px;
}
</style>
</head>
<body>
<div class="tsifry">900</div>
<div class="skidka">Получить скидку?</div>
<script>
let tsifry = document.querySelector(".tsifry");
const skidka = document.querySelector(".skidka");
let tekst = document.querySelector(".tekst");
let odinraz = false;
function skidkaFun(){
if(!odinraz){
let y = tsifry.innerHTML;
let x = y / 100 * 10;
let z = y - x;
console.log(y);
console.log(x);
tsifry.innerHTML = z;
odinraz = true;
}
}
skidka.addEventListener("click", skidkaFun);
</script>
</body>
</html>
Не могу сообразить как сделать так что бы показывалась смена цифр. При нажатие цифры убавлялись до нужного значение.
|
|
06.06.2020, 16:31
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Последний раз редактировалось рони, 06.06.2020 в 17:34.
|
|
07.06.2020, 11:48
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
function timer(b) {
return {
play: function() {
var d = performance.now();
c = !0;
requestAnimationFrame(function e(a) {
a = (a - d) / b.duration;
1 <= a && (a = 1, b.callback && b.callback());
b.elem.innerHTML = b.from + (b.to - b.from) * a | 0;
1 > a && requestAnimationFrame(e)
})
}
}
};
var span = document.querySelector('.time'),
but = document.querySelector('#go'),
anim = timer({
from : 3,
to : 0,
duration: 2 * 1000,
elem : span,
callback : function() { this.elem.classList.add('test')}
});
but.addEventListener('mousedown', anim.play);
пробую разобраться
функция с именем timer с параметром b
что она делает
почему то сразу возращает, далее пишет что
play: это что? название функции если да то почему она в начале
переменная? то что за :
Что она делает
создает переменную которая возращает временную метку
и переменная которая не ровна нулю
requestAnimationFrame это для окна?
функция названа e и есть параметр a
в ней действия
а будет ровна ... и все дальше поплыл ... |
|
07.06.2020, 16:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
анимация чисел js
Сергей Ракипов,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tsifry{
display: inline-block;
width: 100px;
height: 40px;
margin: 10px 10px 10px 10px;
border-bottom: 1px solid #000;
text-align: center;
}
.skidka{
display: inline-block;
width: 200px;
height: 20px;
padding: 20px 20px 20px 20px;
border: 10px solid #4E82BE;
text-align: center;
cursor: pointer;
}
.skidka:hover{
border: 10px solid #132E5A;
}
.tekst{
display: inline-block;
width: 100px;
height: 20px;
text-align: center;
margin: 20px 0px 20px 0px;
}
</style>
</head>
<body>
<div class="tsifry">900</div>
<div class="skidka">Получить скидку?</div>
<script>
const animateNum = (elem, duration) => (from, to) => {
const beginTime = performance.now();
const animate = currentTime => {
let delta = (currentTime - beginTime) / duration;
delta = Math.min(1, delta);
let num = (from + (to - from) * delta) | 0;
elem.textContent = num;
delta == 1 || requestAnimationFrame(animate)
};
requestAnimationFrame(animate)
};
let tsifry = document.querySelector(".tsifry");
const skidka = document.querySelector(".skidka");
let tekst = document.querySelector(".tekst");
const duration = 1200;
const showNum = animateNum(tsifry, duration);
function skidkaFun(){
let y = +tsifry.innerHTML;
let x = y / 100 * 10;
let z = y - x;
showNum(y, z)
}
skidka.addEventListener("click", skidkaFun, {once : true});
</script>
</body>
</html>
|
|
09.06.2020, 12:21
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
рони,
Все сработало, не уверен что получу объяснение как это скрипт работает, но можно хотя бы ссылки на русском языке что бы у меня была возможность разобраться
|
|
09.06.2020, 13:24
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
рони,
Спасибо по изучаю!
|
|
10.06.2020, 06:05
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
рони,
Вроде понятнее, думаю со временем разберусь
|
|
10.06.2020, 09:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сергей Ракипов,
алгоритм анимации, есть путь любой величины, это всегда 100% или 1, есть время любой величины, это всегда 100% или 1.
условно исходная точка 3 километр, начало в 11 : 00, план похода: 5 километров за 1 час.
прошло время... сейчас 11 : 20, вопрос где мы сейчас? 11 : 20 минус 11 : 00 = 20 минут. 60 минут это 100%, 20 минут это 33%.
5 километров это 100%, 33% это 5 * .33 = 1.65км.
3 + 1.65 = 4.65 км.
каждый момент времени, вычисляется процент времени который прошёл, и согласно этому проценту, к начальной величине добавляется согласно этим процентам, запланированное изменение.
3 + 1.65 = 4.65 км.
3 + 3.3 = 6.3 км.
3 + 5 = 8 км.
если величина прошедшего времени, превысила 100% , проценты выравниваются до 100%, происходит последнее изменение, и функция останавливается.
|
|
11.06.2020, 04:56
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
рони,
Спасибо хорошее объяснение. И я вчера попробовал по делать скрипты с использованием requestAnimationFram Простенькие получилось, думаю со временем дойду и до вариантов по сложнее.
|
|
|
|
