主页 / user-422556

kiskiskit's questions

Martin Hope
kiskiskit
Asked: 2023-04-20 18:08:05 +0800 CST
  • 5

当点击 .btn 时，overflow hidden 出现在 body 上是必要的，当再次点击 .btn 时也会消失。请告诉我该怎么做？

$(document).ready(function(){
    $('.btn').click(function(){
        $('.body').css({"overflow: hidden;"});      
        return false;
    });
});
.btn  {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">
  нажать!
</div>

<div class="test">
<div class="text">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
    </p>
  </div>
<div class="text">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
    </p>
  </div>
<div class="text">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
    </p>
  </div>
<div class="text">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
    </p>
  </div>
  <div class="text">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
    </p>
  </div>
  <div class="text">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
    </p>
  </div>
  <div class="text">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
    </p>
  </div>
  <div class="text">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
    </p>
  </div>
  <div class="text">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
    </p>
  </div>
</div>

javascript
Martin Hope
kiskiskit
Asked: 2022-04-02 07:30:37 +0800 CST
  • 0

为什么不触发 onclick 事件？

let btn = document.querySelectorAll('.btn');

let text = document.querySelector('.text');


btn.onclick = function () {
    text.style.opacity = '20';
  console.log('test');
}
<div class="test-btn">
  <button class="btn">test 1</button>
  <button class="btn">test 2</button>
  <button class="btn">test 3</button>
  <button class="btn">test 4</button>
</div>

<div class="text">
  скрытый текст
</div>

javascript
Martin Hope
kiskiskit
Asked: 2022-03-31 03:40:47 +0800 CST
  • 0

您能否解释一下为什么在 querySelectorAll 应用程序期间没有为块设置样式？但是如果您设置了一个 querySelector，那么所需的样式将应用于所需的块。

逻辑是这样的：通过单击按钮，应该会出现一个块。默认情况下，块具有显示：无，通过单击按钮应更改为显示：块

let showMsg = document.querySelectorAll('.msg-1 .msg-2 .msg-3');


function viewMsg() {
    showMsg.style.display = 'block';
}
.msg-1 {
    display: none;
}

.msg-2 {
    display: none;
}

.msg-3 {
    display: none;
}
<div class="chat-ui">
    <div class="chat-items">
        <div class="msg">
            <p>первый этап</p>
            <button value="Click" onmousedown="viewMsg()">далее</button>
        </div>
        <div class="msg msg-1">
            <p>второй этап</p>
            <button value="Click" onmousedown="viewMsg()">далее</button>
        </div>
        <div class="msg msg-2">
            <p>конец</p>
            <button value="Click" onmousedown="viewMsg()">отправить</button>
        </div>
        <div class="msg msg-3">
            <p>полный конец</p>
        </div>
    </div>

</div>

javascript
Martin Hope
kiskiskit
Asked: 2022-03-20 23:24:30 +0800 CST
  • 0

请告诉我如何以 250 像素和 991 像素的分辨率在 2 列中正确布置 flex 元素。以下是它在移动设备上的外观： 在此处输入图像描述

我失败的代码：

.item {
 
    background: red;
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
   margin-right: 10px;
  
}


.items {
  display: flex;
  flex-wrap: wrap;
 
}



@media (min-width: 250px) and (max-width: 991px) {
  .items {
    flex-direction: column;
  }
}
<div class="items">
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
  <div class="item">
    
  </div>
</div>

html
Martin Hope
kiskiskit
Asked: 2022-03-13 00:35:31 +0800 CST
  • 0

请告诉我如何制作，以便当您单击一个块时，颜色会更改其值并在您单击另一个块时返回其原始值。我使用活动伪类制作了当前任务，但是当我单击另一个块时，按钮的颜色不会变得相同

代码示例：

.void_history {
  display: flex;
  flex-direction: column;
}

.void_history-item  {
  width: 200px;
  height: 50px;
  background: #248a52;
  border: 1px solid #006633;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  color: white;
  transition: background 9999999s;
}


.void_history-item:active {
  background: red;
  transition: background 0s;
}
<div class="void_history">
  <div class="void_history-item">Первый выбор</div>
  <div class="void_history-item">Второй выбор</div>
  <div class="void_history-item">Третий выбор</div>
  <div class="void_history-item">Четвёрты выбор</div>
</div>

javascript
Martin Hope
kiskiskit
Asked: 2022-03-10 21:06:26 +0800 CST
  • 0

通过单击按钮，应该会出现一个动画，然后应该会出现一个带有消息的块。目前有一个问题是按钮事件不起作用，整个动画和所有带有消息的块都被加载。请告诉我如何解决这个问题

var chatMessages = [{
  name: "ms1",
  msg: "1 этап <div class='box'><button class='btn'>next</button></div>",
  delay: 600,
  align: "left",
  
},
{
  name: "ms2",
  msg: "успешно. далее!",
  delay: 600,
  align: "right",

},
{
  name: "ms3",
  msg: "Второй этап <div class='box'><button class='btn'>next</button></div>",
  delay: 600,
  align: "left",
 
},
{
  name: "ms4",
  msg: "Успешно",
  delay: 600,
  align: "right",
 
},
{
  name: "ms5",
  msg: "Третий этап <div class='box'><button class='btn'>next</button></div>",
  delay: 600,
  align: "left",
  
},
{
  name: "ms6",
  msg: "Конец.",
  delay: 600,
  align: "right",
  
}
                   ];
var chatDelay = 0;

$('.btn').click(function(){
  $(this).parent('.box').toggleClass('active');
});
function onRowAdded() {
  $('.chat-container').animate({
    scrollTop: $('.chat-container').prop('scrollHeight')
  });
};
$.each(chatMessages, function(index, obj) {
  chatDelay = chatDelay + 1;
  chatDelay2 = chatDelay + obj.delay;
  chatDelay3 = chatDelay2 + 10;
  scrollDelay = chatDelay;
  chatTimeString = " ";
  msgname = "." + obj.name;
  msginner = ".messageinner-" + obj.name;
  spinner = ".sp-" + obj.name;
  if (obj.showTime == true) {
    chatTimeString = "<span class='message-time'>" + obj.time + "</span>";
  }
  $(".chat-message-list").append("<li class='message-" + obj.align + " " + obj.name + "' hidden><div class='sp-" + obj.name + "'><span class='spinme-" + obj.align + "'><div class='spinner'><div class='bounce1'></div><div class='bounce2'></div><div class='bounce3'></div></div></span></div><div class='messageinner-" + obj.name + "' hidden><span class='message-text'>" + obj.msg + "</span>" + chatTimeString + "</div></li>");
  $(msgname).delay(chatDelay).fadeIn();
  $(spinner).delay(chatDelay2).hide(1);
  $(msginner).delay(chatDelay3).fadeIn();
  setTimeout(onRowAdded, chatDelay);
  setTimeout(onRowAdded, chatDelay3);
  chatDelay = chatDelay3;
});
#wrapper {
  width: 600px;
  margin: 50px auto;
}

