ioprst提出的问题

ioprst

Asked: 2021-10-13 13:50:36 +0000 UTC

如何隐藏父元素之外的伪元素？

-1

有必要实现“斜角”按钮的填充。为此，我使用before，这是一个旋转一定角度的矩形，当您将鼠标悬停在按钮上时，其大小会增加。

.auth {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 20px 45px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: #191919;
  /* background-color: #fff; */
  background-color: transparent;
  border: 1px solid #191919;
  border-radius: 5px;
  cursor: pointer;
  outline: 0;
  transition: background-color 0.2s linear, color 0.2s linear;
}

.button:hover {
  color: #fff;
  /* background-color: #191919; */
}

.button::before {
  position: absolute;
  left: -50%;
  top: -100%;
  transform: rotate(-10deg);
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  content: '';
  background-color: red;
  transition: width 0.2s linear, height 0.2s linear;
}

.button:hover::before {
  width: 160%;
  height: 250%;
}

<div class="auth">
  <button class="button" type="submit">Войти</button>
</div>

如何使矩形不出现在按钮之外？

ioprst

Asked: 2020-08-28 15:26:19 +0000 UTC

常用表达。获取传递给 addEventListener 方法的事件处理程序

0

需要在JS代码中找到该方法的使用方法addEventListener。

结构：объект.addEventListener(' событие', обработчик, другие_параметры_при_наличии)

处理程序可以是先前声明的函数（名称），也可以是带有声明（function）的函数本身。

我有以下正则表达式

import re
from pprint import pprint
 
REX_ADD_EVENT_LISTENER = re.compile(
    r'\s*([A-Za-z0-9_]+).addEventListener\s*\('
    r'\s*[\'"`]([a-z]+)[\'"`]\s*,'
    r'\s*([A-Za-z0-9_]+|function\s*\(([^)]*)\)\s*{\s*(.+?)})\s*'
    r',?\s*(.+)?\);?'
)
 
js_code = '''\
ctr_switch.addEventListener('mousedown', onMouseDown, false);
 
ctr_switch.addEventListener('mouseup', onMouseUp, false);
 
ctr_switch.addEventListener('mouseout', function() {
  if (flag) {
    setSignal("status", false);
    flag = false;
  }
}, false);'''
 
pprint(REX_ADD_EVENT_LISTENER.findall(js_code))
# [('ctr_switch', 'mousedown', 'onMouseDown', '', '', 'false'),
#  ('ctr_switch', 'mouseup', 'onMouseUp', '', '', 'false'),
#  ('ctr_switch', 'mouseout', 'function', '', '', '(')]

如果处理程序是一个函数名，一切正常（尽管结果中有额外的空行），但拉出一个定义的函数function是不可能的（你还需要这个函数的主体）。

请告诉我如何修改正则表达式。

不需要搜索箭头函数。

我使用以下正则表达式得到一个简单的函数：

import re
from pprint import pprint

REX_FUNCTION = re.compile(
    r'(?ms)function\s+([A-Za-z0-9_]+)\s*\([^)]*\)\s*{\s(.+?)^}')

js_code = '''\
function onMouseDown() {
  setSignal("status", true);
  flag = true;
}

ctr_switch.addEventListener('mousedown', onMouseDown, false);'''

pprint(REX_FUNCTION.findall(js_code))
#   название функции                       тело
# [('onMouseDown', '  setSignal("status", true);\n  flag = true;\n')]

可以从 addEventListener 获得大致相同的函数结果（当然，没有名称）。

ioprst

Asked: 2020-08-13 20:14:28 +0000 UTC

如何在 SVG 文本中保留空格

1

有必要在文本元素中插入一个新值。该值可以是从0.0到100.0。那些。每行的最大字符数可以是5. 如果文本长度小于5.

问题是如果字符串中有空格 ( > 1) 的子字符串，它们会被替换为一个空格。找到解决方案：将空格替换为'\u00A0'. 这适用于和形式1.0的22.4字符串，但如果字符串包含所有5字符，即是一个字符串100.0，文本被移动。

如果您在我的代码中更改变量的值，您会看到不同的行为new_value。

如何使文本始终具有相同的格式：Ia: n-пробелов, если нужно значение m-пробелов, если нужно A.

new_value = '5.0';  // обязательно один символ после точки
let max_length = 5;

const len = new_value.length;
new_value = new_value.padStart(len + Math.floor((max_length - len) / 2), ' ');
new_value = new_value.padEnd(max_length, ' ');

new_value = `Ia: ${new_value} A`;

new_value = new_value.replace(' ', '\u00A0');

text = document.querySelector('text');
text.innerHTML = new_value;

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 128 128">
  <rect width="384" height="384" fill="#FFFFFF" stroke="none" id="background"/>
  <g id="root" transform="translate(0,0)">
    <g transform="translate(64,20)">
      <rect x="-56.5" y="-8.5" width="113" height="17" fill="#FFFF00" stroke="#000000" stroke-width="1.0" opacity="1.0"/>
      <text transform="translate(0,4.861111111111111)" fill="#000000" font-family="Consolas" font-size="14pt" text-anchor="middle">Ia: 0.0 &#1040;</text>
    </g>
  </g>
