Как сделать что бы при двойном нажатии круг разделялся на 4 части и чтобы они подсвечивались как в видео по ссылке

@Lilpump · Регистрация: 13.02.2020

Студворк — интернет-сервис помощи студентам

по ссылке вы можете ознакомится как это должно выглядеть

https://yadi.sk/i/OQVTboqNkiDA2w

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html lang="ru">
 
<head>
    <title>Redactor marshrutov</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="menu1.css">
</head>
 
<body>  
    <section class="section">
        <div class="container">
            <div class="circle" id="circle">
            </div>
        </div>
        <div class="dbclick">
              
        </div>
    </section>
    <script type="text/javascript" src="menu1.js">
    </script>
</body>
 
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body{
    background-color: #333;
}
.container{
    max-width: 1440px;
    max-height: 900px;
    margin: 0 auto;
}
.circle {
    position: absolute;
    
    
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let dragMode = false;
circle.addEventListener('mousedown', function (e) {
    dragMode = true;
});
circle.addEventListener('mouseup', function (e) {
    dragMode = false;
});
document.addEventListener('mousemove', function (e) {
    if (dragMode) {
        circle.style.left = e.clientX - 50 + 'px';
        circle.style.top = e.clientY - 50 + 'px';
    }
});

@j2FunOnly · 20.02.2020, 08:35

Не по теме:

Где вы берёте такие задания, если не секрет?

@Lilpump · 20.02.2020, 08:40 **[ТС]**

а это подготовка к word skills

@zontik24 · 20.02.2020, 16:48

На 3 части, 4 допишите тогда сами

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="circle-empty"></div>
<ul class="circle">
  <li>
    <div class="text">1</div>
  </li>
  <li>
    <div class="text">2</div>
  </li>
  <li>
    <div class="text">3</div>
  </li>
  <ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
.circle-empty {
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  cursor: pointer;
}
.circle {
  position: relative;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}
li {
  overflow: hidden;
  position: absolute;
  top: -20%;
  right: -20%;
  width: 70%;
  height: 70%;
  transform-origin: 0% 100%;
}
.text {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  text-align: center;
  transform: skewY(-60deg) rotate(15deg);
  padding-top: 20px;
}
li:first-child {
  transform: rotate(0deg) skewY(30deg);
}
li:nth-child(2) {
  transform: rotate(120deg) skewY(30deg);
}
li:nth-child(3) {
  transform: rotate(240deg) skewY(30deg);
}
li:first-child .text {
  background: green;
}
li:nth-child(2) .text {
  background: tomato;
}
li:nth-child(3) .text {
  background: aqua;
}

JavaScript
1
2
3
4
5
6
7
8
9
const circle = document.querySelector(".circle");
const circleEmpty = document.querySelector(".circle-empty");
 
circle.style.display = "none";
 
circleEmpty.addEventListener("dblclick",  () => {
  circle.style.display = "block";
  circleEmpty.style.display = "none";
});

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@j2FunOnly
	20.02.2020, 08:35
	Не по теме: Где вы берёте такие задания, если не секрет? 0

@Lilpump 0 / 0 / 0 Регистрация: 13.02.2020 Сообщений: 7
	20.02.2020, 08:40 [ТС]
	а это подготовка к word skills 0