主页 / user-271553

Дмытрык's questions

Martin Hope
Дмытрык
Asked: 2022-06-14 17:03:42 +0000 UTC
  • 0

问题的本质：当输入和按钮被包裹在一个表单中时，那么当你在输入上按下回车时，就会触发按钮上的点击事件。为什么会发生这种情况以及如何使单击按钮不起作用？

const btn = document.querySelector('button')
btn.addEventListener('click', (e) => {
  console.log(e.type, e.target.nodeName)
})



const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
  e.preventDefault()
})
<form action="">
  <input type="text">
  <button>Кнопка</button>
</form>

javascript
Martin Hope
Дмытрык
Asked: 2022-04-09 20:44:15 +0000 UTC
  • 0

对于散列密码，我使用了argon2. 对于测试，我编写了以下代码

const argon2 = require('argon2');
const { Buffer } = require('buffer');
const pass = 'password'

const passList = ['qwerty', 'password','zzzz' ]

async function main() {
    let salt = Buffer.from('qwertyuiopasdfgh');
    const hash = await argon2.hash(pass, { salt }); // $argon2i$v=19$m=4096,t=3,p=1$cXdlcnR5dWlvcGFzZGZnaA$bVkS9BbKvWp8zwR0G3Ft3u8qT3vcAbe7EDjJXxxyI1M

    for (const passItem of passList) {
      const result = await argon2.verify(hash, passItem) // false, true, false
}
}

main()

如您所见，在方法verify中，我只传递了密码及其哈希值，这可能会被泄露。我不加盐。遍历密码列表时，我希望看到三个false. 但结果是不同的。密码已设置。

代码基于码头https://github.com/ranisalt/node-argon2编写

javascript
Martin Hope
Дмытрык
Asked: 2021-11-15 02:40:54 +0000 UTC
  • -1

问题的重制，参与者对我的解决方案缺乏感到愤怒，关闭了

游戏。城市影响区

全球地图有一部分（二维矩阵），其中心是城市。城市有影响力。远离城市的每一步，影响力都会变得越来越小。需要用影响力的对应值填充矩阵的所有元素。插图绘图

在此处输入图像描述

例如，一个城市的影响力是 150 点。影响减少步骤 100 分。与城市相邻的瓷砖将有 150 影响力，然后是 50，然后是 0。

javascript
Martin Hope
Дмытрык
Asked: 2020-06-14 19:24:00 +0000 UTC
  • 0

html 属性带有序列化数据。有必要提取和解码它们以便进一步使用它们。我的尝试不成功 - 我在输出中得到一个字符串。

import 'dart:convert';

void main() {
  String str =
      '<App menudata="[{&quot;id&quot;:4,&quot;parent_id&quot;:0,&quot;route_name&quot;:null,&quot;element_name&quot;:null,&quot;title&quot;:&quot;\/admin\/support\/&quot;}]" content="{}" route_name="" ></App>';
  Pattern pattern = r'"\[.{0,}\]"';
  RegExp regex = new RegExp(pattern);
  str = str.replaceAll('&quot;', '\'');
  str = regex.stringMatch(str);
  var decodeDate = jsonDecode(str);
  print(decodeDate);
}

https://dartpad.dev/2727ebdc830a56acac6f1c82bac896d3

flutter
Martin Hope
Дмытрык
Asked: 2020-06-12 16:50:06 +0000 UTC
  • 0

在验证各种字段时，计划使用这样一个类：

class InputValidator {
  InputValidator({this.error = ''});
  final String error;

  String email(value) {
    final globalValidator = GlobalValidator();
    bool result = globalValidator.email(value);
    String err = error != '' ? error : "This is not email";
    return result ? null : err;
  }

  String require(value) {
    String err = error != '' ? error : "This field is required";
    return value != '' ? null : err;
  }

  String stepByStep(value) {
    return 'xxx';
  }
}

使用示例

Input(
      label: "Email",
      type: 'email',
      controller: emailController,
      validator: inputValidator.stepByStep
      ),

面临分阶段验证现场的问题。意思是，对具有不同错误的同一字段的几个不同验证。例如，首先我定义 to require，然后匹配电子邮件模式。我计划在同一个类中创建一个 stepByStep 方法，其中会发生必要的魔法。但我不知道如何在 Dart 中正确地做到这一点。