</svg>

ioprst

Asked: 2020-04-01 15:25:25 +0000 UTC

如何正确实现可滚动块？

2

需要在页面上插入一个带有链接的块，如果该块不适合页面，可以滚动该块。很清楚用overflow: auto;. 当我使用表格布局时，一切正常（只是出于某种原因，滚动爬出了块边界）。现在我正在使用网格进行布局。

布局：

在标签列表中有大量链接时，滚动出现的不是标签列表块，而是整个页面

我想得到表格的结果（表格布局）

请告诉我如何实施。谢谢你。

编码

* {
    margin:0;
    padding:0;
}

html, body {
    height: 100%;
    font-family: Consolas, sans-serif;
}

.wrapper {
    display: grid;
    grid-template-areas:
            'header'
            'main'
            'footer';
    grid-template-rows: auto 1fr auto;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.header {
    grid-area: header;
    background-color: #00d3ec; /*delete*/
}

.main {
    grid-area: main;
    display: grid;
    grid-template-areas:
            'tag-list tag-info';
    /*grid-template-columns: auto 1fr;*/
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.footer {
    grid-area: footer;
    background-color: #00d3ec; /*delete*/
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.sub-gird {
    display: grid;
    grid-template-areas:
            'tag-list tag-info';
    grid-template-columns: 200px 1fr;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.tag-list {
    grid-area: tag-list;
    min-width: 200px;
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.tag-list > a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}

.tag-info {
    grid-area: tag-info;
}

.tag-info > table {
    border: 1px solid black;
    border-collapse: collapse;
}

td, th {
    padding: 10px;
    border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">

    <header class="header">
        <p style="text-align: center">Header</p>
    </header>

    <main class="main">

<!--        <div class="sub-grid">-->

            <div class="tag-list">
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
                <a href="#">tag1</a>
            </div>

            <div class="tag-info">
                <table>
                    <tr><th>Параметр</th><th>Значение</th></tr>
                </table>
            </div>

<!--        </div>-->

    </main>

    <footer class="footer">
        <p style="text-align: center">Footer</p>
    </footer>

</div>
</body>
</html>

ioprst

Asked: 2020-03-10 14:29:25 +0000 UTC

弹出队列。消息显示不正确

1

如果发生了某些事件，我需要通知用户。为此，我编写了类似生成模式窗口并将其插入页面正文的内容。

该方法showMessage显示一些消息。

可能会出现这样的情况，即某条消息已经流出（即某事引起showMessage），用户还没有阅读，但是已经有新消息到达。一般来说，您需要组织一个消息队列。也就是说，如果用户关闭消息，队列不为空，那么一条新消息立即飞出。

编码

window.onload = function() {
    setInterval(() => foo(), 3000);  // генерация нового сообщения каждые 3 сек
};
 
cnt = 0;
function foo() {
    showMessage('cnt', cnt);
    cnt += 1;
}
 
messageQueue = [];
 
showMessage.show = false;  // флаг того, что сейчас отображается сообщение
function showMessage(caption, message) {
    // если показывается сообщение, то поместить новое сообщение в очередь     
    if (showMessage.show) {
        messageQueue.push([caption, message]);
        console.log(messageQueue);
        return;
    }
 
    let html = `
<div class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" id="close">&times;</button>
            <h2>${caption}</h2>
        </div>
        <div class="line"></div>
        <div class="modal-body">
            <p>${message}</p>
        </div>
    </div>
</div>
`;
 
    let parser = new DOMParser();
    let doc = parser.parseFromString(html, 'text/html');
    let div_modal = doc.body.firstChild;
    document.body.append(div_modal);
 
    let div_content = document.querySelector("div.modal-content");
    let button_close = document.querySelector("button#close");
 
    function window_onclick(event) {
        if (event.target === div_modal) {
            closeDialog();
        }
    }
    window.addEventListener('click', window_onclick, false);
 
    function button_no_onclick(event) {
        closeDialog();
    }
    button_close.addEventListener("click", button_no_onclick, false);
 
    function closeDialog() {
        window.removeEventListener('click', window_onclick);
        button_close.removeEventListener('click', button_no_onclick);
 
        div_modal.classList.toggle('show-modal');
        div_content.classList.toggle('show-content');
        // удаляем через 0.4 сек, чтобы успела отработать анимация
        setTimeout(function() {
            div_modal.remove();
        }, 0.4 * 1000);
        showMessage.show = false;  // сбрасываем флаг отображения сообщения

        // если очередь не пуста, то через 0.4 сек показать новое сообщение 
        // за 0.4 сек старое сообщение закроется     
        if (messageQueue.length > 0) {
            msg = messageQueue.shift();
            setTimeout(() => showMessage(msg[0], msg[1]), 0.4 * 1000);
        }
    }

    // тут нужна минимальная задержка, чтобы браузер нормально нарисовал анимацию
    // Задержка 4 мс нужна для корректной работы в Firefox (в Chrome и с 1 мс работает)     
    setTimeout(function() {
        div_modal.classList.toggle('show-modal');
        div_content.classList.toggle('show-content');
    }, 4);
    showMessage.show = true;  // установить флаг отображения сообщения
}

/*
        Modal dialog
        */
 
        /* The Modal (background) */
        .modal {
          position: fixed;
          z-index: 1;
          padding-top: 100px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0, 0, 0, 0.5);
          opacity: 0;
          -webkit-transition: opacity 0.4s;
          -moz-transition: opacity 0.4s;
          -o-transition: opacity 0.4s;
          transition: opacity 0.4s;
        }
 
        .show-modal {
          opacity: 1;
        }
 
        /* Modal Content */
        .modal-content {
          position: relative;
          background-color: white;
          margin: auto;
          /*padding: 5px 0 10px 0;*/
          border-radius: 6px;
          width: 50%;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          color: #333333;
          top: -300px;
          -webkit-transition: top 0.4s;
          -moz-transition: top 0.4s;
          -o-transition: top 0.4s;
          transition: top 0.4s;
        }
 
        .show-content {
          top: 0;
        }
 
        /* The Close Button */
        .close {
          color: #cbcbcb;
          float: right;
          font-size: 28px;
          font-weight: bold;
          border: 0;
          background-color: transparent;
        }
 
        .close:hover,
        .close:focus {
          color: #7f7f7f;
          text-decoration: none;
          cursor: pointer;
        }
 
        .modal-header {
          padding: 10px 16px;
        }
 
        .modal-body {
          padding: 10px 16px;
        }
 
        .modal-footer {
          padding: 10px 16px;
          text-align: right;
        }
 
        .modal-footer > button {
          width: 62px;
          height: 34px;
          background-color: inherit;
          border: 1px solid #cccccc;
          border-radius: 4px;
        }
 
        .modal-footer > button:hover {
          background-color: #e6e6e6;
          cursor: pointer;
        }
 
        .line {
          width: 100%;
          border-bottom: 1px solid #e5e5e5;
          position: absolute;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button type="button" onclick="showMessage('Header', 'Body')">Show Message</button>
    <button type="button" onclick="alert('Заглушка')">Show Confirm Dialog</button>
</body>
</html>

html 和 css 没有什么有趣的。一切都与 JavaScript 有关：showMessage.

一般来说，一切运作良好。

但是有一种情况（随机，如果用户快速从队列中关闭消息），当消息关闭时，队列不为空，调用下一条消息，页面背景发生变化，消息本身不出现（旧的飞走了，新的没有）。

看起来像这样

可能是什么问题呢？在哪里挖？

PS：0.4 * 1000-打开/关闭模态窗口的动画持续时间（以秒为单位）

PPS：window.onload添加每 3 秒生成一条新消息

ioprst

Asked: 2020-03-04 17:12:18 +0000 UTC

如何使用 CSS 实现模态对话框的平滑关闭？

1

我正在写一个模态对话框。以这段对话为例。但我没有引导程序就做到了。

唯一需要实现的是软关闭效果。

怎么做才对？这可以只用 CSS 完成吗？或者以任何方式没有JS？

还有一点，如何将页眉、正文、页脚之间的线条拉伸到整个块的长度？

function showModal() {
    let div_modal = document.querySelector("div.modal");

    let button_close = document.querySelector("button#close");
    let button_yes = document.querySelector("button#yes");
    let button_no = document.querySelector("button#no");

    function window_onclick(event) {
        if (event.target === div_modal) {
            closeDialog();
        }
    }
    window.addEventListener('click', window_onclick, false);

    function button_yes_onclick(event) {
        // setSignal(signal, value);
        closeDialog();
    }
    button_yes.addEventListener('click', button_yes_onclick, false);

    function button_no_onclick(event) {
        closeDialog();
    }
    button_no.addEventListener('click', button_no_onclick, false);
    button_close.addEventListener("click", button_no_onclick, false);

    function closeDialog() {
        div_modal.style.display = "none";
        // Необходимо удалять назначенные обработчики, иначе они будут накапливаться.
        // Для проверки можно использовать: getEventListeners(object) в консоли Chrome.
        window.removeEventListener('click', window_onclick);
        button_yes.removeEventListener('click', button_yes_onclick);
        button_no.removeEventListener('click', button_no_onclick);
        button_close.removeEventListener('click', button_no_onclick);
    }

    div_modal.style.display = "block";  // показать диалог
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  /*background-color: rgb(0, 0, 0); !* Fallback color *!*/
  /*background-color: rgba(0, 0, 0, 0.5); !* Black w/ opacity *!*/
  animation-name: show-modal;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;  /*сохранить результат анимации*/
}

@keyframes show-modal {
  to {background-color: rgba(0, 0, 0, 0.5)}
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: white;
  margin: auto;
  padding: 0;
  border: 10px solid white;
  border-radius: 6px;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: #333333;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: #cbcbcb;
  float: right;
  font-size: 28px;
  font-weight: bold;
  border: 0;
  background-color: transparent;
}

.close:hover,
.close:focus {
  color: #7f7f7f;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0 16px;
  line-height: 4em;
}

.modal-body {
  padding: 10px 16px;
}

.modal-footer {
  padding: 16px 16px 0 0;  /*top right bottom left*/
  text-align: right;
}

.modal-footer > button {
  width: 62px;
  height: 34px;
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.modal-footer > button:hover {
  background-color: #e6e6e6;
  cursor: pointer;
}

.line {
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>examole</title>
  <meta charset="utf-8">
</head>
<body>

<div class="container">
  <button type="button" onclick="showModal()">Open Modal</button>

  <!-- Modal -->
  <div class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" id="close">&times;</button>
            <h2>Подтверждение</h2>
        </div>
        <div class="line"></div>
        <div class="modal-body">
            <p>Вы уверены, что хотите изменить значение сигнала?</p>
        </div>
        <div class="line"></div>
        <div class="modal-footer">
            <button type="button" id="yes">Да</button>
            <button type="button" id="no">Нет</button>
        </div>
    </div>
  </div>
  
</div>

</body>
</html>

ioprst

Asked: 2020-03-02 19:37:51 +0000 UTC

为什么除了最后一行之外的所有多行文本都向左移动一个字符？

1

1）为什么除了最后一行之外的所有多行文本都向左移动？

<svg xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" version="1.1" viewBox="0 0 448 320" width="100%">
  <rect fill="#FFFFFF" height="320" stroke="none" width="448"/>
  <g id="root" transform="translate(0,0)">
    <g id="graph" transform="translate(64,64)">
      <rect id="background" width="320" height="192" stroke="#000000" stroke-width="1.0" fill="#e0e0e0"/>
      <g id="history" transform="translate(0, 14.666666666666668)" stroke-width="none" font-family="Consolas" font-size="12pt" fill="#000000">
        <text x="320" text-anchor="end">
          <tspan>Abcdefabcd</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
          <tspan x="275.8333333333333" dy="2em" text-anchor="middle">Abc</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
        </text>
        <line stroke="#FFFF00" stroke-width="1.0" x1="231.66666666666666" y1="14.666666666666668" x2="258.1666666666667" y2="14.666666666666668"/>
        <line stroke="#00FF00" stroke-width="1.0" x1="231.66666666666666" y1="29.333333333333336" x2="258.1666666666667" y2="29.333333333333336"/>
        <line stroke="#FF0000" stroke-width="1.0" x1="231.66666666666666" y1="44.0" x2="258.1666666666667" y2="44.0"/>
        <line stroke="#808000" stroke-width="1.0" x1="231.66666666666666" y1="93.83333333333334" x2="258.1666666666667" y2="93.83333333333334"/>
        <line stroke="#008000" stroke-width="1.0" x1="231.66666666666666" y1="109.66666666666669" x2="258.1666666666667" y2="109.66666666666669"/>
        <line stroke="#800000" stroke-width="1.0" x1="231.66666666666666" y1="125.50000000000001" x2="258.1666666666667" y2="125.50000000000001"/>
      </g>
    </g>
  </g>
</svg>

您可以将所有文本（最后一行除外）向左移动一个字符宽度（仅使用等宽字体）。

2）但是如何正确计算第n个字体字符的大小？到目前为止，我只计算了 Consolas 字体的近似系数，但它们并不精确。有没有通用的解决方案？

ioprst

Asked: 2020-02-11 15:24:34 +0000 UTC

将子菜单块拉伸到嵌套元素的最大宽度

2

您需要将嵌套菜单块拉伸到等于最大嵌套元素宽度的宽度（在本例中<li><a>Text<a/></li>）。

* {
    margin:0;
    padding:0;
}

html, body {
  height: 100%;
}

.wrapper {
  height: 100%;
  display: table;
  width: 100%;
}

.header {
  display: table-row;
  height: 0;
}

.main {
  height: 100%;
  display: table;
  width: 100%;
}

.horizontalbar {
  display: table-row;
  height: 0;
}

.box {
  display: table-cell;
}

.sidebar {
  width: 0;
}

.content {
  height: 100%;
}

.content object {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}

.footer {
  display: table-row;
  height: 0;
}

/*
header
*/

nav {
    width: 100%;
    /*margin: 0 auto 30px;*/
    margin: 0 auto 0;
}

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

.topmenu > li {
    display: inline-block;
    margin-right: 20px;
    position: relative;
}

.topmenu > li:last-child {
    margin-right: 0;
}

a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    outline: none;
    transition: .5s linear;
}

/*.fa {*/
/*    color: inherit;*/
/*    padding-left: 10px;*/
/*}*/

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.menubar ul {
    background: #00d3ec;
}

.menubar ul a {
    color: #695753;
}

.menubar .submenu {
    display: none;
    background: #00d3ec;
}

.menubar ul li:hover .submenu {
    display: block;
}

.submenu li a {
    border-bottom: 1px solid rgba(255,255,255,.3);
    color: #695753;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Tmp</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body bgcolor="#FFFFFF">
    <div class="wrapper">
        <div class="header">
            <nav class="menubar">
                <ul class="topmenu">
                    <li><a href="/">Домой</a></li>
                    <li><a href="#">Проекты</a>
                        <ul class="submenu">
                            <li><a href="#">Test</a></li>
                            <li><a href="#">TestTestTestTestTest</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Пользователь</a></li>
                    <li><a href="/logout/">Выход</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>

请参阅“项目”下的子菜单。

如何使菜单填充完全覆盖 TestTestTestTestTest 项（=> 第一项的背景也增加）？

ioprst

Asked: 2020-01-23 15:23:48 +0000 UTC

为什么页面重定向不起作用？

0

我在站点上实现授权，不使用表单，以免将密码发送到服务器。

登录.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Авторизация</title>
    <link rel="stylesheet" href="../static/css/login.css">
    <script type="text/javascript" src="../static/js/crypto-js.min.js"></script>
    <script type="text/javascript" src="../static/js/login.js"></script>
</head>
<body>
    <div class="container">
        <div class="block">
            <p id="autorization">Вход</p>
            <div class="form">
                <p><label>Логин<br><input type="text" id="username"></label></p>
                <p><label>Пароль<br><input type="password" id="password"></label></p>
                <p><label><input type="checkbox" id="remember">Запомнить меня</label></p>
                <p><button id="submit">Отправить</button></p>

                {% for category, message in get_flashed_messages(with_categories=True) %}
                    {% if category == 'error' %}
                        <p class="error-msg">{{ message }}</p>
                    {% endif %}
                {% endfor %}

            </div>
        </div>
    </div>
</body>
</html>

单击“提交”按钮时，将执行 onsubmit 方法。

登录.js：

window.onload = function() {
    let submit = document.querySelector('button#submit');
    submit.addEventListener('click', onsubmit)
};

 function onsubmit() {
        let username = document.querySelector('input#username').value;

        let xhr = new XMLHttpRequest();
        let send = JSON.stringify({'username': username});
        xhr.open('POST', '/get-password-data', true);
        xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
        xhr.send(send);

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                let data = JSON.parse(xhr.responseText);
                if ('salt' in data && 'hash' in data) {
                    let password = document.querySelector('input#password').value;
                    let remember = document.querySelector('input#remember').value === 'on';
                    let hash = CryptoJS.PBKDF2(password, data.salt,
                        {keySize: 512/32, hasher: CryptoJS.algo.SHA512, iterations: 10000});
                    let xhr = new XMLHttpRequest();
                    let send = JSON.stringify({
                        'username': username,
                        'hash': hash.toString(),
                        'remember': remember
                    });
                    xhr.open('POST', '/login/', true);
                    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
                    xhr.send(send);
                    xhr.onreadystatechange = function() {
                        console.log(xhr.readyState, xhr.responseText)
                    }
                }
            }
        }
    }

整个事情由 Flask 应用程序处理。

身份验证/views.py

@auth.route('/get-password-data', methods=['POST'])
def get_password_data():
    data = request.get_json()  # {'username': username}
    username = data['username']
    user = db.session.query(User).filter(User.username == username).first()
    if user:
        response = {
            'salt': user.password_salt,
            'hash': user.password_hash
        }
        return json.dumps(response), 200, {'ContentType': 'application/json'}
    return (json.dumps({'message': 'No user'}), 200,
            {'ContentType': 'application/json'})

@auth.route('/login/', methods=['POST', 'GET'])
def login():
    if current_user.is_authenticated:
        return redirect(url_for('main.index'))

    if request.method == 'POST':
        # data == {'username': str, 'hash': str, 'remember': bool}
        data = request.get_json()
        user = db.session.query(User).filter(
            User.username == data['username']).first()
        if user and user.password_hash == data['hash']:
            login_user(user, remember=data['remember'])
            return redirect(url_for('main.index'))
        flash(u'Неверный логин/пароль', 'error')
        return redirect(url_for('auth.login'))
    return render_template('login.html')

当用户输入错误的密码时，应该会重定向到 /login/ + 显示错误消息（请参阅模板中的消息循环）。如果用户输入了正确的密码，那么应该会重定向到 main.index ('/') 页面。

这没有发生。那些。输入正确密码时，页面不会转到'/'，但用户被认为是授权的，因为。如果您自己重新启动页面，/login/ 将重定向到'/'（这是由于登录功能开头的条件）。好吧，如果您输入了错误的密码，也不会发生任何事情。但是，如果您显示服务器对 POST 请求 /login/ 的响应，您可以看到返回应该发生重定向的页面。

以前，当我使用授权表单时，一切正常，而“/login/”处理程序看起来像这样：

class LoginForm(FlaskForm):
    username = StringField("Username", validators=[DataRequired()])
    password = StringField("Password", validators=[DataRequired()])
    remember = BooleanField("Remember Me")
    submit = SubmitField()

@auth.route('/login/', methods=['POST', 'GET'])
def login():
    if current_user.is_authenticated:
        return redirect(url_for('main.index'))

    form = LoginForm()
    if form.validate_on_submit():
        user = db.session.query(User).filter(
            User.username == form.username.data).first()
        if user and user.check_password(form.password.data):
            login_user(user, remember=form.remember.data)
            return redirect(url_for('main.index'))

        flash(u'Неверный логин/пароль', 'error')
        return redirect(url_for('auth.login'))
    return render_template('login.html', form=form)

问：为什么重定向不起作用？

ioprst

Asked: 2020-01-20 13:48:15 +0000 UTC

使用 CSS 动画时如何设置轴心点

5

使用 CSS 动画时如何将枢轴点设置为中心？

transform-origin: center center;没有帮助

<svg xmlns:ev="http://www.w3.org/2001/xml-events"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg" 
          baseProfile="full" height="100%" version="1.1" 
          viewBox="0 0 1024 768" width="100%">
    	<defs>
    		<style type="text/css">
    			@keyframes rotate {
    				0% {transform: rotate(0deg); transform-origin: center center;}
    				100% {transform: rotate(360deg); transform-origin: center center;}
    
    				0% {fill: #ffff00;}
    				50% {fill: #ff0000;}
    				100% {fill: #ffff00;}
    			}
    			.d {
    				animation: rotate 1s linear infinite;
    			}
    		</style>
    	</defs>
      <rect x="250" y="250" width="100" height="100" class="d"/>
    </svg>

ioprst

Asked: 2020-12-17 16:10:46 +0000 UTC

在python中返回一个C字符串数组

0

有一个C文件：

#include <stdio.h>
#include <stdlib.h>

#define NUMBER_OF_STRING 4
#define MAX_STRING_SIZE 1024

int func(const char **arr) {
    // char **arr = malloc(5 * sizeof(char*));
    arr[0] = "String 0";
    arr[1] = "String 1";
    arr[2] = "String 2";
    arr[3] = "String 3";
    arr[4] = "String 4";
    return 0;
}

int main () {
   // char **mas;
   // func(mas);
   // for (int i = 0; i < 5; i++) {
   //   printf("%s\n", mas[i]);
   // }
   return 0; 
}

如何通过ctypes在python中获取func函数的结果？

草图 py (2.7) 文件

import ctypes

lib = ctypes.CDLL("d:\\project\\C\\untitled\\main.so")

# buf = ctypes.create_string_buffer(b'0')
buf = (ctypes.c_char * 1024)()
# buf = (ctypes.c_char_p * 1024)()

res = lib.func(buf)

print(res)
print buf.value  # == 'D@�gM@�gV@�g_@�gh@�g'

ioprst

Asked: 2020-06-03 01:48:01 +0000 UTC

麻木。傅里叶变换。谐波次数

0

使用 np.fft.ifft 时是否有严格的谐波次数规则？信号的 0 次谐波应该是输入数组的第一个元素吗？假设我有 5 个信号谐波：-2 -1 0 1 2。将它们传递给 np.fft.ifft 函数以获得正确结果的顺序应该是什么？

ioprst

Asked: 2020-01-30 16:50:25 +0000 UTC

cefpython3 js和python连接

0

蟒蛇 3.4。图形用户界面 - wxPython。

有必要以 SVG 文档中声明的像素为单位计算文本的大小。

<svg viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg" id="svg" height="100%" width="100%">
  <text font-family="{font}" font-size="{size}" id="user_text">{text}</text>
</svg>

Python 和 wxPython 无法做到这一点。wxPython 允许您定义将占用具有特定字体、大小等的文本的尺寸，但它们对于 SVG 不正确（据我了解，由于 svg 文档缩放）。

找到了一种通过 JS 计算文本大小的方法：

let text = document.getElementById("user_text");
let box = text.getBBox();
let w = box.width;
let h = box.height;

该解决方案给出了正确的结果。

我需要在我的 Python GUI 程序中使用 JS 中计算出来的值。

wxPython 中内置的网络引擎并没有把它拉出来（有一些旧的 IE）。

他们建议图书馆 cefpython3 - Chromium Embedded Framework。它允许您将浏览器连接到 GUI。这很好用。

正如我从教程中了解到的，您可以通过首先声明它们来从 Python 调用 JS 方法。GitHub/示例

但是我没有办法实现一种机制，以便在执行一个 JS 函数后，将结果返回给 Python 并使用它。

这甚至可能吗？如果是，请告诉我，在哪个方向挖掘。

ioprst

Asked: 2020-01-28 20:18:40 +0000 UTC

wxpython。在自己的浏览器中执行脚本

0

为什么脚本不能完全运行（脚本在常规浏览器中运行）？标有“否”评论。并且 SVG 不会在页面上呈现。我需要使用 Python 确定“文本”svg 元素的大小。我能以某种方式解决这个问题吗？

import wx 
import wx.html2 
html_string = """
<!DOCTYPE htm>
<html>
    <head>
       <title>Hello World!</title>
    </head>
    <body>
        <svg viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg" id="svg" height="100%" width="100%">
          <rect transform="translate(64,128)" width="27" height="64" stroke-width=".5" fill="#ff0" stroke="#000" id="rect"/>
          <text font-family="monospace" font-size="16" transform="translate(64,141)" id="tsvg">Test Text</text>
        </svg>
        <script type="text/javascript">
            var text = document.getElementById('tsvg');
            alert(text); // ok
            var tw = text.getComputedTextLength();
            alert(tw); // no
            var box = text.getBBox();
            var w = box.width;
            var h = box.height;
            alert(w+" "+ h); // no
        </script>
    </body>
</html>
"""
class MyBrowser(wx.Dialog): 
  def __init__(self, *args, **kwds): 
    wx.Dialog.__init__(self, *args, **kwds) 
    sizer = wx.BoxSizer(wx.VERTICAL) 
    self.browser = wx.html2.WebView.New(self) 
    sizer.Add(self.browser, 1, wx.EXPAND, 10) 
    self.SetSizer(sizer) 
    self.SetSize((700, 700)) 
if __name__ == '__main__': 
  app = wx.App() 
  dialog = MyBrowser(None, -1) 
  dialog.browser.SetPage(html_string, '')
  dialog.Show() 
  app.MainLoop()

ioprst

Asked: 2020-11-22 18:55:02 +0000 UTC

将桌子推到容器顶部

0

有一个页面

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>testPrj</title>
    <style>
        .wrapper {
          height: 100%;
          display: table;
          width: 100%;
        }

        .header {
          display: table-row;
          height: 1px;
        }

        .main {
          height: 100%;
          display: table;
          width: 100%;
        }

        .horizontalbar {
          display: table-row;
          height: 0px;
        }

        .box {
          display: table-cell;
        }

        .sidebar {
            width: 0px;
        }

        .sidebar table {
            /*height: 100%;*/
            width: 100%;
            position: relative;
            top: 0;
            border-collapse: collapse;
            /*display: block;*/
        }

        .sidebar table, th, td {
            border: 1px solid black;
        }

        .content {
          height: 100%;
        }

        .content iframe {
          width: 100%;
          height: 100%;
          border: none;
          margin: 0;
          padding: 0;
          display: block;
        }

        .footer {
          display: table-row;
          height:1px;
        }

        /* Basic Style*/
        * { 
            margin:0;
            padding:0;
        }

        html, body {
          height: 100%;
        }

    </style>
</head>

<body bgcolor="#FFFFFF">
    <div class="wrapper">

        <div class="header">
            <a href="testTable.html">Untitled</a>
        </div>

        <div class="main">

            <div class="horizontalbar"></div>

            <div class="box sidebar"></div>

            <div class="box content">
                <iframe frameborder="0" marginwidth="0" marginheight="0" src="test.svg" id="test_0Id"></iframe>
            </div>

            <!--<div class="box sidebar"></div>-->

            <div class="box sidebar">
                <table cellpadding="5">
                    <caption>Список переменных и их значения</caption>
                    <tr>
                        <th>Переменная</th>
                        <th>Значение</th>
                    </tr>
                    <tr>
                        <td>mon1</td>
                        <td><div contenteditable="true">false</div></td>
                    </tr>
                    <tr>
                        <td>mon2</td>
                        <td><div contenteditable="true">false</div></td>
                    </tr>
                </table>                
            </div>

            <div class="horizontalbar"></div>
        </div>

        <div class="footer">Footer text</div>

    </div>

    <script type="text/javascript" src="test_0.js"></script>
</body>
</html>

显示以下结果

像桌子一样（左下），抬起。尝试了各种位置（+顶部）选项，没有任何效果。

ioprst

Asked: 2020-08-17 21:39:42 +0000 UTC

将位图添加到 svg [重复]

3

有没有办法将位图插入 svg 文件？
我找到了 tag <image>，但是有了这样一个条目，一些对象被添加到 svg （它在inkscape中突出显示），但只是一个白色背景：

<image src="D:\project\хлам\image.png" height="79.375" width="79.375" />

我直接在编辑器中添加了一张图片（粘贴）如果我通过记事本打开 svg（一大堆字符），我会得到一张非常可怕的图片：

xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAA3mklEQVR42uzcXYhMcRjHcReKG5Qr
JYplLUvZsKy3jYS4QIlahbznbUXLXkit9ZbVuuAGRcSV4kK2vRHtzVJkhfUyM2TJnNnZ2dmXmfG2
5vH8z56NKKzNzJ4z30/92qlpr57/+c05/zln+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA...

在这种精神下还有 230 行。

ioprst

Asked: 2020-08-02 19:49:35 +0000 UTC

SVG。不同的文字颜色

0

是否有可能在一个“文本”元素中以不同的颜色突出显示不同的参与者？单词示例：

ioprst

Asked: 2020-07-17 13:56:02 +0000 UTC

svg 文本填充超出字符边界

4

请告诉我，有什么问题（或者我不明白）。有 SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   height="100%"
   style="background:#FFFFFF"
   version="1.1"
   viewBox="0 0 1024 1024"
   width="100%"
   id="svg59"
   sodipodi:docname="Auto.svg"
   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
  <metadata
     id="metadata63">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs id="defs32">
    <style type="text/css" id="style9">
    .default_default {
      fill: #808080;
      stroke: #000000;
      stroke-width: 0.5px;
    }
</style>
    <filter height="1" id="filter.808080" width="1" x="0" y="0">
      <feFlood flood-color="#808080"/>
      <feComposite
         in="SourceGraphic"/>
    </filter>
    <filter height="1" id="filter.FF00FF" width="1" x="0" y="0">
      <feFlood flood-color="#FF00FF"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="root" transform="translate(0,0)">
    <text id="c9_5_1_text_0" transform="translate(576,384)" fill="#000000" font-family="Times New Roman" font-size="22pt" filter="url(#filter.808080)">
      <tspan x="0" dy="0em" id="tspan52">Test</tspan>
    </text>
    <text id="c5_3_1_text_0" transform="translate(320,256)" fill="#000000" font-family="Times New Roman" font-size="36pt" filter="url(#filter.FF00FF)">
      <tspan x="0" dy="0em" id="tspan55">0</tspan>
    </text>
  </g>
</svg>

文本在编辑器中打开时显示如下：

将 svg 添加到页面：

<iframe frameborder="0" marginwidth="0" marginheight="0" src="Auto.svg" id="AutoId"></iframe>

加载页面时，它filter不是沿边框填充文本，而是更多（明显是上方和下方）：

ioprst

Asked: 2020-06-29 15:58:36 +0000 UTC

wxpython。确定光标下的页面

0

我正在将 wxpython 用于 Windows 应用程序。有一个类——LibPalette，继承自wx.Notebook。这是视口

你可以看到两个页面测试和控制。每个页面也是一个类。使用 AddPage() 方法添加页面。将鼠标悬停在选项卡上时，我想显示一个提示。

问题是：如何确定鼠标光标悬停在什么地方？

可以使用 self.GetPageText(self.GetSelection()) 方法并通过 id-shnik 确定页面，但这仅适用于特定的选定页面。而且，无论我们现在在哪个页面上，我都希望显示光标悬停在其上的页面的数据。有可能以某种方式做到这一点吗？

另外，如果有人知道，请告诉我当你用人民币点击它时如何转到另一个页面？我声明了 self.Bind(wx.EVT_RIGHT_DOWN, self.OnRightClick) 事件，但我无法切换到另一个输入（我试图生成 LMB 点击事件，但没有帮助）。

ioprst

Asked: 2020-06-28 16:53:24 +0000 UTC

Wxpython：根据变量值更改窗口属性

1

该类有一个标志变量isChanged，它采用值True/ False。此变量将其状态истину更改为对项目进行某些更改以及ложь保存项目的时间。是否可以以某种方式跟踪此变量的值更改的时刻，以便根据其值使按钮（例如，保存）处于活动状态或不活动状态。你能以某种方式产生一个事件吗？

如何隐藏父元素之外的伪元素？

常用表达。获取传递给 addEventListener 方法的事件处理程序

如何在 SVG 文本中保留空格

如何正确实现可滚动块？

弹出队列。消息显示不正确

如何使用 CSS 实现模态对话框的平滑关闭？

为什么除了最后一行之外的所有多行文本都向左移动一个字符？

将子菜单块拉伸到嵌套元素的最大宽度

为什么页面重定向不起作用？

使用 CSS 动画时如何设置轴心点

在python中返回一个C字符串数组

麻木。傅里叶变换。谐波次数

cefpython3 js和python连接

wxpython。在自己的浏览器中执行脚本

将桌子推到容器顶部

将位图添加到 svg [重复]

SVG。不同的文字颜色

svg 文本填充超出字符边界

wxpython。确定光标下的页面

Wxpython：根据变量值更改窗口属性

我看不懂措辞

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

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

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

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

Python解析野莓

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

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

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

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

ioprst's questions