RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / user-331312

Михаил Камахин's questions

Martin Hope
Михаил Камахин
Asked: 2024-03-15 06:47:01 +0000 UTC

错误:私有标识符仅在针对 ECMAScript 2015 及更高版本时可用

  • 5

我有一个使用 puppeteer 包的 .ts 文件。我可以使用 tsx 包运行代码,但无法将 .ts 文件构建为 .js 文件。我检查了,完全删除了 tsconfig.json 中的所有内容,并且在构建过程中没有任何损坏(错误没有改变)。就好像 tsс 根本看不到 tsconfig.json.
当我尝试构建该文件时,出现以下错误:

node_modules/puppeteer/lib/types.d.ts:31:5 - error TS18028:
Private identifiers are only available when targeting ECMAScript 2015 and higher.

如何摆脱这个错误?好吧,或者只是如何将这个 .ts 文件构建到 .js 文件中。

我将附上配置:

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "module": "ES2022",
        "target": "ES2022",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "importHelpers": true,
        "lib": [
      "ES2022",
      "dom"
    ]
    },
    "exclude": [
        "src/models",
        "node_modules"
    ]
}

包.json

{
  "name": "sport-parsing",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "tsx ./src/index.ts",
    "build": "tsc ./src/index.ts --outDir ./dist"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^22.4.1"
  },
  "devDependencies": {
    "@types/node": "^20.11.27",
    "pkg": "^5.8.1",
    "tsx": "^4.7.1",
    "typescript": "^5.4.2"
  }
}

在 Node.js v20.11.1 上运行

node.js
  • 1 个回答
  • 28 Views
Martin Hope
Михаил Камахин
Asked: 2024-03-06 23:20:20 +0000 UTC

Docker、NestJs 无法连接到 postgres

  • 5

我无法从后端服务访问 postgres。我检查了pgadmin,它与postgres一起成功运行,没有任何问题(即postgres已成功启动)。但是NestJs无法与postgress通信。我尝试在本地运行 NestJs,并在 Docker 中运行 postgress 和 pgadmin,在本例中,NestJs 可以访问 postgres。但容器内部无法通信。
我什至指定了depends_on: -postgres ,但没有任何效果。

什么可能导致错误?

与 postgres 没有连接的标准错误示例:

backend  | [Nest] 31  - 03/06/2024, 3:23:52 PM
ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)...

docker-compose.yml

version: "3.9"

services:
  postgres:
    container_name: chat
    image: postgres:16.2
    env_file:
      - ./api-chat/.env
    volumes:
      - ./api-chat/postgres_data:/var/lib/postgresql/data/
    ports:
      - "5432:5432"

  pgadmin:
    container_name: pgadmin
    image: dpage/pgadmin4:8.3
    environment:
      PGADMIN_DEFAULT_EMAIL: [email protected]
      PGADMIN_DEFAULT_PASSWORD: root
    ports:
      - "5050:80"

  backend:
    container_name: backend
    build:
      context: ./api-chat
      dockerfile: Dockerfile
    depends_on:
      - postgres
    restart: always
    env_file:
      - ./api-chat/.env
    command: npm run start:dev
    volumes:
      - ./api-chat:/docker-backend
    ports:
      - "3000:3000"

Dockerfile

# Use the official Node.js image
FROM node:18.14.0

# Set the working directory
WORKDIR /usr/src/docker-backend

# Копирование package.json to the container
COPY ./package.json .

# Если package-lock.json существует, копировать его в контейнер
COPY ./package-lock.json* .

# Установка зависимостей
RUN npm install

# Установка global nest cli
RUN npm install -g @nestjs/cli

# Копирование остальных файлов приложения в контейнер
COPY . .
docker
  • 1 个回答
  • 11 Views
Martin Hope
Михаил Камахин
Asked: 2023-10-07 05:17:42 +0000 UTC

关键帧的进入和退出是什么意思?

  • 6

在 Chrome 演示中我发现了这段代码:

@supports(animation-timeline: view()) {
            @keyframes fade-in-on-enter--fade-out-on-exit {
                entry 0%  {
                    opacity: 0;
                    transform: translateY(100%);
                }
                entry 100%  {
                    opacity: 1;
                    transform: translateY(0);
                }
                exit 0% {
                    opacity: 1;
                    transform: translateY(0);
                }
                exit 100% {
                    opacity: 0;
                    transform: translateY(-100%);
                }
            }

            #list-view > ul > li {
                animation: linear fade-in-on-enter--fade-out-on-exit;
                animation-timeline: view();
            }
        }

我没有在任何地方找到任何信息entry或exit文字,谁知道它是什么?

工作示例(Chrome 117)

*,
*::before,
*::after {
  box-sizing: border-box;
}

#list-view {
  height: 100%;
  overflow-y: auto;
}

ul {
  counter-reset: index;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#list-view {
  height: 80vh;
  width: 50vw;
  margin: 0 auto;
}

li {
  height: 5em;
  border: none;
  border-bottom: 1px solid #ddd;
  counter-increment: index;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1em;
}

li .name::after {
  content: " (item #" counter(index) ")";
  font-family: monospace;
  font-size: 0.8em;
}

li .name {
    flex: 1;
}