在 JS 中，我会有条件地这样做：

function stepByStep(value, steps){
  stepsName.forEach(stepName => {
    this[stepName](value);
  })
}

stepByStep('xxx', ['require', 'email']);
flutter
Martin Hope
Дмытрык
Asked: 2020-01-29 03:07:57 +0000 UTC
  • 1

我正在写一个 MMO RTS。在前面，我使用 Vue。以给定的频率，更新的数据通过 WebSoket 从服务器到达。自然地，数据是放在Vuex中，由组件监控。

发现每次新提交都会增加内存消耗。如果您让选项卡保持打开状态，浏览器会崩溃。

下面是演示问题的代码：运行它，打开控制台 - 内存选项卡 - 并观察

const data = {
  lvl: 0,
  a: {
    lvl: 1,
    b: {
      lvl: 2,
      c: {
        lvl: 3
      }
    }
  }
}
const store = new Vuex.Store({
  state: {
    count: 0,
    data: []
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    set_data(state, payload) {
      state.data = payload;
    }
  },
  actions: {
    increment(context) {
      setInterval(() => {
        context.commit('increment');
        const newData = JSON.parse(JSON.stringify(data));
        context.commit('set_data', newData);
      }, 500);
    }
  }
});

var app = new Vue({
  store,
  el: '#app',
  template: `
  <div>{{count}}</div>`,
  data() {
    return {
      count: 0,
      d: window.performance.memory.totalJSHeapSize
    };
  },
  created() {
    this.$store.dispatch('increment');
  },
  watch: {
    '$store.state.data': {
      deep: true,
      handler() {
        this.count = this.$store.state.count;
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.1/vue.js"></script>
    <script src="https://unpkg.com/vuex@2.0.0"></script>
    <div id="app"></div>

这个消息让我很难过。对如何解决这个问题还没有清晰的认识。

UPD 发现了一个细微差别：如果 html 文件，在这个例子中，不是通过服务器打开的，而是在地址栏中使用完整路径打开的，那么就没有泄漏。

javascript
Martin Hope
Дмытрык
Asked: 2020-01-15 22:15:26 +0000 UTC
  • 3

有一个具有最大和最小宽度的容器。有一个随机的标签列表。您需要在此容器中精美地排列标签，以便尽可能少的空白空间，而布局应该是流畅的。

标签的顺序并不重要。标签名称必须在 1 行中。标签宽度固定：80px；80像素*2；80像素*3；80像素*4。 主要问题是：是否可以使用 CSS Grid 解决问题，还是需要包含 JS？

下面的代码演示了这个问题 - 从给定大小创建 10 个随机长度的标签

const container = document.querySelector("#app");

for (let i = 0; i < 10; i++) {
  createItem();
}
function createItem() {
  const div = document.createElement("div");
  div.className = "item";
  const text = createText();
  div.innerText = text;
  const baseWidth = 79;
  const baseLength = 7;
  let width = baseWidth;
  if (text.length > baseLength && text.length < baseLength * 2) width *= 2;

  if (text.length >= baseLength * 2 && text.length < baseLength * 3) width *= 3;

  if (text.length >= baseLength * 3 && text.length <= baseLength * 4)
    width *= 4;
  div.style.width = width + "px";
  container.appendChild(div);
}

function createText() {
  const str = "qwertyuiopasdfghjklzxcvbnm";
  const length = Math.floor(Math.random() * (str.length / 1.5 + 1)) + 3;
  return str.slice(0, length);
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
}
#app{
  min-width: calc(90px * 3);
  max-width: calc(90px * 6);
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
}
.item{
  padding: 5px 15px;
  background-color: #F8FAFF;
  border: 1px solid;
  margin: 0px 5px 12px 5px;
  text-align: center;
}
    <div id="app"></div>

javascript
Martin Hope
Дмытрык
Asked: 2020-09-11 18:53:45 +0000 UTC
  • 4

圆形百分比进度条 在这个问题的答案中，有这样的代码：

<svg id="svg" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="1,250.2"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">1%</text>
</svg>

<svg viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="125.6,125.6"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">50%</text>
</svg>

如您所见，有 2 个相同的 svg 元素具有pathc 属性stroke-dasharray。在第一种情况下，属性的值为1,250.2，在第二种情况下，为125.6,125.6。此属性中的第二个值是周长。根据我的计算，周长应该是 282.74... ( r="45" * 2 * пи)，但是，在代码中，它是完全不同的。

问题：为什么两个相同的 svg 的周长不同？
是什么影响了它的意义？
如何正确计算？

javascript
Martin Hope
Дмытрык
Asked: 2020-06-01 14:11:16 +0000 UTC
  • 3

在此处输入图像描述

有一张图片...我正在尝试悬停...逻辑是这样的：

  1. 加载图像后，使用辅助画布，我得到图像的像素数组（左侧）
  2. 在画布上移动鼠标时，我确定它在图片上方的位置
  3. 之后，根据像素数组（第1项），我判断鼠标下的像素是否透明——如果不是，画一个悬停（图片右侧）

它似乎工作......，代码如下。

但是，当试图使画布适应屏幕大小（以及相应的图像）时，问题就出现了......我的悬停实现停止工作......变量scale_X和负责比例scale_Y，在代码中标度定义下方被注释掉。

谁能帮助解决问题？

const WIDTH = 800;
const HEIGHT = 374;
let scale_X = 1; // масштаб
let scale_Y = 1; // масштаб
let ctxStyles;
let hover;
const canvas = document.getElementById('canvas');
//const help = document.getElementById('helper');
const help = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const helper = help.getContext('2d');

const real_width = document.documentElement.clientWidth;
const my_width = (real_width / 100) * 70;
const my_height = my_width / 2.14;
//scale_X = my_width / WIDTH; 
 //scale_Y = my_height / HEIGHT;
canvas.width = my_width;
canvas.height = my_height;
help.width = my_width;
help.height = my_height;

ctxStyles = canvas.getBoundingClientRect();
canvas.addEventListener('mousemove', handlerMousemove);

const img = new Image();
//img.src = 'https://isstatic.askoverflow.dev/R5QJI.gif';
img.crossOrigin = "anonymous";
img.src = 'https://i.ibb.co/pfnXvqk/barraks-4-2.gif';
img.onload = function() {
  img.coords = {
    x: 40,
    y: 30
  };
  getPixArr(img);
  drawImgOnCanvas(img);
};

function drawImgOnCanvas(img) {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  const arr = [
    img,
    0,
    0,
    img.width / 2,
    img.height,
    img.coords.x * scale_X,
    img.coords.y * scale_Y,
    (img.width / 2) * scale_X,
    img.height * scale_Y
  ];
  ctx.drawImage(...arr);
  // отрисовывает 2-ю часть картинки, на которой нарисован контур
  if (hover) {
    arr[1] = img.width / 2;
    arr[3] = img.width;
    arr[5] = img.coords.x * scale_X - 1;
    arr[7] = img.width * scale_X;
    ctx.drawImage(...arr);
  }
}

function handlerMousemove(event) {
  const mouseX = event.clientX - ctxStyles.left;
  const mouseY = event.clientY - ctxStyles.top;
  hover = false;
  if (check_Mouse_On_Img(mouseX, mouseY, img)) {
    const notTransparent = check_not_transparent_pixel(mouseX, mouseY, img);
    if (notTransparent) {
      hover = true;
      drawImgOnCanvas(img);
    } else {
      drawImgOnCanvas(img);
    }
  }
}

function getPixArr(img) {
  const ctx = helper;
  const imgWidth = img.width;
  const imgHeight = img.height;
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.drawImage(
    img,
    0,
    0,
    imgWidth / 2,
    imgHeight,
    0,
    0,
    (imgWidth / 2) * scale_X,
    imgHeight * scale_Y
  );
  const pixArr = ctx.getImageData(
    0,
    0,
    (imgWidth / 2) * scale_X,
    imgHeight * scale_Y
  );
  img.pixArr = pixArr;
}

function check_Mouse_On_Img(mouseX, mouseY, img) {
  // const ctx = helper
  const topX = img.coords.x * scale_X;
  const topY = img.coords.y * scale_Y;
  const leftX = topX;
  const leftY = topY + img.pixArr.height;
  const rigthX = topX + img.pixArr.width;
  const rigthY = topY;
  const bottomX = rigthX;
  const bottomY = leftY;
  ctx.beginPath();
  // ctx.strokeStyle = 'red';
  ctx.strokeStyle = "transparent";
  ctx.moveTo(leftX, leftY);
  ctx.lineTo(topX, topY);
  ctx.lineTo(rigthX, rigthY);
  ctx.lineTo(bottomX, bottomY);
  ctx.lineTo(leftX, leftY);
  ctx.stroke();
  ctx.closePath();
  return ctx.isPointInPath(mouseX, mouseY);
}

//определяет прозрачный ли пиксель
function check_not_transparent_pixel(clientX, clientY, img) {
  const imgX = img.coords.x;
  const imgY = img.coords.y;
  // const imgX = img.coords.x * scale_X;
  // const imgY = img.coords.y * scale_Y;
  const mouseX = clientX - imgX; //т.к. массив пикселей построен из начальных координат 0:0, делаю сдвиг
  const mouseY = clientY - imgY;
  const pixArr = img.pixArr;
  const index = Math.floor(get_Pix_Index(mouseX, mouseY, pixArr));
  let alpha = pixArr.data[index + 3]; //прозрачность
  if (index > pixArr.data.length) {
    return false;
  }
  if (alpha > 0) {
    return true;
  }
  return false;

  //определяет индекс пикселя в массиве пикселей
  function get_Pix_Index(mouseX, mouseY, pixArr) {
    let pixel;
    if (mouseX == 0 && mouseY > 0) {
      pixel = (pixArr.width * scale_X) * mouseY + 1;
    } else if (mouseY == 0 && mouseX > 0) {
      pixel = mouseX;
    } else {
      pixel = mouseY * (pixArr.width* scale_X) + mouseX - 1;
    }
    let index = pixel * 4;
    return index;
  }
}

// просто для тестов
canvas.addEventListener('click', event => {
  const mouseX = event.clientX - ctxStyles.left;
  const mouseY = event.clientY - ctxStyles.top;
  console.log(mouseX, mouseY);
  ctx.beginPath();
  ctx.arc(mouseX, mouseY, 2, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath();
  ctx.putImageData(img.pixArr, mouseX, mouseY);
});
body{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
canvas{
  border: 1px solid;
}
<canvas id="canvas" ></canvas>
  <canvas id="helper" style="position: fixed; left: -300%"></canvas>

PS...还有一个问题：如果使用属性隐藏辅助画布，则图像的透明像素被定义为不透明，hidden或者display: none- 为什么？

javascript
Martin Hope
Дмытрык
Asked: 2020-05-20 19:09:40 +0000 UTC
  • 1

有必要在单击按钮时打开文件上传窗口并带有一定的接受。在我的示例中，在下载窗口打开后应用接受。Element-ui 库 https://element.eleme.io/#/en-US/component/upload 

new Vue({
  el: '#app',
  data: function() {
    return { 
      visible: false, 
      accept: '' 
    };
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <div id="app">
  <el-upload class="upload-demo" :accept="accept" action="/">
    <el-button size="small"  @click.native="accept = '.txt'">Upload txt</el-button>
    <el-button size="small" @click.native="accept = '.png'">Upload png</el-button>
  </el-upload>
  
</div>

javascript
Martin Hope
Дмытрык
Asked: 2020-05-20 18:05:57 +0000 UTC
  • 2

有没有这样的方法？还是您需要创建自己的活动？

UPD
总的来说，我想在 Vue 组件上应用这个技巧，它没有时间处理数据，在点击和打开文件上传窗口之间（接受更改）。
但是，在一些异步操作之后需要解决进一步分发问题的情况下，例如，在服务器响应之后，这可能是必要的......

document.addEventListener('click', ()=>{
  console.log('Клик вспыл до документа')
})
const base = document.getElementById('base');
base.addEventListener("click", (e)=>{
  e.stopPropagation();
  setTimeout(()=>{
// как продолжить всплытие клика?
  })
})
body{
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
#base{
  height: 100px;
  width: 100px;
  border: 1px solid black;
}
 <div id="base"></div>

javascript
Martin Hope
Дмытрык
Asked: 2020-05-10 23:07:10 +0000 UTC
  • 1

情况是这样的...... VUE-SSR的操作，组装了2个bundle - 一个用于服务器，另一个用于前端。每次更改代码，都必须重新构建……为了正常开发，观察者（watchers）挂起自动重新构建这些bundle。此外，我还有一个服务器正在运行，还有一个观察者（单独用于后端文件）+我需要运行 Monga。
如果我通过一个npm组合了多个命令的命令来运行项目npm run one && npm run two && npm run three，那么如果第一个命令带有观察者，则下一个命令不会启动。

结果，为了运行项目，我需要打开 4 个终端并运行 4 个 npm 命令。1）启动Monga；2）服务器启动；3）构建一个Vue服务器包；4) 构建客户端包 Vue。这有点压力。

谁能告诉我如何摆脱困境？

  "scripts": {
    "build-client": "webpack  --config build/webpack.client.config.js --progress  --watch --hide-modules",
    "build-serv": "webpack --config build/webpack.server.config.js --progress --watch --hide-modules ",
    "serv": "supervisor --watch backend index.js "
  },
node.js
Martin Hope
Дмытрык
Asked: 2020-05-08 19:33:56 +0000 UTC
  • 0

我遇到了一个问题 - 在移动结束之前，不会应用光标更改。需要帮助决定。

const base = document.getElementById('base');
const items = base.children;
let dragElement;
setListeners(items);

function handlerDragstart(event) {
  const target = event.target;
  target.style.cursor = 'move';
  dragElement = target;
}

function handlerDrop(event) {
  const target = event.target;
  base.insertBefore(dragElement, target);
  // dragElement.style.cursor = 'grab';
}

function setListeners(arrNodes) {
  for (let i = 0; i < arrNodes.length; i++) {
arrNodes[i].addEventListener('dragstart', handlerDragstart);
arrNodes[i].addEventListener('dragover', handlerDragOver);
arrNodes[i].addEventListener('drop', handlerDrop);
  }
}

function handlerDragOver(event) {
  event.preventDefault();
}
body{
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
#base{
  height: 100%;
  width: 50%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.item{
  width: 70px;
  height: 70px;
  border: 1px solid blue;
  margin-bottom: 10px;
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="base">
  <div class="item" draggable="true">0</div>
  <div class="item" draggable="true">1</div>
  <div class="item" draggable="true">2</div>
  <div class="item" draggable="true">3</div>
  <div class="item" draggable="true">4</div>
  <div class="item" draggable="true">5</div>
  <div class="item" draggable="true">6</div>
</div>

javascript
Martin Hope
Дмытрык
Asked: 2020-05-02 16:13:18 +0000 UTC
  • 1

您需要跟踪复选框状态的变化，以防使用 JS 更改此状态。没想到，我发现在这样的条件下，事件change并没有发出

const checkbox = document.getElementById('box');
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=>{
  checkbox.checked = !checkbox.checked;
})
checkbox.addEventListener('change', ()=>{
  console.log("Состояние чекбокса изменнено")
})
 <input id='box' type="checkbox">
<button id="btn">Click</button>

javascript
Martin Hope
Дмытрык
Asked: 2020-04-11 17:31:08 +0000 UTC
  • 2

如何使用这样的布局，内容（在第二个示例中）不会影响元素的宽度，同时保留“rubbery” 

.one, .two{
  display: flex;
}
.one__item{
  flex-grow: 10;
  border: 1px solid red;
  height: 20px;
}
.two__item{
  flex-grow: 10;
  border: 1px solid blue;
  height: 20px;
}
  <div class="one">
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div>
      <div class="one__item">1</div> 
    </div>
    <div class="two">
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
      <div class="two__item"></div>
    </div>
    <br>
<br>
<br>
<br>
<div class="one">
  <div class="one__item">133</div>
  <div class="one__item">144444</div>
  <div class="one__item">15555</div>
  <div class="one__item">1634</div>
  <div class="one__item">134</div>
  <div class="one__item">134</div>
  <div class="one__item">133</div> 
</div>
<div class="two">
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
  <div class="two__item"></div>
</div>

html
Martin Hope
Дмытрык
Asked: 2020-03-06 21:17:08 +0000 UTC
  • 2

悬停时需要three更改样式six（使用 CSS）

body {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: space-between;
}

.three {
  width: 20px;
  height: 20px;
  background-color: blue;
}

.six {
  width: 20px;
  height: 20px;
  background-color: yellow;
}
<div class="one">
  <div class="two">
    <div class="three">
    </div>
  </div>
</div>
<div class="four">
  <div class="five">
    <div class="six">
    </div>
  </div>
</div>

谷歌搜索并没有找到任何东西

html