import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
const formatter = new Intl.NumberFormat('en-US');
formatter.format(12345) // "12,345"
formatter.format(123) // "123"
formatter.format(1234567) // "1,234,567"
Возможно ли в ссылке на скачивание передать дополнительные данные?
var obj1 = document.getElementById('test1');
if (getComputedStyle(obj1).display == 'none') {
document.getElementById('rezult1').innerHTML = "Скрыто";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div><p>Is typing <span class="dot1">.</span>
<span class="dot2">.</span>
<span class="dot3">.</span></p></div>
</body>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
html{
font-family: Montserrat;
}
.dot1{
transition-delay: 0.1s;
opacity: 0;
transition-duration: 0.3s;
}
.active-dot1{
opacity: 1;
transition-delay: 0.1s;
transition-duration: 0.3s;
}
.dot2{
transition-delay: 0.2s;
opacity: 0;
transition-duration: 0.3s;
}
.active-dot2{
transition-delay: 0.2s;
opacity: 1;
transition-duration: 0.3s;
}
.dot3{
transition-delay: 0.3s;
opacity: 0;
transition-duration: 0.3s;
}
.active-dot3{
transition-delay: 0.3s;
opacity: 1;
transition-duration: 0.3s;
}
</style>
<script>
let dot1 = document.querySelector(".dot1")
let dot2 = document.querySelector(".dot2")
let dot3 = document.querySelector(".dot3")
setInterval(() => {
dot1.classList.toggle("active-dot1")
}, 500);
setInterval(() => {
dot2.classList.toggle("active-dot2")
}, 500);
setInterval(() => {
dot3.classList.toggle("active-dot3")
}, 500);
</script>
</html>
const options = computed(() => {
if (props.secondType)
return props.secondTypeItems.map(({ id, value}) => ({
label: value,
value: id
}));
if (props.thirdType)
return props.thirdTypeEvents.map(({ desc, name }) => ({
label: name,
value: desc
}));
// ...
return [];
});<el-select
v-model="modelText"
placeholder="Выберите предмет"
@change="changeVal"
>
<el-option
v-for="{ label, value} in options"
:key="value"
:label="label"
:value="value"
>
{{ label }}
</el-option>
</el-select>
getCurrentPosition () {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(position => {
resolve(position.coords)
});
})
}async mounted() {
this.getCurrentTime()
const coords = await this.getCurrentPosition()
this.getCurrentWeather(coords)
setInterval(() => this.getCurrentWeather(), 2000)
},
const monthData = allData.reduce((acc, { day, speed, distance, wagons }) => {
const yearMonth = day.match(/\d{4}-\d{2}(?=-\d{2})/)[0];
if (acc[yearMonth]) {
acc[yearMonth].speed += speed;
acc[yearMonth].distance += distance;
acc[yearMonth].wagons += wagons;
} else {
acc[yearMonth] = { speed, distance, wagons };
}
return acc;
}, {})const props = ['speed', 'distance', 'wagons'];
const result = data.reduce((acc, c) => {
const yearMonth = c.day.substring(0, 7); // '2022-03'
props.forEach(prop => {
acc[prop][yearMonth] = (acc[prop][yearMonth] ?? 0) + c[prop];
});
return acc;
}, Object.fromEntries(props.map(prop => [prop, {}])));{
"speed": {
"2022-09": 22452,
"2022-10": 65668.58282444967,
"2022-11": 6397.635863857564
},
"distance": {
"2022-09": 68752,
"2022-10": 1119233,
"2022-11": 289732
},
"wagons": {
"2022-09": 26,
"2022-10": 427,
"2022-11": 176
}
}const hashMap = data.reduce((acc, { day, ...rest }) => {
const hash = day.substring(0, 7);
if (Object.hasOwn(acc, hash)) {
Object.keys(rest).forEach(prop => acc[hash][prop] += rest[prop]);
} else {
acc[hash] = { day: hash, ...rest };
}
return acc;
}, {});
const result = Object.values(hashMap);[
{
"day": "2022-09",
"speed": 22452,
"distance": 68752,
"wagons": 26
},
{
"day": "2022-10",
"speed": 65668.58282444967,
"distance": 1119233,
"wagons": 427
},
{
"day": "2022-11",
"speed": 6397.635863857564,
"distance": 289732,
"wagons": 176
}
]
myImg.onchange = function(event) {
var target = event.target;
if (!FileReader) {
alert('FileReader не поддерживается — облом');
return;
}
if (!target.files.length) {
alert('Ничего не загружено');
return;
}
var fileReader = new FileReader();
fileReader.onload = functino() {
img1.src = fileReader.result;
}
fileReader.readAsDataURL(target.files[0]);
}
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
<autocomplete-input
:variants="cargo_codes"
:variantKey="'id'"
:label="'Код груза'"
:variantTitle="'code6'"
v-model="all_information.cargo_code"
-- :class="{ 'error_label': this.telegram_error.cargo_code }"
++ :myClass="{ 'error_label': this.telegram_error.cargo_code }"
></autocomplete-input>export default {
name: 'AutocompleteInput',
props: {
variants: {
type: Array,
required: true,
},
value: {
default: ''
},
label: {
type: String,
default: '',
},
variantKey: {
type: String,
default: 'id'
},
variantTitle: {
type: String,
default: 'id'
},
placeholder: {
type: String,
default: ''
},
needFull: {
type: Boolean,
default: false
},
-- error_label: {
-- type: String,
-- default: ''
-- }
++ myClass: {
++ type: String,
++ default: {},
++ }
},<template>
<div class="autocomplite_component">
<div class="controller">
<input type="text" class="textarea" @input="onInput" :value="value" :placeholder="placeholder">
</div>
<br>
-- <label class="label" :class="error_label">{{ label }}</label>
++ <label class="label" :class="myClass">{{ label }}</label>
<div class="variants" v-if="filtered && showVariants" style="max-height: 50px; overflow: auto;">
<div v-for="v in filtered" :key="v[variantKey]" class="variant" @click="selectVariant(v)">
<span style="cursor: pointer;">{{ v[variantTitle] }}</span>
</div>
</div>
</div>
</template>const phones = [
{ p: '9171857450', c: 1 },
{ p: '9880735438', c: 10 },
{ p: '9880735439', c: 100 },
{ p: '9880735779', c: 2 },
{ p: '9170997305', c: 2 },
{ p: '9170997493', c: 2 },
{ p: '9880634879', c: 5 },
{ p: '9170996154', c: 1 },
{ p: '9880728447', c: 1 },
];
const chancesTotal = phones.reduce((acc, { c }) => acc + c, 0);
const selected = Math.floor(Math.random() * chancesTotal);
let phone;
for (let i = 0, sum = 0; i < phones.length; i++) {
sum += phones[i].c;
if (selected < sum) {
phone = phones[i].p;
break;
}
}
const randomUrl = `https://wa.me/${phone}?text=Привет!%20Пришлите%20мне%20цены%20на%20рыбку!`;
<slot name="placeholder"></slot><template #placeholder>
<option value="" disabled>давай, выбирай</option>
</template>
data: () => ({
meetupId: null,
meetupData: null,
}),
watch: {
meetupId(val) {
fetch(`https://course-vue.javascript.ru/api/meetups/${val}`)
.then(r => r.json())
.then(r => this.meetupData = r);
},
},<label v-for="i in 5">
<input type="radio" name="meetupId" :value="i" v-model="meetupId">
{{ i }}
</label>
<pre>{{ meetupData }}</pre>