li .avatar {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 2.5em;
    height: 2.5em;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIzMnB4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iMzJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojNDM0MzQ1O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9Cgkuc3Qxe2ZpbGw6IzQzNDM0NTt9Cjwvc3R5bGU+PGcgaWQ9IkxheWVyXzIiLz48ZyBpZD0iTGF5ZXJfMSI+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxLDE2YzAsNC42NTk5Ny0yLjEzLDguODI5OTYtNS40Njk5NywxMS41Nzk5NkMyMi45NCwyOS43MTk5NywxOS42MiwzMSwxNiwzMSAgICBzLTYuOTQtMS4yODAwMy05LjUzMDAzLTMuNDIwMDRDMy4xMywyNC44Mjk5NiwxLDIwLjY1OTk3LDEsMTZDMSw3LjcxOTk3LDcuNzE5OTcsMSwxNiwxUzMxLDcuNzE5OTcsMzEsMTZ6Ii8+PHBhdGggY2xhc3M9InN0MCIgZD0iTTIyLjUsMTEuNWMwLDIuNDUyNjMtMS4zNjA2Nyw1LjQwNzk5LTMuMzgwMDIsNy4wMjg2NWMtMC4wMzQ2NSwwLjAyNjAzLTAuMDY5MjksMC4wNTItMC4xMDM5OSwwLjA3ODAyICAgIGMtMC45MDEzMiwwLjcwMi0xLjkyMzk3LDEuMTI2NjYtMy4wMTU5OCwxLjEyNjY2cy0yLjExNDY3LTAuNDI0NjYtMy4wMTU5OC0xLjEyNjY2Yy0wLjAzNDctMC4wMjYwMy0wLjA2OTM1LTAuMDUyLTAuMTA0LTAuMDc4MDIgICAgQzEwLjg2MDY3LDE2LjkwNzk5LDkuNSwxMy45NTI2Myw5LjUsMTEuNUM5LjUsNy45MTE5OSwxMi40MTE5OSw1LDE2LDVTMjIuNSw3LjkxMTk5LDIyLjUsMTEuNXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjUuNTMwMDMsMjcuNTI5OTd2MC4wNDk5OUMyMi45NCwyOS43MTk5NywxOS42MiwzMSwxNiwzMXMtNi45NC0xLjI4MDAzLTkuNTMwMDMtMy40MjAwNHYtMC4wNDk5OSAgICBjMC00LjE2OTk4LDIuNjcwMDQtNy43MTk5Nyw2LjQxMDAzLTljMC4wMjk5NywwLjAyMDAyLDAuMDcwMDEsMC4wNDk5OSwwLjA5OTk4LDAuMDgwMDIgICAgYzAuOTEwMDMsMC43MDAwMSwxLjkyOTk5LDEuMTIsMy4wMjAwMiwxLjEyczIuMTA5OTktMC40MTk5OCwzLjAyMDAyLTEuMTJjMC4wMjk5Ny0wLjAzMDAzLDAuMDcwMDEtMC4wNiwwLjA5OTk4LTAuMDgwMDIgICAgQzIyLjg1OTk5LDE5LjgxLDI1LjUzMDAzLDIzLjM1OTk5LDI1LjUzMDAzLDI3LjUyOTk3eiIvPjwvZz48L2c+PC9zdmc+");
    background-size: 100%;
}

@supports(animation-timeline: view()) {
  @keyframes fade-in-on-enter--fade-out-on-exit {
    entry 0% {
      opacity: 0;
      transform: translateY(100%);
    }
    entry 100% {
      opacity: 1;
      transform: translateY(0);
    }
    exit 0% {
      opacity: 1;
      transform: translateY(0);
    }
    exit 100% {
      opacity: 0;
      transform: translateY(-100%);
    }
  }
  
  #list-view>ul>li {
    animation: linear fade-in-on-enter--fade-out-on-exit;
    animation-timeline: view();
  }
}
<div id="list-view">
  <ul>
    <li>
      <span class="avatar"></span>
      <span class="name">Adam Argyle</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Adriana Jara</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Andre Bandarra</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Alexandra White</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Ali Spivak</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Anusmita Ray</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Barry Pollard</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Bramus Van Damme</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Brendan Kenny</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Carol Rivero</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Eiji Kitamura</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Ewa Gasperowicz</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">François Beaufort</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Jack J</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Jake Archibald</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Jecelyn Yeen</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Jeremy Wagner</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Joe Medley</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Kevin Lee</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Marc Doerrenhaus</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Mariko Kosaka</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Maud Nalpas</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Matthias Rohmer</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Milica Mihajlija</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Oliver Dunk</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Patrick Kettner</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Paul Kinlan</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Pete LePage</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Philip Walton</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Rachel Andrew</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Rick Viscomi</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Robert Nyman</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Rowan Merewood</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Sam Dutton</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Sebastian Benz</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Sofia Emelianova</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Thomas Steiner</span>
    </li>
    <li>
      <span class="avatar"></span>
      <span class="name">Una Kravets</span>
    </li>
  </ul>
</div>

css
  • 1 个回答
  • 64 Views
Martin Hope
Михаил Камахин
Asked: 2023-07-29 04:10:11 +0000 UTC

如何在Jasmine中测试函数中的函数调用?

  • 5

我的 Angular 项目中有一个 utils.ts 文件,其中:

export const testFn = function(): void { };

export const testFn1 = function(): void {
  testFn();
};

我需要测试 node.js 中的功能(而不是在浏览器中)
我编写这样的测试:

  describe('Тестирование функции testFn1', () => {

    let moduleObj: any = null;

    beforeEach(() => {
      moduleObj = { testFn, testFn1 };
    });

    it('должна выполниться без ошибок', () => {
      expect(moduleObj.testFn1).not.toThrow();
    });

    it('должна вызывать функцию testFn', () => {
      spyOn<any>(moduleObj, 'testFn');
      moduleObj.testFn1();
      expect(moduleObj.testFn).toHaveBeenCalled();
    });

  });