body {
  font-family: Arial;
  background: #fff;
}

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

.message-left .message-time {
  display: block;
  font-size: 12px;
  text-align: left;
  padding-left: 30px;
  padding-top: 4px;
  color: #ccc;
  font-family: Courier;
}

.message-right .message-time {
  display: block;
  font-size: 12px;
  text-align: right;
  padding-right: 20px;
  padding-top: 4px;
  color: #ccc;
  font-family: Courier;
}

.message-left {
  text-align: left;
  margin-bottom: 16px;
}

.message-left .message-text {
  max-width: 80%;
  display: inline-block;
  background: #fff;
  padding: 15px;
  font-size: 14px;
  color: #999;
  border-radius: 30px;
  font-weight: 100;
  line-height: 1.5em;
}

.message-right {
  text-align: right;
  margin-bottom: 16px;
}

.message-right .message-text {
  line-height: 1.5em;
  display: inline-block;
  background: #5ca6fa;
  padding: 15px;
  font-size: 14px;
  color: #fff;
  border-radius: 30px;
  line-height: 1.5em;
  font-weight: 100;
  text-align: left;
}

.chat {
  border-radius: 30px;
  padding: 20px;
  background: #f5f7fa;
}

.chat-container {
  height: 400px;
  overflow-y: scroll;
  padding-right: 16px;
}

.spinme-right {
  display: inline-block;
  padding: 15px 20px;
  font-size: 14px;
  border-radius: 30px;
  line-height: 1.25em;
  font-weight: 100;
  opacity: 0.2;
}

.spinme-left {
  display: inline-block;
  padding: 15px 20px;
  font-size: 14px;
  color: #ccc;
  border-radius: 30px;
  line-height: 1.25em;
  font-weight: 100;
  opacity: 0.2;
}

.spinner {
  margin: 0;
  width: 30px;
  text-align: center;
}

