input.selectionStartinput.setSelectionRange(startPos,endPos) // Обе позиции должны быть одинаковыми, например (1,1)var inputNumbers = prompt("Введіть числа(довільна кількість)", ""); // получили строку чисел. Предположительно разделённых пробелом.
var numbers = inputNumbers.split(" "); // Получили массив чисел в виде строк.
var summ = numbers.reduce(function(summ, item){return summ += parseInt(item)}, 0) // используем метод массивов reduce внутри которого преобразуем каждое строковое число в number и складываем.
var result = summ / numbers.length // делим сумму на количество
alert(result)const ta = document.querySelector(...) // textarea
const counter = document.querySelector(...) // счётчик
ta.addEventListener('input', onInput)
funcion onInput(evt) {
const length = evt.target.value.length
counter.textContent = length
}<div style="width: 100%; background-color: #fff;">
<button style="width: 100%;height: 50px;">
Зарегистрироваться
<div style="background-size: 20px 20px;background-repeat: no-repeat; background-position: right 0 center;background-image: url(https://img2.freepng.ru/20180325/qaw/kisspng-email-computer-icons-clip-art-coin-5ab83d2671f511.2388637315220237184668.jpg);"></div>
</button>
</div>const v = $0 // или вместо $0 document.querySelector... - получить элемент video
let startTime = 15 // 15ая секунда видео - секунда, с которой будет начинаться цикл
let duration = 1000 // 1000 миллисекунд = 1 секунда - продолжительность цикла
const repeat = setInterval(function () {
v.currentTime = startTime
}, duration)// helper functions
function linearInterpolate (from_range, to_range, val) {
var minX = from_range[0],
minY = to_range[0],
rangeX = from_range[1] - from_range[0],
rangeY = to_range[1] - to_range[0];
return (val - minX) * rangeY / rangeX + minY;
}
function clamp (x, min, max) {
if (x < min) {
return min;
}
if (x > max) {
return max;
}
return x;
}
// constructor
function Gauge (elem, options) {
var gaugeVal = elem.dataset.value
var options = options || {},
canvas = document.createElement('canvas'),
value = options.value || 0;
this.options = options;
this.ctx = canvas.getContext("2d");
this.width = options.width || 100;
this.height = options.height || this.width;
// readjust lineWidth based on radius
if (options.radius) {
this.lineWidth = (this.width / 2 - options.radius);
} else {
this.lineWidth = options.lineWidth || 4;
}
this.radius = (this.width - this.lineWidth) / 2;
//set colors for chart
if (gaugeVal < 50) {
this.color = options.color || 'rgba(224, 99, 100, 1)';
} else {
this.color = options.color || 'rgba(43, 197, 132, 1)'
};
this.background = options.background || 'rgba(241, 244, 249, 1)';
this.range = [0, 100];
this.interpolate = linearInterpolate.bind(this, this.range, [Math.PI, 2*Math.PI]);
canvas.width = this.width;
canvas.height = this.height / 2;
this.set( value );
elem.appendChild( canvas );
}
// get/set methods
Gauge.prototype.get = function () {
return this.value || 0;
};
Gauge.prototype.set = function (value) {
var ctx = this.ctx,
range = this.range,
value = clamp(value, range[0], range[1]),
drawArc = function () {
ctx.beginPath();
ctx.arc.apply(ctx, arguments);
ctx.stroke();
// bind all arguments except the end value
}.bind(this, this.width / 2, this.height / 2,
this.radius,
Math.PI);
this.value = value;
ctx.clearRect(0,0,this.width,this.height / 2);
ctx.lineWidth = this.lineWidth;
// background
ctx.strokeStyle = this.background;
drawArc( 2 * Math.PI );
// foreground
ctx.strokeStyle = this.color;
drawArc( this.interpolate( value ) );
// optional display value
if (this.options.displayvalue &&
this.options.displayvalue !== 'false') {
ctx.font = "bold " + this.lineWidth + "px Russia, Arial, sans-serif";
if (gaugeVal < 50){
ctx.fillStyle = "rgba(43, 197, 132, 1)";
} else {
ctx.fillStyle = 'rgba(224, 99, 100, 1)';
}
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.fillText(value, this.width / 2, 0);
}
};
// create instances/handlers
var gauges = document.querySelectorAll('.gauge');
var gaugeHtml = document.querySelectorAll('.gauge__value');
gaugeHtml.forEach(function(gaugeValue){
const value = Number(gaugeValue.parentElement.dataset.value)
gaugeValue.style.color = value > 50 ? 'rgba(43, 197, 132, 1)' : 'rgba(224, 99, 100, 1)';
})
// Инициализация
gauges.forEach(function(gauge){
let gaugeVal = gauge.dataset.value;
const gaugeValueElement = gauge.querySelector('.gauge__value')
gaugeValueElement.textContent = gaugeVal;
new Gauge(gauge, gauge.dataset)
})var options = {
root: null, // Не указываем = следим за областью вьюпорта.
rootMargin: '0px', // отступы вокруг root
threshold: 1.0
}
var callback = function(entries, observer) {
// Открываем модалку
};
var observer = new IntersectionObserver(callback, options);
/* Параметр threshold со значением 1.0 означает что функция будет вызвана при 100% пересечении объекта (за которым мы следим) с объектом root */
var target = document.querySelector('#popup'); // элемент, за которым будем следить.
observer.observe(target);:target htmlbook.ru/css/target, либо через js брать назначение ссылки, искать этот элемент по id и так же навешивать анимацию.:target, то есть если нужно подсветить цель ссылки:#one {
color: blue;
background-color: transparent;
}
#one:target {
// и другие параметры анимации - направление, длительность, задержка и тд.
// в соответствии с css keyframes анимациями https://webref.ru/css/keyframes
animation: blur 10s ease-in-out ... ;
}
@keyframes blur {
// другие ключевые кадры
50% {
color: red;
background-color: yellow;
}
}<div class="card__wrapper">
<div class="card__wrapper_api-show">Бургер</div>
<div class="card__wrapper_api">Скрытый див</div>
</div>
<div class="card__wrapper">
<div class="card__wrapper_api-show">Бургер</div>
<div class="card__wrapper_api">Скрытый див</div>
</div>
<div class="card__wrapper">
<div class="card__wrapper_api-show">Бургер</div>
<div class="card__wrapper_api">Скрытый див</div>
</div>$(".card__wrapper_api-show").click(function() {
$(this) // jquery элемент, на котором произошёл клик
.next(".card__wrapper_api") // непосредственно следующий в разметке блок (если идут не друг за другом то можно применить nextAll
.stop() // Ваш код.
.animate(
{
right: "0"
},
500,
function() {
// Animation complete.
}
);
});<div class="cards">
<div class="card__wrapper">
<div class="card__wrapper_api-show">Бургер</div>
<div class="card__wrapper_api">Скрытый див</div>
</div>
<div class="card__wrapper">
<div class="card__wrapper_api-show">Бургер</div>
<div class="card__wrapper_api">Скрытый див</div>
</div>
<div class="card__wrapper">
<div class="card__wrapper_api-show">Бургер</div>
<div class="card__wrapper_api">Скрытый див</div>
</div>
</div>$(".cards").click(function(evt) {
// Сохраняем элемент, на котором произошёл клик в jQuery обёртку
const $element = $(evt.target);
// проверяем, что элемент содержит класс api-show
// и если содержит, то делаем что нам надо со следующим в разметке элементом .card__wrapper_api
if($element.hasClass('.card__wrapper_api-show')){
$element
.next(".card__wrapper_api")
.stop()
.animate(
{
right: "0"
},
500,
function() {
// Animation complete.
}
);
}
});A instanceof B, Вы как бы спрашиваете: является ли А экземпляром класса B?new F() instanceof F - false;new F() instanceof Function - true;
var playerInfo = document.querySelector('.win').textContent.trim(); // AZE KING, 47 уровень
var playerName = playerInfo.slice(0, playerInfo.indexOf(',')) // AZE KING;
var url = "site.com/add.php?name=" + playerName;
var req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);// И сделать это массивом. Удобно, если дальше нужно так же что-то делать с уровнем или будут ещё другие параметры игрока через запятую.
var playerInfo = document.querySelector('.win').textContent.trim().split(','); // ['AZE KING', '47 уровень']
var playerName = playerInfo[0] // AZE KING;
var url = "site.com/add.php?name=" + playerName;
var req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);$('.list-container').on('click', '.list', listClickHandler);
function listClickHandler(){
$(this).next('.lvl2').slideToggle(); // this - элемент, на котором произошёл клик. Соответственно $(this) - его jQuery версия
}