但是第二次测试失败了,Error: Expected spy testFn to have been called
Jasmine没有看到testFn函数调用,我做错了什么?

angular
  • 1 个回答
  • 13 Views
Martin Hope
Михаил Камахин
Asked: 2022-08-06 17:43:45 +0000 UTC

html表格行跨度

  • 0

我需要做一张这样的桌子

在此处输入图像描述

但结果是这样的

在此处输入图像描述

我不明白我做错了什么

.table {
  border-collapse: collapse;
}

.table td,
.table th {
  border: 2px solid black;
  padding: 10px;
}
<table class="table">

  <thead>
    <tr>
      <th colspan="3">
        Форма для отправки фотографии на сайт
      </th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <th rowspan="5">Автор фотографии</th>
      <td rowspan="2">Фамилия И.О.</td>
      <td rowspan="2">
        <input type="text" placeholder="Введите ваше имя">
      </td>
    </tr>

    <tr>
      <td rowspan="2">Пол</td>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Женский
        </label>
      </td>
    </tr>

    <tr>
      <td>
        <label>
          <input type="radio" name="gender" id="">
          Мужской
        </label>
      </td>
    </tr>

    <tr>
      <td>Страна</td>
      <td>
        <select name="country">
          <option value="Россия">Россия</option>
          <option value="США">США</option>
        </select>
      </td>
    </tr>

  </tbody>

</table>

我以为线条应该这样排列

在此处输入图像描述

html table
  • 1 个回答
  • 33 Views
Martin Hope
Михаил Камахин
Asked: 2022-09-04 21:08:26 +0000 UTC

从函数返回的不同类型

  • 1

如何编写类型以便在调用函数时domUtils.create('img')获得返回的类型HTMLImageElement?

export const domUtils = {
  toArray<T>(element: T): T[] {
    return [].slice.call(element);
  },
  get(selector: string): HTMLElement {
    return document.querySelector(selector);
  },
  create(element: string): HTMLImageElement | HTMLElement {
        if (element === 'img') {
            return document.createElement(element) as HTMLImageElement;
        }
    return document.createElement(element) as HTMLElement;
  }
};

const imageNode = domUtils.create('img');

在此处输入图像描述

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-08-13 00:31:22 +0000 UTC

Google Chrome 中打开的标签页可以分配多少内存?

  • 0

在面试中,有人问我一个问题,浏览器中的选项卡最多可以分配多少内存。你怎么知道?

const blockContainerNode = document.querySelector('.block-container');
const inputNode = document.querySelector('.input');
const btnStartNode = document.querySelector('.btn-start');
const btnEndNode = document.querySelector('.btn-end');

btnStartNode.addEventListener('click', () => {
  const inputValue = Number(inputNode.value);
  if (!isNaN(inputValue) && inputValue > 0) {
    startAnimation(blockContainerNode, inputValue);
  }
});

btnEndNode.addEventListener('click', () => {
  blockContainerNode.textContent = '';
});

function startAnimation(blockContainerNode, quantityBlocks) {
  const blockNodes = new Array(quantityBlocks).fill(0).map((item, i) => {
    const divNode = document.createElement('div');
    divNode.classList.add('block');
    divNode.textContent = i;
    divNode.style.setProperty('--index', i);
    return divNode;
  });
  document.body.style.setProperty('--maxIndex', quantityBlocks);
  blockContainerNode.textContent = '';
  blockContainerNode.append(...blockNodes);
}
.block-container {
  --maxIndex: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 40px;
}

.block {
  --index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: anime 2s calc(var(--index) * -0.5s) infinite linear alternate-reverse;
}

@keyframes anime {
  0% {
    transform: rotate(0deg) scale(1) skew(60deg, 80deg);
  }
  100% {
    transform: rotate(360deg) scale(3);
  }
}
<input class="input" type="number" value="1000" placeholder="Количество блоков">
<button class="btn-start" type="button">Начать анимацию</button>
<button class="btn-end" type="button">Удалить</button>
<div class="block-container">
</div>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-07-26 18:42:55 +0000 UTC

如何在 CSS 中计算数字的模数

  • 5

我可以通过 css 计算模块吗?
我有这个表达式y = -34 * abs(x - 0.5) + 17 (x 从 0 变为 1)
这是这样一个函数的图表,你可以看到:https ://www.desmos.com/calculator/ 4zdruwvikn?lang= Common crawl en
我想用 CSS 计算,可以吗?

const blockNode = document.querySelector('.block');

const y = blockNode.computedStyleMap().get('transform')[0].y;

document.write(`${y.value}${y.unit}`);
.block {
  --x: 0;
  --y: calc(1px + 2px);
  transform: translate(0px, var(--y));
  
  background-color: red;
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}
<div class="block">
</div>

css
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-07-26 01:35:54 +0000 UTC

如何运行平滑滚动条?

  • 0

我在这里寻找并尝试启用平滑滚动条。
我似乎根据文档做所有事情,但没有任何效果

const mainNode = document.querySelector('#main');

Scrollbar.init(mainNode);
body {
  margin: 0;
}

section {
  height: 50vh;
}

