在我的项目中,我使用react-yandex-maps库。我的目标是确保用户第一次登录应用程序时完全加载地图。如果我从右向左或从上向下滑动卡片,该卡片不应重新出现。
如何从计数器中删除这些逗号,你只需要做空格
class countUp {
constructor(el) {
this.el = el;
this.setVars();
this.init();
}
setVars() {
this.number = this.el.querySelectorAll("[data-countup-number]");
this.observerOptions = { root: null, rootMargin: "0px 0px", threshold: 0 };
this.observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const end = parseFloat(
entry.target.dataset.countupNumber.replace(/,/g, "")
);
const decimals = this.countDecimals(end);
if (entry.isIntersecting) {
this.iterateValue(entry.target, end, decimals);
}
});
}, this.observerOptions);
}
init() {
if (this.number.length > 0) {
this.number.forEach((el) => {
this.observer.observe(el);
});
}
}
iterateValue(el, end, decimals) {
const start = 0;
const duration = 2500;
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const elapsedPercent = (timestamp - startTimestamp) / duration;
const easedProgress = Math.min(this.easeOutQuint(elapsedPercent), 1);
let interimNumber = Math.abs(easedProgress * (end - start) + start);
el.innerHTML = this.formatNumber(interimNumber, decimals);
if (easedProgress < 1) {
window.requestAnimationFrame(step);
}
};
// requestAnimationFrame returns DOMHighResTimeStamp as a callback (used as timestamp)
window.requestAnimationFrame(step);
}
easeOutQuad(x) {
return 1 - Math.pow(1 - x, 3);
}
easeOutQuint(x) {
return 1 - Math.pow(1 - x, 5);
}
countDecimals(val) {
if (Math.floor(val) === val) return 0;
return val.toString().split(".")[1].length || 0;
}
formatNumber(val, decimals) {
return val.toLocaleString("en-US", {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals
});
}
}
// Simplifed version of Viget dynamic modules to attach instances for this demo
// https://www.viget.com/articles/how-does-viget-javascript/
// You CAN use this pattern, but it's single purpose right now
const dataModules = [...document.querySelectorAll('[data-module="countup"]')];
dataModules.forEach((element) => {
element.dataset.module.split(" ").forEach(function () {
new countUp(element);
});
});
<div data-module="countup">
<div class="concept__wrapper_quantity-inner">
<p data-countup-number="120000">120 000</p>
</div>
<div class="concept__wrapper_quantity-inner">
<p data-countup-number="45000">45 000</p>
</div>
</div
[![在此处输入图像描述][1]][1]如何不使用逗号而是使用空格分隔数字?
class countUp {
constructor(el) {
this.el = el;
this.setVars();
this.init();
}
setVars() {
this.number = this.el.querySelectorAll("[data-countup-number]");
this.observerOptions = { root: null, rootMargin: "0px 0px", threshold: 0 };
this.observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const end = parseFloat(
entry.target.dataset.countupNumber.replace(/,/g, "")
);
const decimals = this.countDecimals(end);
if (entry.isIntersecting) {
this.iterateValue(entry.target, end, decimals);
}
});
}, this.observerOptions);
}
init() {
if (this.number.length > 0) {
this.number.forEach((el) => {
this.observer.observe(el);
});
}
}
iterateValue(el, end, decimals) {
const start = 0;
const duration = 2500;
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const elapsedPercent = (timestamp - startTimestamp) / duration;
const easedProgress = Math.min(this.easeOutQuint(elapsedPercent), 1);
let interimNumber = Math.abs(easedProgress * (end - start) + start);
el.innerHTML = this.formatNumber(interimNumber, decimals);
if (easedProgress < 1) {
window.requestAnimationFrame(step);
}
};
// requestAnimationFrame returns DOMHighResTimeStamp as a callback (used as timestamp)
window.requestAnimationFrame(step);
}
easeOutQuad(x) {
return 1 - Math.pow(1 - x, 3);
}
easeOutQuint(x) {
return 1 - Math.pow(1 - x, 5);
}
countDecimals(val) {
if (Math.floor(val) === val) return 0;
return val.toString().split(".")[1].length || 0;
}
formatNumber(val, decimals) {
return val.toLocaleString("en-US", {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals
});
}
}
// Simplifed version of Viget dynamic modules to attach instances for this demo
// https://www.viget.com/articles/how-does-viget-javascript/
// You CAN use this pattern, but it's single purpose right now
const dataModules = [...document.querySelectorAll('[data-module="countup"]')];
dataModules.forEach((element) => {
element.dataset.module.split(" ").forEach(function () {
new countUp(element);
});
});
这是 HTML
$(".checkbox_3 input").on( "change", function() {
templ = "";
parent = $(this).closest(".checkboxes_wrapp");
parent.find(".checkbox_3").each(function() {
input = $(this).find("input");
if(input.prop("checked") == true) {
templ += input.val() +" ";
}
console.log(templ);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="checkboxes_wrapp">
<div>
<label class="checkbox_3">
<input value="All Countries" type="checkbox" />
<span>All Countries</span>
</label>
</div>
<div>
<label class="checkbox_3">
<input value="Afganistan" type="checkbox" />
<span>Afganistan</span>
</label>
</div>
<div>
<label class="checkbox_3">
<input value="Algeria" type="checkbox" />
<span>Algeria</span>
</label>
</div>
<div>
<label class="checkbox_3">
<input value="Algeria" type="checkbox" />
<span>Angola</span>
</label>
</div>
<div>
<label class="checkbox_3">
<input value="Algeria" type="checkbox" />
<span>Argentina</span>
</label>
</div>
<div>
<label class="checkbox_3">
<input value="Algeria" type="checkbox" />
<span>Armenia</span>
</label>
</div>
<div>
<label class="checkbox_3">
<input value="Algeria" type="checkbox" />
<span>Bahrain</span>
</label>
</div>
<div>
<label class="checkbox_3">
<input value="Algeria" type="checkbox" />
<span>Barbados</span>
</label>
</div>
<div>
<label class="checkbox_3">
<input value="Algeria" type="checkbox" />
<span>Country</span>
</label>
</div>
<div>
<label class="checkbox_3">
<input value="Algeria" type="checkbox" />
<span>Country</span>
</label>
</div>
<div>
<label class="checkbox_3">
<input value="Algeria" type="checkbox" />
<span>Country</span>
</label>
</div>
</div>
有必要在单击某个复选框时,将所有选中的复选框的值按照选中的顺序写入到 templ 变量中。每个单词之间用空格或逗号分隔。怎么做?
我以前从未使用过套接字,不知道有这么方便的东西。我发现当我想在我的宠物项目中将计时器从客户端传输到服务器以便同步时。我花了一整天的时间来设置它,但没有效果。我按照文档进行操作,但没有任何效果。我做错了什么,错误是什么?
const http = require('http');
const io = require('socket.io')(http);
const socketLogic = (io) => {
io.on('connection', (socket) => {
console.log('юзер конектед');
let timer = 11;
const interval = setInterval(() => {
timer--;
socket.emit('timerUpdate', timer);
if (timer === 0) {
clearInterval(interval);
}
}, 1000);
});
};
module.exports = socketLogic;
索引.js
const express = require('express');
const PORT = process.env.PORT || 5050;
const userRouter = require('./routes/user.routes');
const gameRouter = require('./routes/game.routes');
const cors = require('cors');
const http = require('http');
const socketIo = require('socket.io');
const socketLogic = require('./socket');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
io.on('connection', (socket) => {
socket.conn.transport.ws.opts.transports = ['websocket'];
});
const corsOptions = {
origin: '*',
methods: "*",
allowedHeaders: "*"
};
app.use(cors(corsOptions));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use('/api', userRouter);
app.use('/game', gameRouter);
socketLogic(io);
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Methods', 'GET, POST');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
server.listen(PORT, () => console.log(`Cтарутем на порту ${PORT}`));
定时器.jsx
import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';
const socket = io('http://localhost:5050');
const Timer = () => {
const [timer, setTimer] = useState(11);
useEffect(() => {
socket.on('timerUpdate', (newTimer) => {
setTimer(newTimer);
});
return () => {
socket.disconnect();
};
}, []);
return (
<div>
<p>Timer: {timer}</p>
</div>
);
};
export default Timer;
接下来,应该在页面上使用计时器。客户端部分连接到服务器。除了创新之外,一切都运转良好。错误本身: 1. 从源“http://localhost:3000”访问“http://localhost:5050/socket.io/?EIO=4&transport=polling&t=Oxopshi”处的 XMLHttpRequest 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。 2.GET http://localhost:5050/socket.io/?EIO=4&transport=polling&t=Oxoq0To net::ERR_FAILED 200(确定)
大家好!我正在读一本关于 javascript 的书,我发现了这一点:“带标签的语句本身可以被标记。实际上,这意味着任何语句都可以有多个标签。” (“标记的语句可以再次标记。实际上,这意味着任何语句都可以有多个标签。”)。下面我就举个例子来说明一下我的理解:
var x = 0;
var y = 0;
loopName1: loopName2: while (x < 1) {
while (y < 1) {
console.log("loop2");
break loopName1;
y++;
}
x++;
console.log("loop1");
}
也就是说,一个语句可以有两个名称。因此中断loopName1;并中断循环名称2;- 做同样的动作。试图找出在哪里使用它,但我一无所获。
这就提出了一个问题:“我是否正确理解了书中所说的内容?” 如果一切正确,那么它可以用在哪里呢?