主页 / user-388439

maks-maks157's questions

Martin Hope
maks-maks157
Asked: 2020-09-24 05:32:38 +0800 CST
  • 2

有必要不断地制作HTML这样CSS的圆圈。有一个代码已经完成，但是使用它是不可能在选定的一个上画一个圆圈并做出正确的阴影。

在此处输入图像描述

section {
    width: 12em;
    margin: auto;
}

.chart {
    position: relative;
    overflow: hidden;
    /* .triangle выходят за пределы */
}

.center {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    left: 36px;
    top: 36px;
    background-color: #FFF;
    z-index: 2;
}

.chart:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.triangle {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 50%;
    transform-origin: center bottom;
    overflow: hidden;
}

.circle {
    height: 100%;
    width: 100%;
    background: silver;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform-origin: center bottom;
    transform: rotate(156.5deg);
}
<section class="chart">
   <div class="center"></div>
   <div class="triangle" style="transform:rotate(   0deg)">
      <div class="circle" style="background:#BD0204"></div>
   </div>
   <div class="triangle" style="transform:rotate( 22.5deg)">
      <div class="circle" style="background:#BD0204"></div>
   </div>
   <div class="triangle" style="transform:rotate(45deg)">
      <div class="circle" style="background:#FA3F3C"></div>
   </div>
   <div class="triangle" style="transform:rotate(67.5deg)">
      <div class="circle" style="background:#FFFC3E"></div>
   </div>
   <div class="triangle" style="transform:rotate(90deg)">
      <div class="circle" style="background:#BCBE00"></div>
   </div>
   <div class="triangle" style="transform:rotate(112.5deg)">
      <div class="circle" style="background:#02C103"></div>
   </div>
   <div class="triangle" style="transform:rotate(135deg)">
      <div class="circle" style="background:#44FA42"></div>
   </div>
   <div class="triangle" style="transform:rotate(157.5deg)">
      <div class="circle" style="background:#3AFEFF"></div>
   </div>
   <div class="triangle" style="transform:rotate(180deg)">
      <div class="circle" style="background:#02BCBD"></div>
   </div>
   <div class="triangle" style="transform:rotate(202.5deg)">
      <div class="circle" style="background:#0301BF"></div>
   </div>
   <div class="triangle" style="transform:rotate(225deg)">
      <div class="circle" style="background:#3D3FF9"></div>
   </div>
   <div class="triangle" style="transform:rotate(247.5deg)">
      <div class="circle" style="background:#FE40FD"></div>
   </div>
   <div class="triangle" style="transform:rotate(270deg)">
      <div class="circle" style="background:#BC02C0;"></div>
   </div>
   <div class="triangle" style="transform:rotate(292.5deg)">
      <div class="circle" style="background:#FFF"></div>
   </div>
   <div class="triangle" style="transform:rotate(315deg)">
      <div class="circle" style="background:#BDBCBF"></div>
   </div>
   <div class="triangle" style="transform:rotate(337.5deg)">
      <div class="circle" style="background:#3F3F3F"></div>
   </div>
   <div class="triangle" style="transform:rotate(360deg); z-index: 2">
      <div class="circle" style="background:#020202"></div>
   </div>
</section>

html
Martin Hope
maks-maks157
Asked: 2020-09-16 00:05:18 +0800 CST
  • 3

帮助解决问题。

我正在尝试显示对象的元素state：

class App extends Component {    
  state = {
    arr: ['one', 'two', 'three']
  }    
  render() {
    return (
    <div>
      { this.state.arr.map((item, index) => {
        <div></div>
      })}
    </div>
  )}
}

export default App;

我得到一个错误：

Expected an assignment or function call and instead saw an 
expression  no-unused-expressions. 
Search for the keywords to learn more about each error.
javascript
Martin Hope
maks-maks157
Asked: 2020-07-12 15:30:48 +0800 CST
  • 2

很可能这不是一个严重的问题，但也许可以解决，如果是这样，请提供建议：

假设我想创建按钮来更改文本大小并将所有内容写入localStorage.

后来，我编写了一个检查器，它会捕获值并更改文本大小。

难点是页面加载的时候，先加载css文档，然后通过js修改值，在这种情况下，几百毫秒，我看文本是怎么变成第一个16px，然后变成我需要的.

是否有可能以某种方式纠正这种情况并使尺寸的应用更快？

如果jQuery中有解决方案，那我原谅你不去碰它，在纯JS中理解它很有趣。

javascript
Martin Hope
maks-maks157
Asked: 2020-06-13 03:43:30 +0800 CST
  • 0

大家好。面对这个问题 - 如何将属性应用于方法中的所有 html 元素。这是应用于第一个元素的示例，如何转换并应用于所有元素？

class Elem {

                constructor(elements) {
                    this.elements = elements;
                }
        
        attr(type, value) {
                    let elem = document.querySelector(this.elements);
                    elem.setAttribute(type, value);
                    return this;
                }
        
}

let elem = new Elem('.paragraf');

elem.attr('class', 'abc');

javascript
Martin Hope
maks-maks157
Asked: 2020-05-13 21:36:22 +0800 CST
  • 1

请告知如何解决此问题。元素a的数量不定，当你点击a时，你需要显示一个图像，当你再次点击时，这个图像又被隐藏了。这样的事情怎么可能实现？

var one = document.querySelectorAll('.one a');

for(var i = 0; i < one.length; i++){
	one[i].addEventListener('click', function() {
		var four = document.querySelector('.four');
		if(four.style.visibility == 'hidden') {
			four.style.visibility = 'visible';
		} else if(four.style.visibility == 'visible'){
			four.style.visibility = 'hidden';
		}
	})
}
<div class="one">
<h3>First</h3>
<div class="two"><img src="../../../img/1_1.png" alt="1"></div>
<a class="three" href="#">показать</a>
<img class="four" style="visibility:hidden;" src="../../../img/1_1_result.png" alt="1_result">
</div>
<div class="one">
<h3>Second</h3>
<div class="two"><img src="../../../img/1_1.png" alt="1"></div>
<a class="three" href="#">показать</a>
<img class="four" style="visibility:hidden;" src="../../../img/1_1_result.png" alt="1_result">
</div>

很明显，这段代码实现了对任何类似于委托的元素的单击，但我不知道如何不仅在第一个元素中单击时显示图像。

javascript