section:nth-child(2n) {
  background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.7.4/smooth-scrollbar.min.js"></script>

<main class="main" id="main" data-scrollbar>

  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>

</main>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-07-02 03:53:06 +0000 UTC

如何通过将其连接为单独的文件来影响css中的svg?

  • 3

我想通过将 svg 作为单独的文件包含在 css 中来使用 CSS 伪类 ( :hover, )。:active

我做了这样的,
svg文件:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="./journey-svg.css"?>
<svg 
    version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    width="800"
    height="800"
    viewBox="0 0 800 800"
> 

    <defs>
        <style>
        
            #journey {
                fill: var(--journey, black);
            }

        </style>
    </defs>

    <path id="journey" alignment-baseline="" d="M227.699 1.199H25.301c-13.234 0-24 10.766-24 24v197.602c0 13.23 10.766 24 24 24h202.398c13.235 0 24-10.77 24-24V25.199c0-13.234-10.765-24-24-24zm0 24l.008 104.98-40.543-38.078c-2.836-2.66-6.468-4.125-10.226-4.125-4.571 0-8.848 2.145-11.739 5.883l-47.73 61.805c-1.547 2.004-4.027 3.199-6.637 3.199-1.781 0-3.461-.539-4.863-1.566l-31.016-22.653c-3.09-2.254-7.093-3.5-11.269-3.5-4.758 0-9.203 1.551-12.52 4.367l-25.863 21.934V25.199h202.398zm0 0M93.301 96.398c13.676 0 24.801-11.125 24.801-24.801 0-13.671-11.125-24.796-24.801-24.796-13.676 0-24.801 11.125-24.801 24.796 0 13.676 11.125 24.801 24.801 24.801zm0 0" />
</svg>

但是我无法使用 CSS 到达那里,它看不到 CSS 变量,例如:

<style>
    :root {
        --journey: red;
    }
</style>

<object type="image/svg+xml" data="./images/journey-svg/journey-svg.svg" width="400" height="400"> </object>

但是,如果我只是将 svg 直接插入到文件中,那么一切都会正常工作:

:root {
  --journey: red;
}

#journey-svg {
  --size: 100px;
  width: var(--size);
  height: var(--size);
}

#journey-svg:hover {
  --journey: green;
}

#journey-svg:active {
  --journey: orange;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="./journey-svg.css"?>
<svg 
    version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
  width="800"
    height="800"
    viewBox="0 0 250 250"
  id="journey-svg"
> 

    <defs>
        <style>
        
            #journey {
                fill: var(--journey, black);
        transition: fill 0.2s ease-in-out;
            }

        </style>
    </defs>

    <path id="journey" alignment-baseline="" d="M227.699 1.199H25.301c-13.234 0-24 10.766-24 24v197.602c0 13.23 10.766 24 24 24h202.398c13.235 0 24-10.77 24-24V25.199c0-13.234-10.765-24-24-24zm0 24l.008 104.98-40.543-38.078c-2.836-2.66-6.468-4.125-10.226-4.125-4.571 0-8.848 2.145-11.739 5.883l-47.73 61.805c-1.547 2.004-4.027 3.199-6.637 3.199-1.781 0-3.461-.539-4.863-1.566l-31.016-22.653c-3.09-2.254-7.093-3.5-11.269-3.5-4.758 0-9.203 1.551-12.52 4.367l-25.863 21.934V25.199h202.398zm0 0M93.301 96.398c13.676 0 24.801-11.125 24.801-24.801 0-13.671-11.125-24.796-24.801-24.796-13.676 0-24.801 11.125-24.801 24.796 0 13.676 11.125 24.801 24.801 24.801zm0 0" />
</svg>

css
  • 3 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-06-13 20:25:12 +0000 UTC

如何给对象加值,不报没有对象的错误

  • 2

我想了解如何使用设置器通过代理向对象添加属性,如下所示:

const obj = {};
const proxyObj = superProxy(obj); // superProxy - функция, возвращающая Proxy
proxyObj.a.b.c.d = 5;
console.log(proxyObj.a.b.c.d); // 5
console.log(obj.a.b.c.d); // 5
javascript
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-05-26 19:34:03 +0000 UTC

这个智能合约的构造函数是如何调用的?

  • 2

我参加了 IDO,使用这个智能合约为我的硬币打上了烙印 https://bscscan.com/address/0x4e62210aacc9a979e9f20e8d14bc01b01365dc32#code

我不明白如何调用构造函数,从哪里调用。感觉就像您可以在 JavaScript(或其他)中调用合约并将参数传递给构造函数。如果是这样,那么事实证明第一个参数可以传递给任何绝对标记。代码中没有检查 IERC20 代币是这个特定的代币,而不是其他
代币

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

import "Ownable.sol";
import "IERC20.sol";
import "ERC20.sol";
import {SafeERC20} from "SafeERC20.sol";
import {SafeMath} from "SafeMath.sol";