.spinner > div {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  background: rgba(0,0,0,1);
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="wrapper">
  <div class="chat">
    <div class="chat-container">
      <div class="chat-listcontainer">

        <ul class="chat-message-list">
        </ul>

      </div>
    </div>
  </div>
</div>

javascript
Martin Hope
kiskiskit
Asked: 2022-09-06 20:22:30 +0800 CST
  • -1

请告诉我如何四舍五入计算的总和，点后只留下一个数字

示例：100 / 0.0030301 = 33002.211148146926
应该是这样的：100 / 0.0030301 = 33002.2

代码示例：

let oneItem = $(".range-price-item-1 p");

let sumItem = $(".range-price-item-3 p");

$('#range-yellow').range({
  min: 100,
  max: 1000,
  start: 100,
  step: 100,
  onChange: function(value) {
    
     $('#display-3').html(value);
    sumItem.text(+value / +oneItem.text());
  }
});
<div class="range-input">
  <div class="ui yellow range" id="range-yellow">
    <p>
      Value: <span id="display-3"></span>
    </p>
  </div>
</div>
<div class="range-price">
  <div class="range-price-item">
    <div class="range-price-item-1">
      <h1>Первое значение</h1>
      <p>0.0030301</p>
    </div>
    <div class="range-price-item-2">
      <h1>Второе значение</h1>
      Value: <span id="display-3"></span>
    </div>
    <div class="range-price-item-3">
      <h1>Итоговая сумма</h1>
      <p>0</p>
    </div>
  </div>
</div>

javascript
Martin Hope
kiskiskit
Asked: 2022-09-04 21:46:08 +0800 CST
  • 2

请告诉我如何制作这样的眼睛：

在此处输入图像描述

我尝试使用边界半径，但有些东西不起作用。

const pup = document.querySelector('#pup');
const container = document.querySelector('.lien');

let cursor = {x: 0, y: 0}; 
let position = {x: 0, y: 0};

let width=500, height=500; 
let radius = 20; 
let speedMultiplier = 1e-3; 
let lastTime; 
let frames = 5e5;

function onMouseMove(event){
  const bounds = container.getBoundingClientRect();
  cursor.x = event.clientX - bounds.left - bounds.width / 2;
  cursor.y = event.clientY - bounds.top - bounds.height / 2;
  cursor.length = Math.sqrt(cursor.x * cursor.x + cursor.y * cursor.y);
  cursor.x *= radius / cursor.length;
  cursor.y *= radius / cursor.length;
}

document.addEventListener("mousemove", onMouseMove);

function loop(timestamp) { 
  const deltaTime = lastTime ? timestamp - lastTime : 0;
  lastTime = timestamp;
  if (0 === deltaTime) {
    if (--frames > 0) return requestAnimationFrame(loop);
    else return;
  }

  const multiplier = speedMultiplier * deltaTime;

  const vector = {
    x: cursor.x - position.x,
    y: cursor.y - position.y,
  }; 
 
  position.x += vector.x * multiplier;
  position.y += vector.y * multiplier;
  
  // if(position.x<0) position.x = 0;
  // if(position.x>width-radius*2) position.x = width-radius*2;

  // if(position.y<0) position.y = 0;
  // if(position.y>height-radius*2) position.y = height-radius*2;
  
  pup.setAttribute('transform', `translate(${position.x}, ${position.y})`);
  
  if (--frames > 0) requestAnimationFrame(loop);
  else console.log("Out of frames");
}

requestAnimationFrame(loop);
.conatiner {
  width: 800px;
}

.lien {
  margin: auto;
  width: 20%;
  position: relative;
}

.bottom-line {
  width: 100%;
  height: 10px;
  background: black;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
<div class="container">
  <div class="lien anim">
    <svg version="1.1" id="oeil" viewBox="0 0 62 36">
      <style type="text/css">
        .st0 {
          fill: none;
          stroke: #000000;
          stroke-width: 2;
          stroke-miterlimit: 10;
        }

        .st1 {
          fill: none;
          stroke: #000000;
          stroke-miterlimit: 10;
        }
      </style>
      <mask id="eyemask">
        <rect fill="black" x="0" y="0" width="62" height="36" />
        <path stroke="black" fill="white" d="M59,18c0,0-12.5,16-28,16S3,18,3,18S15.5,2,31,2S59,18,59,18z" />
      </mask>
      <path id="contour" class="st0 circle" d="M59,18c0,0-12.5,16-28,16S3,18,3,18S15.5,2,31,2S59,18,59,18z" />
      <g mask="url(#eyemask)">
        <g id="pup" class="anim eye">
          <circle class="st1" cx="31" cy="18" r="11" />
          <circle id="rondpup"fill="#FFB703" cx="31" cy="18" r="7" />
        </g>
      </g>
    </svg>
    </a>
   <div class="bottom-line">
     
   </div>
  </div>
 
</div>

html
Martin Hope
kiskiskit
Asked: 2022-09-01 16:15:15 +0800 CST
  • 0

能否请您告诉我如何将以下公式应用于与滑块的交互：第一个值 * 第二个值 = 总量，并将结果值显示在 DOM 中。

在计算中不应考虑滑块值

我失败的代码：

$(document).ready(function(){
  $('#range-yellow').range({
    min: 100,
    max: 1000,
    start: 200,
    onChange: function(value) {
      $('#display-3').html(value);
      let calc =  oneItem * twoItem
      sumItem.text(calc);
    }
  });
});





let oneItem = $(".range-price-item-1");

let twoItem = $(".range-price-item-2");

let sumItem = (".range-price-item-3");
<link href="https://tyleryasaka.github.io/semantic-ui-range/range.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://tyleryasaka.github.io/semantic-ui-range/range.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="range-conin-wrapper">
        <div class="range-coin">
           <div class="range-input">
            <div class="ui yellow range" id="range-yellow">
              <p>
              Value: <span id="display-3">          </span>
          </p>
            </div>
           </div>
           <div class="range-price">
          <div class="range-price-item">
             <div class="range-price-item-1">
               <h1>Первое значение</h1>
               <p>1</p>
             </div>
            <div class="range-price-item-2">
               <h1>Второе значение</h1>
              <p>2</p>
            </div>
            <div class="range-price-item-3">
              <h1>Итоговая сумма</h1>
              <p>3</p>
            </div>
                   
        </div>
         </div>

javascript
Martin Hope
kiskiskit
Asked: 2022-08-31 10:26:27 +0800 CST
  • 3

请告诉我如何使用 svg 图形为块设置动画。有必要沿线形成一个光束，该光束将向正方形移动，并且可以点燃它，使正方形“活跃”。请告诉我该怎么做

<div class="svg-anim">
  <svg width="1440" height="460" viewBox="0 0 1440 460" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M269.996 259.827L270.48 261.235C270.643 261.711 270.725 262.208 270.723 262.709V340.325C270.719 341.323 270.442 342.303 269.92 343.169C269.398 344.035 268.649 344.757 267.746 345.264L198.181 384.188C194.529 386.233 190.368 387.311 186.13 387.311C181.892 387.311 177.731 386.233 174.079 384.188L103.242 344.564C102.718 344.276 102.282 343.863 101.978 343.364C101.674 342.866 101.513 342.3 101.511 341.724V263.886C101.498 262.628 101.795 261.385 102.377 260.255L102.714 259.597" fill="#FFEEBA"/>
<path d="M269.996 259.827L270.48 261.235C270.643 261.711 270.725 262.208 270.723 262.709V340.325C270.719 341.323 270.442 342.303 269.92 343.169C269.398 344.035 268.649 344.757 267.746 345.264L198.181 384.188C194.529 386.233 190.368 387.311 186.13 387.311C181.892 387.311 177.731 386.233 174.079 384.188L103.242 344.564C102.718 344.276 102.282 343.863 101.978 343.364C101.674 342.866 101.513 342.3 101.511 341.724V263.886C101.498 262.628 101.795 261.385 102.377 260.255L102.714 259.597" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M176.936 304.036L105.32 264.964C104.546 264.539 103.903 263.926 103.455 263.189C103.008 262.452 102.773 261.617 102.773 260.766C102.773 259.915 103.008 259.079 103.455 258.342C103.903 257.605 104.546 256.993 105.32 256.567L176.901 217.002C179.939 215.32 183.393 214.438 186.907 214.445C190.422 214.452 193.871 215.349 196.902 217.043L267.634 256.559C268.404 256.99 269.041 257.607 269.482 258.346C269.923 259.085 270.152 259.922 270.147 260.772C270.142 261.622 269.902 262.455 269.452 263.19C269.002 263.924 268.357 264.533 267.582 264.956L195.941 304.044C193.048 305.621 189.772 306.451 186.437 306.449C183.103 306.448 179.827 305.616 176.936 304.036Z" fill="#F7DFAD" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M188.333 237.641L152.218 216.96L186.81 196.14L223.185 215.314L188.333 237.641Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M223.185 258.362L188.281 279.108L187.97 236.611L223.185 215.314V258.362Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M188.273 279.108L152.539 260.354L152.591 217.076L187.953 237.023L188.273 279.108Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M188.195 237.426L158.276 220.253L186.94 203.056L216.226 219.578L188.195 237.426Z" fill="#FCF572"/>
<path d="M188.196 272.118L158.598 256.592V220.575L187.885 237.097L188.196 272.118Z" fill="#FCF572"/>
<path d="M618.771 65.5398L619.255 66.9476C619.418 67.4234 619.5 67.9209 619.498 68.4212V146.037C619.494 147.035 619.217 148.015 618.695 148.881C618.173 149.747 617.424 150.469 616.521 150.977L546.956 189.9C543.304 191.945 539.143 193.024 534.905 193.024C530.667 193.024 526.506 191.945 522.854 189.9L452.017 150.277C451.493 149.989 451.057 149.575 450.753 149.077C450.449 148.578 450.288 148.013 450.286 147.437V69.5985C450.287 68.3374 450.598 67.0939 451.195 65.9679L451.532 65.3093" fill="#FFEEBA"/>
<path d="M618.771 65.5398L619.255 66.9476C619.418 67.4234 619.5 67.9209 619.498 68.4212V146.037C619.494 147.035 619.217 148.015 618.695 148.881C618.173 149.747 617.424 150.469 616.521 150.977L546.956 189.9C543.304 191.945 539.143 193.024 534.905 193.024C530.667 193.024 526.506 191.945 522.854 189.9L452.017 150.277C451.493 149.989 451.057 149.575 450.753 149.077C450.449 148.578 450.288 148.013 450.286 147.437V69.5985C450.287 68.3374 450.598 67.0939 451.195 65.9679L451.532 65.3093" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M525.71 109.748L454.094 70.6769C453.32 70.2512 452.677 69.6391 452.229 68.9022C451.782 68.1652 451.547 67.3292 451.547 66.4783C451.547 65.6274 451.782 64.7915 452.229 64.0545C452.677 63.3175 453.32 62.7054 454.094 62.2797L525.675 22.7143C528.713 21.0327 532.167 20.1503 535.681 20.1576C539.196 20.1648 542.645 21.0614 545.676 22.7554L616.408 62.2715C617.178 62.7032 617.815 63.3194 618.256 64.0587C618.697 64.7979 618.926 65.6343 618.921 66.4843C618.916 67.3343 618.676 68.168 618.226 68.9023C617.776 69.6366 617.131 70.2456 616.356 70.6687L544.715 109.757C541.822 111.334 538.546 112.163 535.211 112.162C531.877 112.16 528.601 111.328 525.71 109.748Z" fill="#F7DFAD" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1173.98 127.094C1174.25 127.496 1174.44 127.945 1174.53 128.415C1174.62 128.885 1174.61 129.367 1174.5 129.834C1174.4 130.301 1174.2 130.744 1173.91 131.137C1173.62 131.53 1173.26 131.865 1172.84 132.124L968.142 251.035L961.219 246.918L1168.73 125.736C1169.61 125.254 1170.66 125.126 1171.65 125.381C1172.63 125.635 1173.47 126.252 1173.98 127.094Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1218.94 43.1391L1189.65 26.6164L1217.68 8.76831L1246.97 25.291L1218.94 43.1391Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1247.28 60.6496L1218.94 77.8309L1218.68 42.6369L1246.97 25.291L1247.28 60.6496Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1218.94 77.8309L1189.34 62.3044V26.2872L1218.62 42.8016L1218.94 77.8309Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M121.745 313.47L-115.141 450.877C-117.096 452.011 -117.716 454.438 -116.525 456.298L-116.521 456.305C-115.33 458.166 -112.781 458.755 -110.826 457.621L126.06 320.214C128.015 319.08 128.635 316.653 127.445 314.793L127.44 314.785C126.25 312.925 123.7 312.336 121.745 313.47Z" fill="#F6C513" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M577.099 128.099C577.686 127.23 578.611 126.618 579.672 126.396C580.732 126.174 581.842 126.36 582.759 126.913L814.282 260.593L812.551 266.356L578.604 133.417C577.665 132.9 576.979 132.05 576.697 131.054C576.415 130.057 576.559 128.994 577.099 128.099Z" fill="#F6C513" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M486.748 125.415L264.233 255.003L270.292 259.119L490.876 131.861C491.322 131.604 491.71 131.266 492.019 130.866C492.327 130.466 492.55 130.012 492.674 129.531C492.797 129.049 492.82 128.549 492.74 128.058C492.66 127.568 492.48 127.098 492.209 126.674C491.937 126.25 491.58 125.882 491.159 125.589C490.738 125.296 490.26 125.085 489.752 124.968C489.245 124.851 488.719 124.831 488.203 124.907C487.688 124.984 487.193 125.156 486.748 125.415Z" fill="#F6C513" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1263.01 131.993L1483.64 260.766L1489.76 256.888L1267.18 125.58C1266.28 125.051 1265.21 124.883 1264.18 125.111C1263.15 125.34 1262.27 125.946 1261.71 126.798V126.798C1261.16 127.651 1260.99 128.677 1261.23 129.651C1261.47 130.625 1262.11 131.467 1263.01 131.993Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1207.57 110.045L1135.96 70.9734C1135.18 70.5477 1134.54 69.9356 1134.09 69.1986C1133.65 68.4616 1133.41 67.6257 1133.41 66.7748C1133.41 65.9239 1133.65 65.0879 1134.09 64.3509C1134.54 63.6139 1135.18 63.0019 1135.96 62.5762L1207.54 23.0107C1210.57 21.323 1214.03 20.4335 1217.54 20.4335C1221.06 20.4335 1224.51 21.323 1227.54 23.0107L1298.27 62.5268C1299.04 62.9585 1299.68 63.5747 1300.12 64.314C1300.56 65.0532 1300.79 65.8896 1300.79 66.7396C1300.78 67.5895 1300.54 68.4233 1300.09 69.1576C1299.64 69.8919 1299 70.5009 1298.22 70.9239L1226.58 110.012C1223.69 111.596 1220.42 112.432 1217.08 112.438C1213.75 112.444 1210.47 111.619 1207.57 110.045V110.045Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1300.66 65.8363L1301.15 67.244C1301.31 67.7199 1301.39 68.2173 1301.39 68.7176V146.334C1301.38 147.332 1301.11 148.312 1300.59 149.178C1300.06 150.044 1299.31 150.766 1298.41 151.273L1228.83 190.205C1225.18 192.25 1221.02 193.328 1216.78 193.328C1212.54 193.328 1208.38 192.25 1204.73 190.205L1133.89 150.574C1133.37 150.285 1132.93 149.872 1132.63 149.373C1132.32 148.875 1132.16 148.309 1132.16 147.733V69.8784C1132.15 68.6206 1132.44 67.3773 1133.03 66.2479L1133.36 65.5893" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1218.54 42.8263L1183.18 22.8707L1217.03 1.32623L1252.39 21.2818L1218.54 42.8263Z" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M1253.15 64.3707L1218.91 85.1167L1218.61 42.6205L1252.77 21.6769L1253.15 64.3707Z" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M1218.91 85.1167L1183.18 66.363V22.8706L1218.54 42.8262L1218.91 85.1167Z" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M980.526 259.827L981.011 261.235C981.173 261.711 981.255 262.208 981.253 262.709V340.325C981.249 341.323 980.972 342.303 980.451 343.169C979.929 344.035 979.179 344.757 978.276 345.264L908.711 384.188C905.059 386.233 900.898 387.311 896.66 387.311C892.422 387.311 888.261 386.233 884.609 384.188L813.772 344.564C813.248 344.276 812.812 343.863 812.508 343.364C812.205 342.866 812.044 342.3 812.041 341.724V263.886C812.028 262.628 812.325 261.385 812.907 260.255L813.244 259.597" fill="#FFEEBA"/>
<path d="M980.526 259.827L981.011 261.235C981.173 261.711 981.255 262.208 981.253 262.709V340.325C981.249 341.323 980.972 342.303 980.451 343.169C979.929 344.035 979.179 344.757 978.276 345.264L908.711 384.188C905.059 386.233 900.898 387.311 896.66 387.311C892.422 387.311 888.261 386.233 884.609 384.188L813.772 344.564C813.248 344.276 812.812 343.863 812.508 343.364C812.205 342.866 812.044 342.3 812.041 341.724V263.886C812.028 262.628 812.325 261.385 812.907 260.255L813.244 259.597" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M887.466 304.036L815.85 264.964C815.076 264.539 814.432 263.926 813.985 263.189C813.538 262.452 813.303 261.617 813.303 260.766C813.303 259.915 813.538 259.079 813.985 258.342C814.432 257.605 815.076 256.993 815.85 256.567L887.431 217.002C890.469 215.32 893.922 214.438 897.437 214.445C900.952 214.452 904.401 215.349 907.431 217.043L978.164 256.559C978.934 256.99 979.571 257.607 980.012 258.346C980.453 259.085 980.682 259.922 980.677 260.772C980.672 261.622 980.432 262.455 979.982 263.19C979.532 263.924 978.887 264.533 978.112 264.956L906.471 304.044C903.578 305.621 900.301 306.451 896.967 306.449C893.633 306.448 890.357 305.616 887.466 304.036Z" fill="#F7DFAD" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M219.274 217.701L187.702 236.718L158.277 220.253" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M173 266V227" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M537.108 42.5299L500.993 21.8498L535.585 1.02975L571.96 20.2033L537.108 42.5299Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M571.96 63.2512L537.057 83.9971L536.745 41.5009L571.96 20.2034V63.2512Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M537.048 83.9971L501.313 65.2435L501.365 21.9651L536.727 41.9125L537.048 83.9971Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M536.969 42.3159L507.051 25.1429L535.714 7.94513L565.001 24.4678L536.969 42.3159Z" fill="#FCF572"/>
<path d="M565.314 59.8264L536.971 77.0077L536.711 41.8137L565.002 24.4678L565.314 59.8264Z" fill="#FCF572"/>
<path d="M568.048 22.5907L536.477 41.6078L507.052 25.1428" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M898.863 236.817L862.748 216.137L897.34 195.317L933.714 214.491L898.863 236.817Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M933.713 257.539L898.81 278.284L898.498 235.788L933.713 214.491V257.539Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M898.802 278.284L863.068 259.531L863.12 216.252L898.482 236.2L898.802 278.284Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M898.723 271.295L869.125 255.768V219.751L898.403 236.274L898.723 271.295Z" fill="#FCF572"/>
<path d="M929.803 216.878L898.232 235.895L868.807 219.43" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M898.802 273.279L898.23 235.895" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M895.298 387.373V305.822" stroke="#302D2C" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M534.746 192.263V112.128" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
</svg>
</div>

html
Martin Hope
kiskiskit
Asked: 2022-08-27 18:50:28 +0800 CST
  • 0

如何正确与 slick 中的断点交互。滑块不应在笔记本电脑和其他大屏幕上处于活动状态，而只能在移动设备和平板电脑上处于活动状态。你能告诉我如何使用响应属性来做到这一点吗？

$('.slider').slick({
    dots: true,
    responsive: [{
            breakpoint: 1024,
            settings: "unslick"
    }]
  });
.slider {
  display: flex;
  
}


.slider-item {
  width: 100px;
  height: 100px;
  background:  #FF6666;
  margin: 30px;
  
}
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider-item">
    
  </div>
  <div class="slider-item">
    
  </div>
  <div class="slider-item">
    
  </div>
  <div class="slider-item">
    
  </div>
</div>

html
Martin Hope
kiskiskit
Asked: 2022-08-23 16:10:34 +0800 CST
  • 3

当前动画中有蓝色圆圈抽搐。请告诉我如何解决此问题，并使其在蓝色圆圈上不可见红色圆圈，z-index 由于某种原因不起作用

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.items {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid red;
  border-radius: 50%;
}

.item:nth-child(1) {
  --size: 350px;
  --degress: 30deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an1 30s linear infinite;
}

.item:nth-child(2) {
  --size: 300px;
  --degress: 45deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an2 40s linear infinite;
}

.item:nth-child(3) {
  --size: 250px;
  --degress: 60deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an3 20s linear infinite;
}

.item:nth-child(4) {
  --size: 200px;
  --degress: 75deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an4 50s linear infinite;
}

.circle {
  width: 100px;
  height: 100px;
  background: blue;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -10px;
}

@keyframes an1 {
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes an2 {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes an3 {
  from {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes an4 {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
<div class="items">
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
</div>

html
Martin Hope
kiskiskit
Asked: 2022-08-21 23:21:47 +0800 CST
  • 1

$(document).ready(function(){
  $('#range-yellow').range({
    min: 100,
    max: 1000,
    start: 200,
    onChange: function(value) {
      $('#display-3').html(value);
    }
  });
});




var savingsCoins = +$('#savingsCoins').text().split("$")[0];
 
  var savingsMonthly = +$('#savingsMonthly').text();
  var savingsGains = +$('#savingsGains').text();
 
  $('.range-input').on('.range-input', function() {
    var energyBill = +$('#energyBill').val();
    $('#range-value').text(energyBill);
 
    $('#savingsMonthly').text(savingsMonthly / energyBill);
    $('#savingsCoins').text(savingsCoins / energyBill + "$");
    $('#savingsGains').text(savingsGains  / energyBill);
 
  });
<script src="https://tyleryasaka.github.io/semantic-ui-range/range.js"></script>
<link href="https://tyleryasaka.github.io/semantic-ui-range/range.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="range-conin-wrapper">
        <div class="range-coin">
           <div class="range-input">
            <div class="ui yellow range" id="range-yellow"></div>
           </div>
           <div class="range-price">
                <div class="range-price-item">
                  <p>
      Value: <span id="display-3"></span>
    </p>
                    <h4>Первое значение</h4>
                    <p id="savingsCoins">0.12$</p>
                </div>
                <div class="range-price-item">
                    <h4>просто цифры</h4>
                    <p id="savingsYearly">907,929,000</p>
                </div>
                <div class="range-price-item">
                    <h4>Ззначение с инупута</h4>
                    <div class="range-price-item-footer">
                        <div class="icon-range-price-item">
                            <svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <ellipse cx="10.2575" cy="9.41842" rx="9.92056" ry="9.15744" fill="#89EEAB"/>
                                <path d="M13.55 11.6347C13.55 9.9913 12.1281 9.56006 10.8344 9.25703V7.27568C11.4171 7.34561 12.0232 7.54375 12.6176 7.88174L13.2003 6.44818C12.5593 6.04025 11.7085 5.80715 10.8344 5.73722V4.46683H9.66886V5.76053C7.82737 5.97032 6.92994 7.03093 6.92994 8.26636C6.92994 9.93302 8.37516 10.3643 9.66886 10.6789V12.6253C8.8297 12.5437 7.99054 12.2291 7.40779 11.7978L6.76677 13.2197C7.40779 13.7209 8.51502 14.0822 9.66886 14.1521V15.4225H10.8344V14.1172C12.6642 13.8957 13.55 12.8468 13.55 11.6347ZM8.80639 8.17312C8.80639 7.7885 9.05115 7.45051 9.66886 7.31065V8.96566C9.15604 8.80249 8.80639 8.58104 8.80639 8.17312ZM10.8344 12.5787V10.9703C11.3355 11.1451 11.6735 11.3666 11.6735 11.7745C11.6735 12.1475 11.4171 12.4505 10.8344 12.5787Z" fill="#3F3F3F"/>
                                </svg>                                
                        </div>
                        <p id="savingsMonthly">20</p>
                    </div>
                    
                </div>
                <div class="range-price-item">
                    <h4>Итоговое значение</h4>
                    <div class="range-price-item-footer">
                        <div class="icon-range-price-item"><svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.043 10.0037L11.2788 18.2141L1.36531 1.12966L21.1923 1.12966L19.1841 4.59055L19.8514 5.17083L22.3539 0.858109C22.5077 0.593166 22.3165 0.261232 22.0102 0.261232L0.547427 0.26123C0.241109 0.26123 0.0499504 0.593164 0.203688 0.858108L2.76703 5.27564L3.39141 4.65126L6.38676 9.78824L4.75845 8.70757L10.9351 19.352C11.0882 19.616 11.4694 19.616 11.6225 19.352L17.744 8.80265L17.7058 8.8683L16.043 10.0037Z" fill="#023047"/>
                            <circle cx="11.3697" cy="4.18729" r="2.0386" fill="#023047"/>
                            <path d="M3.84987 6.05109C3.9393 5.93708 4.07764 5.78219 4.26327 5.59806C4.64122 5.22316 5.19322 4.74875 5.87311 4.28029C7.24048 3.33815 9.07454 2.45455 11.0158 2.39868C13.4245 2.32934 16.1563 3.1863 18.8061 6.07513C15.9427 9.5835 12.6808 9.93353 11.0134 9.93508C9.11239 9.84244 7.28276 8.90605 5.90599 7.91446C5.22087 7.42102 4.6615 6.92364 4.27722 6.53168C4.08484 6.33546 3.94161 6.17102 3.84987 6.05109Z" stroke="#023047" stroke-width="0.942026"/>
                            <path d="M10.6028 11.6788C10.603 11.6288 10.6286 11.5824 10.6707 11.5554L11.8827 10.7809C11.9813 10.718 12.1103 10.7895 12.1092 10.9064L12.0544 16.5163C12.0536 16.597 11.9879 16.662 11.9072 16.662H10.7289C10.6473 16.662 10.5813 16.5957 10.5817 16.5142L10.6028 11.6788Z" fill="#023047"/>
                            </svg>  </div>
                            <p id="savingsGains">13.048</p>            
                    </div>
                        
                </div>
            <button>Купить</button>
           </div>
        </div>
    </div>

你能告诉我如何进行以下计算：

#savingsCoins / #range-price-item = savingsGains

难点在于获取输入范围的值并进一步与之交互

javascript
Martin Hope
kiskiskit
Asked: 2022-08-17 22:57:49 +0800 CST
  • 0

请告诉我如何在网站上实现动画。我希望它看起来像这样作为背景： 在此处输入图像描述

动画逻辑很简单：你需要半圆从小到大出现，以此类推。请告诉我如何使用关键帧来实现这一点。

.container {
  margin: 0 auto;
  background: #FF6666;
  width: 600px;
  height: 600px;
}

header:before {
  content: "";
  position: absolute;
  width: 5em;
  height: 10em;
  border: 2px solid red;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  background: mistyrose;
}
<header>
  <div class="container">
    <p>test</p>
  </div>
</header>

html
Martin Hope
kiskiskit
Asked: 2022-08-15 00:46:27 +0800 CST
  • 1

请告诉我为什么动画不适合我。我使用@keyframes。我在哪里做错了？

.wrapper {
  margin: 0 auto; 
  width: 500px;
  height: 500px;
  background: #FFCC99;
}

.circle { 
  width: 100px;
  height: 100px;
  background: #FF6666;
  border-radius: 100%;
  animation-name: circle;
  animation-duration: 2s;
}


@keyframes circle{
  0% {
    left: 0%;
  }
  
  50% {
    
  }
  
  
  100% {
    left: 100%;
  }
}
<div class="container">
  <div class="wrapper">
    <div class="circle">
      
    </div>
  </div>
</div>

css
Martin Hope
kiskiskit
Asked: 2022-08-12 14:34:41 +0800 CST
  • 1

请告诉我如何使用 flex 排列元素以获得此结果：

在此处输入图像描述

我的代码：

.img {
  width: 800px;
 height:  800px;
  background: grey;
  margin: 0 auto;
}
.img-block-1 {
  width: 100%;
  display: flex;
  padding: 20px;
  
}
.img-block-item-1 {
  width: 117px;
  height: 70px;
  background: red;
} 

.img-block-item-2 {
  background: red;
  width: 141px;
  height: 77px;
}

.img-block1-item {
  width: 98px;
  height: 98px;
  background: red;
  
}

.img-block2-2-item {
  width: 78px;
  height: 78px;
  background: red;
}

.img-block-2 {
  display: flex;
}


.img-block2-3-item {
  width: 156px;
  height: 88px;
}

.img-block3-1-item {
  width: 92px;
  height: 115px;
  background: red;
}
.img-block3-2-item {
  width: 177px;
  height: 33px;
  background: red;
}

.img-block3-3-item {
  width: 179px;
  height: 36px;
  background: red;
}

.img-block-3 {
  display: flex;
}
<div class="img">
  <div class="img-block-1">
    <div class="img-block-item-1">
      
    </div>
    <div class="img-block-item-2">
      
    </div>
  </div>
  <div class="img-block-2">
    <div class="img-block1-item">
      
    </div>
    <div class="img-block2-2-item">
      
    </div>
    <div class="img-block2-3-item">
      
    </div>
  </div>
  <div class="img-block-3">
    <div class="img-block3-1-item">
      
    </div>
    <div class="img-block3-2-item">
      
    </div>
    <div class="img-block3-3-item">
      
    </div>
  </div>
</div>

html