.container {
height: 100vh;
min-height: 600px;
}
@media screen and (min-width: 600px) and (orientation: landscape) {
.container {
min-height: 800px;
}
}@media screen and (min-height: 1200px) and (orientation: landscape) {
/* Стили CSS ... */
}@media screen and (max-height: 700px) {
/* Стили CSS ... */
}.container
box-sizing border-box.container {
box-sizing: border-box;
}.container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}<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(); // и потом отправляем данные
});