contract A4Sale is Ownable  {

    using SafeERC20 for IERC20;
    using SafeMath for uint256;

    IERC20 private _token;
    IERC20 private _currency;

    uint256 public _cap;
    uint256 private _rate = 1;

    uint256 public startTime;
    uint256 public releaseTime;
    uint256 public claimTime;
    uint256 public endTime;

    uint256 private minDepositValue = 10 * 10 ** 18;
    uint256 private minWithdrawValue = 1 * 10 ** 18;
    uint256 private _unitsTotal = 0;

    mapping(address => uint256) public _deposits;

    event Deposit(address indexed, uint256 indexed, uint256 indexed);
    event Withdraw(address indexed, uint256 indexed, uint256 indexed);
    event TokenWithdrowed(address indexed, uint256 indexed);


    constructor(
        IERC20 token,
        IERC20 currency,
        uint256 cap,
        uint256 _startTime,
        uint256 _releaseTime,
        uint256 _claimTime,
        uint256 _endTime ) public
    {
        _token = token;
        _currency = currency;
        _cap = cap;

        startTime = _startTime;
        releaseTime = _releaseTime;
        claimTime = _claimTime;
        endTime = _endTime;
    }

    function rate() view public returns (uint256) {
        return _rate;
    }

    function total() view public returns (uint256) {
        return _unitsTotal;
    }

    // investor token balance 
    function balanceOf(address investor) view public returns (uint256) {
        return _deposits[investor];
    }

    function deposit( uint256 value ) public {
        _deposit(value);
    }

    function withdraw( uint256 value ) public {
        _withdraw(value);
    }

    function withdrawTokens() public {
        _withdrawTokens();
    }

    function withdrawIDO( uint256 value ) onlyOwner public {
        require(claimTime <= block.timestamp, "IDO is active");
        
        _unitsTotal = _unitsTotal.sub(value);
        IERC20(_currency).transfer(msg.sender, value);
    }

    function _deposit( uint256 value ) internal
    {
        require(startTime <= block.timestamp &&  releaseTime > block.timestamp, "IDO is stopped");
        require(value >= minDepositValue, "Not enough value");

        _deposits[msg.sender] = _deposits[msg.sender].add(value);
        _unitsTotal = _unitsTotal.add(value);

        _rate = _unitsTotal.div(_cap);

        IERC20(_currency).transferFrom(msg.sender, address(this), value);

        emit Deposit(msg.sender, value, _rate);
    }

    function _withdraw( uint256 value ) internal
    {
        require(releaseTime <= block.timestamp && claimTime > block.timestamp, "No time for withdraw");
        require(value <= _deposits[msg.sender] && value > minWithdrawValue, "Error withdraw value");

        _deposits[msg.sender] = _deposits[msg.sender].sub(value);
        _unitsTotal = _unitsTotal.sub(value);
        _rate = _unitsTotal.div(_cap);

        IERC20(_currency).transfer(msg.sender, value);

        emit Withdraw(msg.sender, value, _rate);
    }

    function _withdrawTokens() internal
    {
        require(claimTime <= block.timestamp && endTime > block.timestamp, "No time for claime");
        require(_deposits[msg.sender] > 0, "Zero tokens");

        uint256 tokens = _deposits[msg.sender].div(_rate);
        _deposits[msg.sender] = 0;

        _token.transfer(msg.sender, tokens);
        
        emit TokenWithdrowed(msg.sender, tokens);
    }

    
}
blockchain
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-04-21 20:16:50 +0000 UTC

将鼠标悬停在具有嵌套元素的容器上

  • 1

我想监听.list元素上的悬停和悬停事件。
但事实证明,当我将鼠标悬停在嵌套元素上时,悬停有效,而当我将鼠标悬停在列表中的空白位置时,悬停有效。
这种行为不适合我,我该如何摆脱它?

const list = document.querySelector('.list');

list.addEventListener('mouseover', (e) => {
  e.stopPropagation();
  console.log('over');
});

list.addEventListener('mouseout', (e) => {
  e.stopPropagation();
  console.log('out');
});
.list {
  background-color: black;
  color: white;
  padding: 15px;
  font-family: sans-serif;
}
<div class="list">

  <div class="list__item">
    <span class="list__item-text">текст</span>
  </div>
  
  <div class="list__item">
    <span class="list__item-text">текст</span>
  </div>
  
  <div class="list__item">
    <span class="list__item-text">текст</span>
  </div>
  
</div>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-03-25 18:13:04 +0000 UTC

线路旅行

  • 1

我有一个从 i1 到 i2 的线段。
我需要学习如何绕着这个线段转一圈。
如果从 0 到 10 是一个段,我站在索引 2 处并移动 -3,那么我将在索引 10 处结束
如果我移动 -14,那么我将在索引 10 处结束
在此处输入图像描述

我也可以向右移动。

/**
 * Функция для сдвига индекса
 * @param {number} length - Длина элементов
 * @param {number} index - Индекс текущего элемента
 * @param {number} shift - Сдвиг
 */
function shiftDigit(length, index, shift) {
  const indexSumShift = index + shift;
  if (indexSumShift < 0) {
    return length + indexSumShift;
  }
  return (index + shift) % length;
}

console.log(shiftDigit(11, 3, -5));

我的代码没有多大意义,因为我很困惑

UPD:我认为用什么值指示段索引开始和结束位置会更正确:

/**
 * Функция для сдвига индекса
 * @param {number} start - Начало отрезка
 * @param {number} end - Конец отрезка
 * @param {number} index - Индекс текущего элемента
 * @param {number} shift - Сдвиг
 */
function shiftDigit(start, end, index, shift) {

}

console.log(shiftDigit(0, 10, 3, -15));

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-04-03 20:54:38 +0000 UTC

用百分比的输出填充字符串圆,相对于另一个圆

  • 2

我想旋转圆,使圆.progressbar__thumb上的线从不同的位置移动。但是出了点问题。告诉我怎么右转?

const progressbarThumb = document.querySelector('.progressbar__thumb');
const progressbarPercent = document.querySelector('.progressbar__percent > tspan');
const progressbarText = document.querySelector('.progressbar__info > tspan');
let frameLoop = null;

function onCompleteGsap() {
  cancelAnimationFrame(frameLoop);
}

gsap.to(progressbarThumb, 5, {
  '--percent': 50,
  onComplete: onCompleteGsap,
  ease: 'linear'
});

function loop() {
  const percent = gsap.getProperty(progressbarThumb, '--percent');

  if (percent > 99) {
    progressbarText.textContent = 'Закончили?';
  } else if (percent > 60) {
    progressbarText.textContent = 'Разгоняемся!';
  } else if (percent > 40) {
    progressbarText.textContent = 'Погнали!';
  }
  progressbarPercent.textContent = Math.round(percent);
  frameLoop = requestAnimationFrame(loop);
}

