$({ myProp: A }) // начальное значение A
.animate(
{ myProp: B }, // целевое конечное значение B
{ // всякие опции анимации: время, функция на каждый шаг и т.п.
step: function(now, tween) { } // эта будет вызываться на каждом шаге анимации
}
);
const $price = $("#banner-message > p > span");
$("button").on("click", function(){
const oldPrice = parseInt($price.text());
const newPrice = Math.round(500 + Math.random() * 4500);
$({price:oldPrice}).animate({price:newPrice}, {
step: (now, tween) => $price.text(Math.round(tween.elem.price))
});
});
watch
это массив объектов, у каждого два свойства: HTML элемент и объект Date когда истекает срок.watch
:const Clock = {
watch: [],
add: function(el, D) {
this.watch.push({
el: el,
D : D,
});
this.tick();
},
tick: function(){
const now = new Date().getTime();
for(let i = this.watch.length - 1; i>=0; i--) {
let w = this.watch[i];
let dt = w.D.getTime() - now;
w.el.innerText = Math.round(dt / 1000);
if( dt<=0 ) {
w.el.classList.add('finished');
this.watch.splice(i,1);
}
}
},
timer: null,
init: function() {
this.timer = window.setInterval(this.tick.bind(this), 1000);
}
};
Clock.init();
Clock.add(
document.getElementById('obj1'),
new Date( new Date().getTime() + 5e3)
);
Clock.add(
document.getElementById('obj2'),
new Date( new Date().getTime() + 7e3)
);
Clock.add(
document.getElementById('obj3'),
new Date( new Date().getTime() + 3e3)
);
break;
сразу после founded = true;
и для скорости можно закэшировать текущие элементы arr[j]
и params[i]
для чуть более быстрого обращения к ним в цикле:_arr = arr[j];
// ...
_param = parametres[i];
if( _arr.p1 === _param.p1 && _arr.p2 === _param.p2) { ...
Object.assign()
работает так же, как var t1 = {};
t1.inbox = Terminal.inbox; // там массив, он по ссылке передаётся
t1.sendMail = Terminal.sendMail; // функция - тоже по ссылке, тоже будет === с t2
slice()
, чтобы получить независимую копию. var a = [1,2,3];
var b = a;
b.pop(); // a === b; a: [1,2];
// plan-b:
var a = [1,2,3];
var b = a.slice();
b.pop(); // b !== a; a: [1,2,3]; b: [1,2]
function factory(props) {
var Terminal = {
inbox: [],
sendMail: function (target, message) {
target.inbox.push({ terminal: this.name, message });
}
};
return Object.assign(Terminal, props);
}
var t1 = factory({ name: 'Jack' });
var t2 = factory({ name: 'Alice' });
сейчас + N секунд
. Это время надо сохранить в localStorage: window.localStorage.setItem('timerEnd', endDate.getTime())
var finish = parseInt( window.localStorage.getItem('timerEnd'));
if(finish && finish > (new Date()).getTime()) { // есть таймер, который надо возобновить
}
let timer = document.getElementById('timer');
let indicator = document.getElementById('indicator');
let startButton = document.getElementById('startButton');
const lsKey = 'timerEnd';
let savedTime = parseInt(window.localStorage.getItem(lsKey));
if( savedTime) {
let D = new Date();
D.setTime(savedTime);
timerStart(D);
}
startButton.addEventListener('click', function(){
let D = new Date();
D.setTime( D.getTime() + 1000 * timer.value);
timerStart(D);
});
function timerStart (finishDate) {
let LS = window.localStorage;
let D = new Date();
let seconds = Math.round((finishDate - D) / 1000);
if (seconds <= 0) {
LS.removeItem(lsKey);
return;
}
LS.setItem( lsKey, finishDate.getTime()); // запомнили в LS
indicator.textContent = seconds;
setIndicator(true);
let timerId = setInterval(() => {
let seconds = Math.round((finishDate - new Date()) / 1000);
indicator.textContent = seconds;
if (seconds <= 0) {
LS.removeItem(lsKey);
clearInterval(timerId);
setIndicator(false);
}
}, 100);
}
function setIndicator(onOff) {
if(onOff) {
indicator.className = `green`;
} else {
indicator.className = `red`;
}
}
param1
и param2
. Поэтому при их изменении ничего не меняется.var app = new Vue({
el: '#app1',
data: {
param1: 3100,
param2: 200,
},
computed: {
resultAll: function() {
var p1 = this.param1
,p2 = this.param2
;
return {
one: p1 * 2,
two: p2 * 3,
three: p1 + p2
};
}
}
});
characterData: true
).function Equipment() {
var Bag = [];
this.addTool = function(tool) {
Bag.push(tool);
console.log("Added. Bag:", Bag);
}
}
function Tools() {
this.item1 = {
name: "item1",
price: 5,
count: 10
};
this.item2 = {
name: "item2",
price: 15,
count: 20
};
this.item3 = {
name: "item3",
price: 20,
count: 30
};
this.item4 = {
name: "item4",
price: 30,
count: 40
};
this.item5 = {
name: "item5",
price: 40,
count: 50
};
}
var equipment = new Equipment();
var tools = new Tools();
equipment.addTool(tools.item1); //
;(function(){
var today = new Date().getDate()
, checkInterval = 500 // ms
;
function check() {
if((new Date).getDate() !== today) window.location.reload(true);
else setTimeout( check, checkInterval);
}
check();
})();
var content = document.querySelector(".entry-content");
var button = document.querySelector("#button");
function copyToClipboard(el) {
var range;
if (document.selection) {
range = document.body.createTextRange();
range.moveToElementText(el);
range.select().createTextRange();
} else if (window.getSelection) {
range = document.createRange();
range.selectNode(el);
window.getSelection().addRange(range);
} else return;
document.execCommand("copy");
}
button.addEventListener('click', () => copyToClipboard(content));