<template lang="pug">
.order-status-wrap
svg.order-status(viewBox="0 0 166 166")
circle(cx="83" cy="83" r="78" fill="none" stroke="#3a3a3f" stroke-width="10")
circle(cx="83" cy="83" r="73" fill="none" stroke="#4dc54f" v-bind:stroke-dasharray="dash+' '+gap" stroke-dashoffset="" stroke-width="5" transform="rotate(-90 83 83)")
.order-status-text
.order-status-label Заказ выполнен на
.order-status-percent {{orderPercent}} %
</template>
<script>
export default {
data() {
return {
orderSteps: 7, // кол-во шагов оформления заказа
orderStepsComplete: 2, // кол-во пройденных шагов
circleRadius: 73, // радиус окружности
}
},
computed: {
orderPercent () { // процент выполнения заказа
return Math.round(this.orderStepsComplete/(this.orderSteps/100))
},
circleLength () { // длина окружности
return this.circleRadius*2*Math.PI;
},
dash () { // черта
return this.circleLength/100*this.orderPercent;
},
gap () { // пробел
return this.circleLength-this.dash;
},
},
}
</script>var a;
function getRandomInRange(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randomA() { //
a = getRandomInRange(6, 9);
$('#a').text(a); // вывод а
}
function chek(x, y) { // x - id инпута, y - переменная
var value = $(x).val();
if (value != y) {
$(x).addClass("green");
}
else {
$(x).removeClass("green");
$(x).animate({width: 'toggle'}, 500);
}
}
$('#input').change(function(){
chek(this, a)
})
$('#gen').on("click", function() {
$('input:text').val('');
$('#input').fadeIn(0);
randomA();
});
$(document).ready(function(){
$('input:text').val('');
randomA();
});<video class="video" poster="poster.jpg" preload>
<source src="video.mp4">
</video>document.addEventListener("DOMContentLoaded", function(){ // аля $(document).ready
let videos = document.getElementsByClassName('video'); // получаем все видосы с класосм
videos = [].slice.call(videos); // преобразуем в массив
videos.forEach(function(item) { // перебираем массив и навешиваем обработчики
let media = item;
media.onclick = function () {
media.play(); // запускаем проигрывание
media.controls = true; // добавляем контролы
};
media.addEventListener('ended', function() {
media.controls = false; // видео просмотрено, убираем контролы
});
});
});$('form').on('submit', function(event) {
event.preventDefault(); // вырубаем событие(данные не отправятся)
var form = this;
console.log('делаем валидацию полей');
console.log('или вешаем таймаут');
console.log('или показываем что-то пользователю');
console.log('или делаем все что угодно');
form.submit(); // и потом отправляем данные
});if ($(window).width() < 769) {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 1) $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
else $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
});
} else {
//do another
}$(window).on('resize', (function() {
if ($(window).width() < 769) {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 1) $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
else $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
});
} else {
//do another
}
}));<script>
function toggleFunc(){
let el = this;
return [
function() {
console.log('первый клик');
},
function() {
console.log('второй клик');
}
][el.tog^=1]();
}
$("button").click( toggleFunc );
</script><script>
$("button").toggle(
function () {
console.log('первый клик');
},
function () {
console.log('второй клик');
},
function () {
console.log('можно и третий');
},
);
</script><div id="video0"></div>
<div id="video1"></div>var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player = [];
function onYouTubeIframeAPIReady() {
player[0] = new YT.Player('video0', {
height: '360',
width: '640',
videoId: 'id_video0',
});
player[1] = new YT.Player('video1', {
height: '360',
width: '640',
videoId: 'id_video1',
});
}