frameLoop = requestAnimationFrame(loop);
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.progressbar {
  max-width: 150px;
  font-size: 10px;
  --color: rgb(0, 186, 16);
  --percent: 0; /* процент, насколько заполнен круг */
  --PI: 3.141592;
  --r: 30;
  --strokeWidth: 2;
  --total: calc( var(--PI) * var(--r));
}

.progressbar circle {
  r: var(--r);
}

.progressbar text {
  fill: var(--color);
}

.progressbar__percent {
  font-size: 16px;
}

.progressbar__track {
  fill: transparent;
  stroke: #ededed;
  stroke-width: var(--strokeWidth);
}

.progressbar__thumb {
  fill: transparent;
  --strokeDasharray: calc(2 * var(--total) * var(--percent) / 100) calc(2 * var(--total));
  stroke-linecap: round;
  stroke-dasharray: var(--strokeDasharray);
  stroke: var(--color);
  stroke-width: var(--strokeWidth);
  
  transform-origin: center;
  transform: rotate(90deg);
}
<svg class="progressbar" viewBox="0 0 62 80">
    <circle class="progressbar__track" cx="31" cy="31"></circle>
    <circle class="progressbar__thumb" cx="31" cy="31"></circle>
    <text x="32" y="33" class="progressbar__percent" text-anchor="middle" dominant-baseline="middle"><tspan>0</tspan>%</text>
    <text x="32" y="73" class="progressbar__info" text-anchor="middle" dominant-baseline="middle"><tspan>Загрузочка ...</tspan></text>
</svg>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-04-03 16:57:17 +0000 UTC

通过 JavaScript 跟踪 CSS 变量

  • 2

我在 CSS 中有一个动画,可以改变 CSS 变量。

我想通过 JavaScript 跟踪更改,CSS переменных并根据值执行一些操作(您可以纯粹在 JS 中执行动画,但我对此很感兴趣)。如果有人有任何想法,请告诉我

*,
*::before,
*::after {
  box-sizing: border-box;
}

