Air提出的问题

Air

Asked: 2022-05-02 15:33:34 +0000 UTC

你能帮我把这个css预加载器重写为svg吗？

4

主要的是这个预加载器对于任何扩展都应该是一样的，而且符号也应该有一个渐变。当然，这可以在上实现css，但这仍然是一种变态......

预先感谢您的帮助...

document.querySelector(".circle").innerHTML = "Loading..."
  .split("")
  .map((e, i) => `<span style="--rot:${i * 11}deg">${e}</span>`)
  .join("");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

html,
body {
  height: auto;
  min-height: 100vh;
  background-color: #272727;
  color: burlywood;
  font-size: 2vw;
  border: 1px solid transparent;
}

body * {
  /* border: 1px solid red; */
}

.circle {
  margin: 100px auto;
  width: 20vw;
  height: 20vw;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.circle::after,
.circle::before {
  position: absolute;
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  /*
        */
}

.circle::after {
  animation: rott 1s ease infinite;
  background: linear-gradient(130deg, red 20%, purple 70%);
  background-position: -42px -29px;
  background-repeat: no-repeat;
  border: 30px solid #272727;
  box-sizing: border-box;
  border-top: 30px solid transparent;
  border-left: 30px solid transparent;
  background-size: 132% 120%;
}

.circle::before {
  background-color: #272727;
  transform: translate(-50%, -50%);
  z-index: 4;
  left: 50%;
  top: 50%;
  width: calc(20vw - 30px);
  height: calc(20vw - 30px);
}

span {
  z-index: 9;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  width: 30px;
  height: 100%;
  position: absolute;
  padding: 60px 0 0 0;
  top: 50%;
  left: 50%;
  transform-origin: 6px 56% 0;
  transform: translate(-50%, -50%) rotate(var(--rot));
}

span:nth-child(8) {
  animation: opa 1s ease 0s infinite;
}

span:nth-child(9) {
  animation: opa 1s ease 0.2s infinite;
}

span:nth-child(10) {
  animation: opa 1s ease 0.5s infinite;
}

@keyframes rott {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes opa {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="circle"></div>

Air

Asked: 2022-02-09 11:33:29 +0000 UTC

NodeJS中如何实现自动跟踪目录（文件夹）中的内容变化？

1

同事，我有这样的功能，

const getFiles = (dir, files_) => {
  files_ = files_ || [];
  let files = fs.readdirSync(dir);
  for (var i in files) {
    var name = dir + '/' + files[i];
    if (fs.statSync(name).isDirectory()) {
      getFiles(name, files_);
    } else {
      files_.push(name);
    }
  }
  return files_;
};

console.log(getFiles('./frontend/multimedia/image'));

这很好用，但是我如何告诉这个函数来观察文件夹内容的变化（删除或添加文件）？

唯一想到的就是跑getFiles('./frontend/multimedia/image') 进去setInterval()。

我知道这不是最好的方法...

那么如何不重启这个功能，而是在里面实现文件夹跟踪呢？

Air

Asked: 2020-04-06 16:51:34 +0000 UTC

如何为 webpack-dev-server 正确设置 publicPath 的路径

1

有汇编...

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


const webpackConf = {
    entry: './frontend/app/app.js',
    output: {
        path: path.resolve(__dirname, './production'),
        filename: 'bundle.js',
        publicPath: 'production/'
    },
    devServer: {
        port: 80,
        overlay: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: './index.html', // Комментарий №1 
            template: './frontend/main_pages/tamplate_en.html',
            title: "Index"
        }),
        new CleanWebpackPlugin()
    ]
};


module.exports = () => {
    return webpackConf;
};

一切正常，但是一旦我更改创建路径index.html （请参阅代码中上面的注释＃1），publicPath: 'production/'它就看不到index.html

我没试过的

publicPath: '生产/主页/'

publicPath: '主页/'

这就是我得到的...

我想出的唯一一件事就是改变创建路径index.html

当production您设置一条路径时，当development另一条...

这是正确的解决方案，还是有更简单的方法来解决这个问题？

补充...

生产程序集将转到此文件夹

路径：path.resolve(__dirname, './production'),

如果我有插件

new HtmlWebpackPluginindex.html在根目录创建production文件夹，然后一切正常，但我需要new HtmlWebpackPlugin 来创建production/main-pages/index.html文件夹

所以，当index.html不在production文件夹的根目录下，而是在production/main-pages/文件夹中时， devServer 看不到index.html，`publicPath: 'production/' 不起作用

Air

Asked: 2020-03-13 13:49:37 +0000 UTC

如何制作阴影（投影）渐变

1

有这样一个例子。

window.addEventListener('mousemove', e => {
  i.style.filter = 'drop-shadow(' + e.clientX / 100 + 'px ' + e.clientY / 100 + 'px 5px rgb(' + e.clientX / 3 + ' ' + e.clientX / 3 + ' ' + e.clientY / 3 + ' ))';
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background-color: #272727;
}

div#i {
  width: 100%;
  height: 100%;
  filter: drop-shadow(10px 1px 3px red);
  background-image: url('https://precisiongrinding.com/wp-content/uploads/2016/12/Global-Map.png');
  background-repeat: no-repeat;
  background-size: cover;
}

<div id="i"></div>

我怎样才能实现这个例子，使图像的阴影是渐变的？

Air

Asked: 2020-02-15 17:03:08 +0000 UTC

类中 Array.map() 方法的行为不清楚 [重复]

0

每个人...

我有一个class。

我不明白为什么突然在getName这个类的方法中该方法的行为很奇怪Array.map()

要查看问题，请取消注释底行并注释掉最上面的行。

唯一的区别在于{}花括号。

但是getData()不存在这样的问题...

//const arrayHtml = fs.readdirSync(path.resolve(__dirname, templateDir));

const arrayHtml = ['index.html', 'dash.html', 'zoo.html'];
class DataSiteConfig {
  constructor(folder, favicon) {
    this.name = name;
    this.favicon = favicon;
    this.folder = folder;
    this.pageList = [];
  }
  getName(dirNameFiles) {
    this.name = dirNameFiles.map((s, i, arr) => s.slice(0, -5));
  //this.name = dirNameFiles.map((s, i, arr) => {s.slice(0, -5)});
  }

  getData() {
    this.name.map((s, i, arr) => {
      this.pageList.push({
        title: s,
        template: `frontend/html/${s}.html`,
        filename: `pages/${s}.html`

      })
    })
  }
}

let dataSiteConfig = new DataSiteConfig('Zona', 'Chtoto.png');
dataSiteConfig.getName(arrayHtml);
dataSiteConfig.getData();
console.log("TCL: dataSiteConfig", dataSiteConfig);

谁能告诉我为什么...

Air

Asked: 2020-01-31 22:04:01 +0000 UTC

SVG 路径元素看不到水平渐变

2

有这样一个例子，免得解释半天，把最后一个坐标改一下，看看会发生什么。

js，和这个问题无关(смотреть пример 2)，一个改变最后一个坐标的函数path，只是为了方便看问题的人看问题。

至于替换path为rect，它不起作用......这是一个大型综合体的一小部分，您无法替换path为rect。

const input = document.querySelector('input');
document.querySelector('.path').setAttribute('d', 'M5 250 495 ' + input.value);
input.addEventListener('input', function() {
  document.querySelector('.path').setAttribute('d', 'M5 250 495 ' + input.value);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background-color: #272727;
}

div.wrapper {
  height: 500px;
  background-color: #10e7dd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

input {
  height: 50px;
  width: 100px;
  text-align: center;
  font-size: 25px;
}

svg {
  background-color: grey;
}

<div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
        <defs>
          <linearGradient id="gradient" x1="0%" x2="100%" y1="0%"  y2="0%">
            <stop offset="0%" stop-color="#f00" />
            <stop offset="100%" stop-color="#00f" />
          </linearGradient>
        </defs>
      <path class="path"  stroke-width="100" stroke="url(#gradient)" fill="none" d="M5 250 495 250.1"/>
      
      </svg>
  <div>
    <input type="number" value="250">
  </div>
</div>

这就是没有 JS 的样子

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background-color: #272727;
}

div.wrapper {
  height: 500px;
  background-color: #10e7dd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

svg {
  background-color: grey;
}

<div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
            <defs>
              <linearGradient id="gradient" x1="0%" x2="100%" y1="0%"  y2="0%">
                <stop offset="0%" stop-color="#f00" />
                <stop offset="100%" stop-color="#00f" />
              </linearGradient>
            </defs>
          <path class="path"  stroke-width="100" stroke="url(#gradient)" fill="none" d="M5 250 495 250"/>
          
          </svg>
</div>

这是什么，bug？如何解决？

Air

Asked: 2020-11-26 15:12:27 +0000 UTC

动画时如何圆角汉堡图标

4

有这样一个例子：

document.querySelector('#svg').addEventListener('click', function() {
  [...document.querySelectorAll('.line')].forEach(s => {
    s.classList.contains('path-line') ?
      s.classList.remove('path-line') :
      s.classList.add('path-line');
  })
})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #272727;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  background-color: black;
}

#path_line_3 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_1 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_2 {
  stroke-dasharray: 30 43;
  stroke-dashoffset: 0;
  transition: all .2s;
}

#path_line_2.path-line {
  stroke-dasharray: 0 30;
  stroke-dashoffset: 0;
}

#path_line_3.path-line {
  stroke-dasharray: 43.4 30;
  stroke-dashoffset: -30;
}

#path_line_1.path-line {
  stroke-dasharray: 43.4 30;
  stroke-dashoffset: -30;
}

<svg id="svg" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 50 50">
        <path id="path_line_1" class="line" d="M 10 10, 40 10, 10 40" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3" />

        <path id="path_line_2" class="line" d="M 25 25, 40 25" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3" />

        <path id="path_line_3" class="line" d="M 10 40, 40 40, 10 10" stroke-linecap="round" fill="transparent" stroke="white	" stroke-width="3" />
        
    </svg>

是否可以将下图中标记的尖角修圆。

Air

Asked: 2020-07-22 17:58:48 +0000 UTC

Angulsrjs 中的控制器和指令交互

1

有一个指令

app.directive('rootElement', function () {
    return {
        restrict: "E",
        controller:'rootElementController',
        templateUrl: undefined,
        link: function (scope, element, attr, ctrl) { 
            console.log(scope.testScope.pages[5]) 
            this.templateUrl = scope.testScope.pages[5];
        }
    }
});

它与某个控制器交互并从后者接收一条线（路径是这样的frontend/pages/page-main/index.html），我需要它才能得到它。这是templateUrl.

我可以link更改函数中的值templateUrl吗？

我按照示例中给出的方法进行了尝试，但是唉，啊（没有用）...

这可以以某种方式实现吗？

提示后，像这样实现

app.directive('rootElement', function () {
    return {
        restrict: "E",
        controller:'rootElementController',
        templateUrl: '<ng-include src="{{testScope.pages[5]}}"></ng-include>',
        link: function (scope, element, attr, ctrl) { 

        }
    }
});

但我收到一个错误

Air

Asked: 2020-07-22 13:03:48 +0000 UTC

为什么 Angularjs 中的控制器看不到它的变量？

1

AngularJS中有这样一个例子，它非常有效。

const app = angular.module('app', []);

app.controller('testController', function($scope) {
  $scope.testScope = ['text-0', 'text-4', 'text-1'];
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html ng-app="app">
<div ng-controller="testController">{{testScope}}</div>

</html>

但如果你稍微改变一下

const app = angular.module('app', []);
app.factory('myFactory', function() {
  return {
    import: (arr, text) => {
      arr.push(text);
    }

  }
});

app.controller('testController', function($scope, myFactory) {
  $scope.myFactory = myFactory;

  $scope.testScope = ['text-0', 'text-4', 'text-1'];

  myFactory.import(testScope, 'P-text');

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html ng-app="app">
<div ng-controller="testController">{{testScope}}</div>

</html>

controller停止看到它的变量...

如何处理，原因是什么？

Air

Asked: 2020-07-19 02:51:24 +0000 UTC

如何在angularjs中编写纯js代码

-1

有一个指令

    app.directive('curSor', function () {
    return {
        restrict: "E",
        template: '<div class="cursor-child"></div>',
        link: function (scope, element, attr) {
            const win = angular.element(window);
            const elem = angular.element(element);
            ///////////////////////////////////////////////////////////
            win.on('click', ()=>{
                elem.children().addClass('cursor-child-active');
                setTimeout(()=>{
                    elem.children().removeClass('cursor-child-active');
                },200);
            });
            ///////////////////////////////////////////////////////////

            win.on('mousemove', function(e){
                elem.css({
                    "top":e.pageY  - "2" +"px",
                    "left":e.pageX  - "2" +"px"
                });
            });
        }
    }
});

当我写这个例子的时候，我不能用 pure 来写JS。

例如

window.addEventListener('click', () => {
  console.log('win');
})

Angularjs 抛出一个错误，说这样的函数addEventListener 不存在。

问题...

是否可以AnguarJS纯编写代码JS？

这值得吗？

PS不想深入研究JQ...）））

不工作的例子...

const app = angular.module('app', []);

app.directive('curSor', function() {
  return {
    restrict: "E",
    template: '<div class="cursor-child">CursorChild</div>',
    link: function(scope, element, attr) {
      const win = angular.element(window);
      const elem = angular.element(element);
      //elem.children().classList.add('cursor-child-active');
      win.addEventListener('click', () => {
        console.log('win');
      })
    }
  }
});

<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>

<body>
  <cur-sor></cur-sor>
</body>

</html>

帮我把Angularjs理解到底，如何正确、称职地写在上面？我意识到最后一个问题太全球化了……

Air

Asked: 2020-06-21 14:24:18 +0000 UTC

如何在 SVG 上实现背景剪辑线性渐变和混合混合模式示例的模拟

3

有一个动画的例子

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #272727;
  background-image: url(https://cdn.oboi7.com/bd48c3217e4d770da198fdff5fb165a3c6c09cd2/devushki-odetta-annable-lica.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  border-top: 1px solid transparent;
}

.test-grad {
  font-size: 7vmax;
  font-family: 'Anton', sans-serif;
  text-align: center;
  margin: 100px auto;
  line-height: 2;
  background-image: linear-gradient(to top, #fff 50%, #272727 50%), linear-gradient(to top, #000 50%, #fff 50%);
  -webkit-background-clip: text, padding-box;
  color: transparent;
  mix-blend-mode: multiply;
  animation: gradient-top 3s linear infinite;
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 1s ease-in-out;
}

@keyframes gradient-top {
  0% {
    background-position: bottom;
  }
  100% {
    background-position: 50% 300%;
  }
}

<div class="test-grad">Test gradient</div>

如何在 SVG 中实现这一点？

有人可能会有疑问А чем не устраивает данная реализация?，问题是它在FF中不起作用。

在 Mozilla 浏览器中运行下面的示例，就会清楚问题所在。

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #272727;
}

.test-grad {
  font-size: 7vmax;
  font-family: 'Anton', sans-serif;
  text-align: center;
  margin: 100px auto;
  line-height: 2;
  background-image: linear-gradient(to top, #fff 50%, #272727 50%), linear-gradient(to top, #000 50%, #fff 50%);
  -webkit-background-clip: text, padding-box;
  color: transparent;
  background-size: 100% 100%;
  background-position: top;
}

<div class="test-grad">Test gradient</div>

但是，如果有一个没有解决方案的解决方案，SVG并且这个示例适用于什么，那FF也很好......

但是有一个解决方案FF，但是没有mix-blend-mode: multiply;，我不知道在哪里添加mix-blend-mode

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #272727;
  background-image: url(https://cdn.oboi7.com/bd48c3217e4d770da198fdff5fb165a3c6c09cd2/devushki-odetta-annable-lica.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  border-top: 1px solid transparent;
}

.wrapper {}

.test-grad {
  margin: 100px auto;
  background-image: linear-gradient(to top, #fff 50%, #27272700 50%);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-size: 100% 200%;
  background-position: top;
  animation: gradient-top 3s linear infinite;
}

.test-grad p {
  color: transparent;
  font-size: 95px;
  font-family: 'Anton', sans-serif;
  text-align: center;
  background-image: linear-gradient(to top, #272727 50%, #fff 50%);
  background-size: 100% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradient-top 3s linear infinite;
}

@keyframes gradient-top {
  0% {
    background-position: bottom;
  }
  100% {
    background-position: 50% 300%;
  }
}

<div class="wrapper">
  <div class="test-grad">
    <p>Test gradient</p>
  </div>
</div>

Air

Asked: 2020-06-21 03:09:25 +0000 UTC

如何在 SVG 中实现来回动画

7

有这样一个例子

<svg width="200px" viewBox="0 0 100 100">
    <style>
    circle {
        fill: url('#grad');
    }
    </style>
    <circle  cx="50" cy="50" r="50" />
    <defs>
        <linearGradient id="grad" x1="0" x2="0" y1="62" y2="0" gradientUnits="userSpaceOnUse">
            <stop offset="23%" stop-color="orangered" />
            <stop offset="100%" stop-color="orange" />
            <animate attributeType="XML" attributeName="y1" from="0" to="150" dur="5s" repeatCount="indefinite" />
        </linearGradient>
    </defs>
</svg>

如何实现动画，使动画从0到150再回到0？

Air

Asked: 2020-06-18 12:10:23 +0000 UTC

是否可以更改 SVG 元素或其克隆的位置？

3

假设我们有一个画布：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
viewBox="0 0 500 500" width="100%" height="100%"></svg>

还有一个元素：

<path d="M0 0 55 122 0 300 300"/>

其位置取决于坐标。

如果这些相同的坐标是一辆马车和一辆小推车，不要全部重写，这样元素就不会显示在画布的左上角，而是显示在画布的右下角。

SVG 中是否有一个容器元素，您可以将该元素path放入其中并将其移动到任何地方以及您想要的方式？

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" width="100%" height="100%"> <path d="M0 0 55 122 0 300 300"/></svg>

Air

Asked: 2020-06-10 15:13:34 +0000 UTC

如何找出元素是同一父级的子级？

0

同事，有两个block同一个class，其中有两个block同一个class

[...document.querySelectorAll('.child')].forEach(s => {
  console.log("s", s);
});

<div class="parent">
  <div class="child">Child-1</div>
  <div class="child">Child-2</div>
</div>
<div class="parent">
  <div class="child">Child-3</div>
  <div class="child">Child-4</div>
</div>

如何找出什么

<div class="child">Child-3</div> <div class="child">Child-4</div>

一个父母的后代？

PS我想指出一件重要的事情，您不应该手动为他们分配不同的类或通过ID确定。因为为此我想知道，为了以编程方式为每个 parent 分配不同的类，有超过 500 个类，手动不是一个选项....

还有一瞬间。可以有两个以上甚至一个子元素...

为了更清楚，我将澄清这个问题......

有一堆元素.parent，其中第N个元素.child。

嗬它可能是

<div class="parent">
  <div class="child">Child-3</div>
  <div class="child">Child-4</div>
</div>
<div class="parent">
  <div class="some-other-class">Some other class</div>
  <div class="some-other-class">Some other class</div>
</div>
<div class="parent">
  <div class="child">Child-3</div>
  <div class="child">Child-4</div>
</div>

当有一个元素.parent没有子元素.child时，不要计算它们......

Air

Asked: 2020-05-13 17:47:18 +0000 UTC

角-1。如何正确循环遍历循环中的元素？

0

同事，为了清楚起见，有这样一个例子

[...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
  s.addEventListener('click', function() {
    [...document.querySelectorAll('.li-example')].forEach((s, i, arr) => {
      arr[i].classList.remove('li-example-active');
    })
    arr[i].classList.add('li-example-active');
  })
})

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 20px;
  letter-spacing: 3px;
}
li.li-example-active{
  background-color: #00c;
}

<menu class="example">
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
  <li class="li-example"><span>Example</span></li>
</menu>

我认为没有必要解释上面示例中发生的事情。

我想知道如何在*Angular-1*

我的尝试...

const app = angular.module('app', []);

app.directive('example', function() {
  return {
    restrict: "C",
    link: function(scope, element, attrs) {
      scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
    }
  }
});

app.directive('liExample', function() {
  return {
    restrict: "C",
    link: function(scope, element, attrs) {
      //element.addClass('li-example-active'); Почему данный вариант **JQUERY** за пределами цикла forEach работает
      angular.forEach(element, i => {
        scope.functionClick = function() {
          i.classList.add('li-example-active'); // хотя прекрасно работает класический вариант js добавления и удаления *class*
          //i.addClass('li-example-active');// а в цикле не работает
        }
      })
    }
  }
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 2.5vmax;
  letter-spacing: 3px;
}

li.li-example-active {
  background-color: #00c;
}

<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
  <li class="li-example" ng-repeat="example in myExample" ng-click="functionClick()"><span>{{example}}</span></li>
</menu>
<html>

以及如何在这个版本中实现这个例子，就像在 JS 的第一个经典版本中一样？？？？这样被点击的元素被分配了类li-example-active，其余的被删除了类li-example-active？？？

另外我想问一下我是否理解正确，没有angular.forEach(element, i => {})像经典版本的js那样的三个参数`Array.forEach（（s，i，arr）=> {}）`，而是一个？

还有一个类似示例的变体，具有不同的实现，也有问题

const app = angular.module('app', []);

app.directive('example', function() {
  return {
    restrict: "C",
    link: function(scope, element, attrs) {
      scope.myExample = ['Example-1', 'Example-2', 'Example-3', 'Example-4', 'Example-5'];
    }
  }
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 2.5vmax;
  letter-spacing: 3px;
}

li.li-example-active {
  background-color: #00c;
}

<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
  <li class="li-example" ng-repeat="example in myExample" ng-click="active = !active" ng-class="active ? '' : 'li-example-active'"><span>{{example}}</span></li>
</menu>
<html>

问题是一样的......以及如何在这个版本中实现这个例子就像在JS的第一个经典版本中一样？？？？

而且这个例子不是很重要，那么简单，对于一般的开发....

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #222;
}

li {
  list-style-type: none;
}

menu {
  display: flex;
  background-color: #999;
  margin: 15px;
}

li.li-example {
  text-align: center;
  cursor: pointer;
  max-width: 200px;
  margin: 5px;
  padding: 5px;
  background-color: #cc0;
  color: white;
  font-size: 2.5vmax;
  letter-spacing: 3px;
}

li.li-example span {
  background-color: green;
}

li.li-example span.span-active {
  background-color: blue;
}

<html ng-app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<menu class="example">
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>
  <li class="li-example" ng-click="active = !active"><span ng-class="active ? '' : 'span-active'">Example</span></li>

</menu>
<html>

问题....为什么在这个变体中没有ng-repeat class="span-active"接收所有元素Span，而不是其父被点击的那个....

Air

Asked: 2020-04-04 12:02:44 +0000 UTC

AngularJS - 未知的提供者错误：eProvider <- e <- testCtrl

1

同事们，在AngularJS中，我是一个绝对的初学者。这是我的第一个例子。

为了不把我有的所有东西都链接到存储库，你可以克隆并运行。

运行开发命令npm run dev

要运行生产命令npm run build 和单独的服务器npm start

（需要安装依赖项中未列出的nodemon ）

现在对于我面临的问题。

有这么一个简短的原始示例

<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sarnor_Club</title>
</head>

<body ng-controller="testCtrl">
    <div id="root">
        <img src="${require(`../image/icons/up.png`)}" width="50" height="50" alt="" />
        <h1>{{message}}</h1>
</body>

</html>

let ngModule = angular.module('app', []);

let slovo = 'slovo';

ngModule.controller('testCtrl', function($scope) {
    $scope.message = slovo;
})

如果我在开发模式下运行它一切正常。

如果你在生产模式下运行它，那么这就是图片

根据控制台中的链接有错误发送here

帮我弄清楚这个Unknown provider: eProvider <- e <- testCtrl 错误是什么以及为什么生产示例不起作用？

Air

Asked: 2020-02-11 22:00:15 +0000 UTC

如何告诉 NODEJS 服务器不仅要读取 html，还要读取 css 和 js？

1

我想马上说明我知道 experss 模块的存在，我不感兴趣

我有一个简单的服务器：

const http = require('http'),
      fs = require('fs');

const server = http.createServer()

server.on('request', (req, res)=>{
    console.log(req.url);
    res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' });
    fs.readFile('./frontend/index.html', (err, content) => {
        res.write(content);

        res.end();

    })
});

server.listen(8888);

这里html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test NodeJS && Webpack</title>
    <base href="./" />
    <link rel="stylesheet" href="css.css" />
</head>
<body>
    <header>
        <h1>Site</h1>
    </header>
    <main>Main</main>
    <footer>Footer</footer>
    <script src="js.js"></script>
</body>
</html>

此服务器仅读取 html...

我如何阅读CSS和JS文件？？？

另一个问题是这个。在这里使用模块是否正确fs？

Air

Asked: 2020-02-03 17:58:27 +0000 UTC

webpack4 不会编译所有 HTML 文件

3

我最初误解了问题的本质，我更正了问题以便更准确地表述问题......

有这个构建webpack：

'use strict';
const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


const minimizerBlock = {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
        warnings: false,
        parse: {},
        compress: {},
        mangle: true,
        output: null,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false,
      },
    }),
    new OptimizeCSSAssetsPlugin({})
  ]
}

const config = {
  entry: {
    main: './frontend/src/index.js'
  },
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'main.js'
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: 8888,
    overlay: true,
    proxy: {
      '/api': 'http://localhost:8889'
    }
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /\.sass$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      //{ test: /\.(ttf|eot|woff|woff2|png|jpg|jpeg|svg|gif|webp)$/, loader: 'url-loader', },
      {
        test: /\.(png|jpg|jpeg|svg|gif|webp)$/,
        include: [
          path.resolve(__dirname, './frontend/binary/image/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: 'image/[name].[ext]',
          }
        }]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        include: [
          path.resolve(__dirname, './frontend/binary/fonts/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[ext]',
          }
        }]
      },
      {
        test: /\.(mp3)$/,
        include: [
          path.resolve(__dirname, './frontend/binary/audio/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: 'audio/[name].[ext]',
          }
        }]
      },
      {
        test: /\.(html)$/,
        include: [
          path.resolve(__dirname, './frontend/pages/')
        ],
        use: [{
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
          }
        }]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './index.css',
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'frontend/src/', 'template.html'),
      filename: 'index.html',
      favicon: 'frontend/binary/image/icons/iconfinder_tech_0001_4023871.png',

    }),

  ]
};
module.exports = (env, options) => {
  let production = options.mode == 'production';
  config.devtool = production ? false : 'inline-cheap-module-source-map';
  config.optimization = production ? minimizerBlock : {};
  return config;
}

有папке src - файле template.html，其中有这样一个部分的布局

 <div id="root">
   <img src="${require(`../binary/image/icons/iconfinder_tech_0001_4023871.png`)}" alt="" />
</div>

编译后 webpack

转世index.html в папке public我得到这个结果

<div id="root">
  <img src="images/iconfinder_tech_0001_4023871.png" alt="" />
</div>

一切正常。

同时src，有一个文件夹pages具有不同的页面，它们具有相同的布局。

<header>
   <img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/>
</header>

启动后webpack，将创建一个包含这些文件的文件夹，结果如下

然后in不起作用require的问题imgheader

我得到一个错误。

告诉我我的有什么问题webpack？？？？

StackOverflow上的类似问题

Air

Asked: 2020-02-03 15:05:58 +0000 UTC

删除未提交的更改

1

也许有人会考虑这个问题的可能重复，但我对这个问题的答案一无所知。

早上工作，我没有做任何操作git。

我现在如何恢复所有更改并恢复到最新的提交？

没有什么可以举出尝试的例子，试了很多，看了很多，还是没看懂……

Air

Asked: 2020-02-01 19:25:37 +0000 UTC

函数可以创建变量吗？[复制]

1

这个问题已经在这里得到了回答：

变量作为数组名称 2 个答案

通过变量访问数组 [重复] 2 个答案

如何引用名称中带有 id 的变量？js (1 个回答)

3年前关闭。

有一个功能：

function createVar(названиеПеременно, значениеПеременной) {

  let названиеПеременно = значениеПеременной;
  return названиеПеременно;
}

createVar('первая', 'значение1');
createVar('вторая', 'значение2');

//createVar(первая, 'значение');

console.log(первая)

假设我从外部获取了一些数据。而且数据不一样。每次调用该函数时createVar，我都必须将接收到的信息分配给一个新变量。

如何实施？

我想立即指出，我可以创建一个对象，并在调用函数时创建一个键和值并将其推送到对象中。此选项已实施。

对我个人而言，这个问题扩展了我的视野和意义。

你能帮我把这个css预加载器重写为svg吗？

NodeJS中如何实现自动跟踪目录（文件夹）中的内容变化？

如何为 webpack-dev-server 正确设置 publicPath 的路径

如何制作阴影（投影）渐变

类中 Array.map() 方法的行为不清楚 [重复]

SVG 路径元素看不到水平渐变

动画时如何圆角汉堡图标

Angulsrjs 中的控制器和指令交互

为什么 Angularjs 中的控制器看不到它的变量？

如何在angularjs中编写纯js代码

如何在 SVG 上实现背景剪辑线性渐变和混合混合模式示例的模拟

如何在 SVG 中实现来回动画

是否可以更改 SVG 元素或其克隆的位置？

如何找出元素是同一父级的子级？

角-1。如何正确循环遍历循环中的元素？

AngularJS - 未知的提供者错误：eProvider <- e <- testCtrl

如何告诉 NODEJS 服务器不仅要读取 html，还要读取 css 和 js？

webpack4 不会编译所有 HTML 文件

删除未提交的更改

函数可以创建变量吗？[复制]

我看不懂措辞

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

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

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

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

Python解析野莓

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

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

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

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

Air's questions