@property --x {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --y {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --r {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --g {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

@property --b {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  background-color: rgb(var(--r), var(--g), var(--b));
  animation: ballAnimate 2s infinite alternate ease-in-out;
}

.ball {
  --size: 10vmin;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  background-color: rgb(var(--r), var(--g), var(--b));
  filter: invert(100%);
  border-radius: 50%;
  transform: translate(calc(var(--x) * 1vmin), calc(var(--y) * 1vmin));
  animation: ballAnimate 2s infinite alternate ease-in-out;
}

@keyframes ballAnimate {
  0% {
    --x: 0;
    --y: 0;
  }
  25% {
    --y: 20;
    
    --r: 100;
    --g: 100;
    --b: 30;
  }
  50% {
    --x: 30;
  }
  75% {
    --y: 50;
    
    --r: 255;
    --g: 0;
    --b: 255;
  }
  100% {
    --x: 200;
    --y: 80;
    
    --r: 0;
    --g: 255;
    --b: 250;
  }
}
<div class="ball"></div>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-02-10 23:53:47 +0000 UTC

一个函数,它根据一组数字为每次提供与前一个不同的数字

  • 0

我做了一个类RandomNumber,当它被初始化时,它被赋予一个数字数组作为输入。
这个数组存储在构造函数中

constructor(numbers) {
  this.numbers = numbers.slice();
}

我想在类nextNumber中创建一个函数,当调用时,总是给出下一个数字,这与前一个不同
。例如:0,1,0,1,0,1,0 将是如果一个数组已向班级提供了输入[0, 1]
但我的代码无法正常工作。出于某种原因,它1从不重复,并且经常为 0(并且数字根本不应该重复)

在此处输入图像描述

class RandomNumber {

  constructor(numbers) {
    this.numbers = numbers.slice();
  }

  random(numbers) { // генерация рандомного числа на основе длины массива
    const randomIdx = Math.floor(Math.random() * numbers.length);
    const randomNumber = numbers[randomIdx];
    return {num: randomNumber, idx: randomIdx};
  };

  nextNumber() {
    const numbers = this.numbers.slice();
    let randomNumber = this.random(numbers);

    if (this.lastRdnNumber && this.lastRdnNumber.num === randomNumber.num) {
      // this.lastRdnNumber cуществует и прошлое число равняется текущему сгенерированному
      numbers.splice(this.lastRdnNumber.idx, 1); // вырезать число из массива, которое уже было
      randomNumber = this.random(numbers);
    }
  
    this.lastRdnNumber = randomNumber;
    return randomNumber.num;
  }
}

const numbers = [1, 0];
const randomNumber = new RandomNumber(numbers);

for (let i = 0; i < 30; i++) {
  console.log(randomNumber.nextNumber());
}

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-01-31 22:24:23 +0000 UTC

摆脱类实例在字段控制台中的可见性

  • 1

我有一个ThemeRadioJavaScript 课程。
初始化类的实例时

const themeRadio = new ThemeRadio('.radio-theme');
console.log(themeRadio);

而当你输出到控制台时,你可以看到字段matchMediaDarkListener,你怎么能方便地摆脱它呢?
要检查收音机是否默认,您需要更改应用程序的主题,这可以在 Windows 中完成(选择默认应用程序模式)。

在此处输入图像描述

class ThemeRadio {
  constructor(selectorRadios) {
    const nodeListBool = NodeList.prototype.isPrototypeOf(selectorRadios);
    this.themeRadiosDOM = nodeListBool ? selectorRadios : document.querySelectorAll(selectorRadios);
    this.matchMediaDark = window.matchMedia('(prefers-color-scheme: dark)');

    this.addEventsListenerRadio(this.themeRadiosDOM, 'input', (event) => {
      const target = event.target;
      const value = target.value;

      // localStorage.setItem('theme', JSON.stringify(value));
      this.choosingDesiredTheme(value);
    });

    const localStorageExist = this.initRadioValueFromLocalStorage(this.themeRadiosDOM);
    
    if (!localStorageExist) {
      const theme = this.getRadioValue(this.themeRadiosDOM);
      // localStorage.setItem('theme', JSON.stringify(theme));
      this.choosingDesiredTheme(theme);
    }


  }

  addEventsListenerRadio(domElems, eventName, listenerFunc) {
    for (let i = 0; i < domElems.length; i++) {
      const item = domElems[i];
      item.addEventListener(eventName, listenerFunc);
    }
  }

  addTheme(themeName, excludeClasses = ['dark-theme', 'light-theme']) {
    const classesDOM = Array.from(document.documentElement.classList);
  
    for (const className of classesDOM) {
      const findClassName = excludeClasses.find(excludeClass => className === excludeClass);
  
      if (findClassName) {
        document.documentElement.classList.remove(findClassName);
      }
    }
  
    document.documentElement.classList.add(themeName);
  }

  choosingDesiredTheme(theme) {
    if (theme !== 'default-theme') {
      this.matchMediaDark.removeEventListener('change', this.matchMediaDarkListener);
      this.addTheme(theme);
    } else if (theme === 'default-theme') {
      const themeDefault = this.getDefaultTheme();
      this.matchMediaDark.addEventListener('change', this.matchMediaDarkListener);
      this.addTheme(themeDefault);
    }
  }

  getDefaultTheme() {
    return this.matchMediaDark.matches ? 'dark-theme' : 'light-theme';
  }

  matchMediaDarkListener = (event) => {
    const darkActive = event.matches;
    if (darkActive) {
      this.addTheme('dark-theme');
    } else {
      this.addTheme('light-theme');
    }
  }

  initRadioValueFromLocalStorage(radioDomElems) {
    // const radioArrElems = Array.from(radioDomElems);
  
    // const theme = JSON.parse(localStorage.getItem('theme'));
  
    // if (theme) {
    //   const findRadio = radioArrElems.find(radio => radio.value === theme);
    //   if (findRadio) {
    //     findRadio.checked = true; 
    //   }
    //   this.choosingDesiredTheme(theme);
    //   return true;
    // }
    return false;
  }

  getRadioValue(domElems) {
    const arrElems = Array.from(domElems);
    const activeRadio = arrElems.find(elem => elem.checked);
    return activeRadio.value;
  }
}

const themeRadio = new ThemeRadio('.radio-theme');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  --transition-timing-function: linear;
  --transition-duration: 0.2s;
  --header-bg-color: rgb(250, 250, 251);
  --header-color: inherit;
  --main-bg-color: rgb(132, 239, 255);
  --main-color: inherit;
  --footer-bg-color: rgb(249, 249, 255);
  --footer-color: inherit;
}

.dark-theme {
  --white: rgb(231, 231, 231);
  --header-bg-color: rgb(0, 0, 0);
  --header-color: var(--white);
  --main-bg-color: rgb(37, 82, 88);
  --main-color: var(--white);
  --footer-bg-color: rgb(66, 66, 66);
  --footer-color: var(--white);
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 10px 0;
}

.container {
  display: block;
  width: 100%;
  max-width: 800px;
  padding: 0 10px;
  margin: 0 auto;
}

.header {
  background-color: var(--header-bg-color);
  color: var(--header-color);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: background-color, color;
  padding: 10px 0;
}

.main {
  flex: 1;
  padding: 40px 0;
  color: var(--main-color);
  background-color: var(--main-bg-color);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: background-color, color;
}

.footer {
  padding: 40px 0;
  background-color: var(--footer-bg-color);
  color: var(--footer-color);
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  transition-property: background-color, color;
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  --width: 50px;
  min-width: var(--width);
  max-width: var(--width);
}

.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.input-group-radio {
  cursor: pointer;
}

.input-group-radio input[type=radio],
.input-group-radio label {
  cursor: inherit;
}

.input-group-radio label {
  padding-left: 5px;
}

.input-group {
  display: flex;
  align-items: center;
  user-select: none;
}

.as-console-wrapper, .as-console {
  height: 0;
  overflow: hidden !important;
  border: none !important;
}
<header class="header">
  <div class="container">
    <div class="header__container">
      <div class="header__logo">
        <img src="https://picsum.photos/50" alt="">
      </div>
      <form class="checkbox-theme form" id="checkbox-theme">

        <div class="input-group input-group-radio">
          <input type="radio" id="default-theme" class="radio radio-theme" name="theme" value="default-theme" checked>
          <label for="default-theme">По умолчанию</label>
        </div>

        <div class="input-group input-group-radio">
          <input type="radio" id="light-theme" class="radio radio-theme" name="theme" value="light-theme">
          <label for="light-theme">Светлая тема</label>
        </div>

        <div class="input-group input-group-radio">
          <input type="radio" id="dark-theme" class="radio radio-theme" name="theme" value="dark-theme">
          <label for="dark-theme">Тёмная тема</label>
        </div>

      </form>
    </div>
  </div>
</header>

<main class="main">
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum unde quas quo ratione accusamus enim voluptatem beatae, cupiditate maiores facilis voluptatum eveniet neque doloremque dicta aperiam corporis vel illo accusantium.
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, nisi perspiciatis labore sed ad alias porro magnam recusandae facere amet similique, repudiandae beatae minima quia inventore, rerum praesentium totam expedita?
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, nisi perspiciatis labore sed ad alias porro magnam recusandae facere amet similique, repudiandae beatae minima quia inventore, rerum praesentium totam expedita?
    </p>
  </div>
</main>

<footer class="footer">
  <div class="container">
    <div class="footer__container">
      Это футер
    </div>
  </div>
</footer>

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-01-25 23:16:41 +0000 UTC

GraphQL 中的布尔运算

  • 0

告诉我,谁使用过 GraphQL,我想从SpaceX API提出这样的请求:

{
  ships(find: {name: "", home_port: "'Fort Lauderdale' || 'Port of Los Angeles'"}) {
    name
    home_port
    type
    id
  }
}

有必要找到拥有一个或另一个港口的所有船只。但||它不起作用,只有一条简单的线路起作用,一个端口。有谁知道在 GraphQL 中一次这样做的方法?没有 JavaScript

graphql
  • 1 个回答
  • 10 Views
Martin Hope
Михаил Камахин
Asked: 2022-01-05 22:47:02 +0000 UTC

事件侦听器不会在循环中删除

  • 1

在 Quiz 类中,我有一个创建 DOM 元素的 createFieldsRadio 函数。
我正在挂起单击事件,将鼠标指向/移动到那里。
第一次点击

if (clickCounter === 1) {
  fieldRadio.classList.add('active');
  arrFields.forEach(item => {
    item.removeEventListener('mouseover', mouseOverFieldRadio);
    item.removeEventListener('mouseout', mouseOutFieldRadio);
  });
}

然后我尝试遍历页面上的 DOM 元素数组并删除它们的事件侦听器。
但由于某种原因,它们没有被删除。

class Quiz {
  constructor(options) {
    this.formDOM = document.querySelector(`#${options.nameForm}`);
    const radioS = Array.from(this.formDOM.querySelectorAll(`[name=${options.nameInputRadio}]`));
    this.radioS = this.cloneRadios(radioS);
    this.deleteRadios(radioS);
    this.fieldsRadio = this.createFieldsRadio(this.formDOM, this.radioS);
  }

  cloneRadios(radiosDom) {
    return radiosDom.map(item => {
      const newItem = item.cloneNode(true);
      return item.cloneNode(true);
    })
  }

  deleteRadios(radiosDom) {
    for (let i = radiosDom.length - 1; i > -1; i--) {
      radiosDom[i].remove();
      radiosDom.splice(i, 1);
    }
  }

  createFieldsRadio(formDOM, radiosDom) {
    const arrFields = [];
    let clickCounter = 0;

    for (let i = 0; i < radiosDom.length; i++) {
      const fieldRadio = document.createElement('div');

      const mouseOverFieldRadio = (e) => {
        fieldRadio.classList.add('hover');
      }
  
      const mouseOutFieldRadio = (e) => {
        fieldRadio.classList.remove('hover');
      }

      fieldRadio.classList.add('fieldRadio');
      fieldRadio.innerHTML = `
        <div class="fieldRadio__text">${radiosDom[i].value}</div>
        <div class="fieldRadio__voting"></div>
      `;
      fieldRadio.addEventListener('click', (e) => {
        clickCounter++;
        if (clickCounter === 1) {
          fieldRadio.classList.add('active');
          arrFields.forEach(item => {
            item.removeEventListener('mouseover', mouseOverFieldRadio);
            item.removeEventListener('mouseout', mouseOutFieldRadio);
          });
        }
      });

      fieldRadio.addEventListener('mouseover', mouseOverFieldRadio);
      fieldRadio.addEventListener('mouseout', mouseOutFieldRadio);
      arrFields.push(fieldRadio);
      formDOM.append(fieldRadio);
    }
    return arrFields.slice();
  }

  getStatistics() { // тут получение данных из бд
    return {
      "Интроверт": 3,
      "Экстраверт": 4,
      "Не знаю": 2
    };
  }
}

const newQuiz = new Quiz({
  nameForm: 'whoAreYouForm',
  nameInputRadio: 'whoAreYou'
});
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  /* margin: 0;
  padding: 0; */
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

h2 {
  font-weight: normal;
}

p {
  line-height: 1.6;
}

main {
  padding: 40px 0;
}

.container {
  display: block;
  width: 100%;
  padding: 0 10px;
  max-width: 1000px;
  margin: 0 auto;
}

.code {
  color: #242729;
  background-color: #e4e6e8;
  padding: 2px 4px;
  border-radius: 3px;
}

.form {
  padding: 15px;
  box-shadow: inset 0 0 0 1px #dce1e6;
  border-radius: 8px;
  max-width: 300px;
}

.form > * + * {
  margin-top: 10px;
}

.form__header {
  line-height: normal;
  margin: 0 0 15px 0;
}

.fieldRadio {
  background-color: #e5ebf1;
  padding: 6px 75px 8px 10px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s linear;
}

.fieldRadio.active {
  background-color: #c5d0db !important;
}

.fieldRadio__text {

}

.fieldRadio__voting {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /* background-color: red; */
}

.fieldRadio.hover {
  background-color: #d3d9de;
}
<form class="form" id="whoAreYouForm">
  <p class="form__header">Кто ты?</p>
  <input name="whoAreYou" type="radio" value="Интроверт">
  <input name="whoAreYou" type="radio" value="Экстраверт">
  <input name="whoAreYou" type="radio" value="Не знаю">
</form>

javascript
  • 1 个回答
  • 10 Views

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5