您可以使用輸入值旋轉元素嗎？

我想使用Input[type=range]out來旋轉id為outer的紅色圓圈，我嘗試選擇圓圈的樣式，然后進行變換，這等于輸入的值，但它必須在括號之間rotateZ()，即一個字串。這是我的代碼；

var value = document.getElementById("slider").value;
        console.log(value);
        document.getElementById("inner").style.transform = document.getElementById("slider").value;

 body {
        display:flex;
        align-items:center;
        justify-content:center;
    }
    #outer {
        background:red;
        height:20vw;
        position:relative;
        border-radius:50%;
        width:20vw;
        display:flex;
        justify-content:center;
    }
    #inner {
        transform:translateY(10%);
        border-bottom-left-radius:100%;
        border-bottom-right-radius:100%;
        position:absolute;
        bottom:0;
        background:darkgreen;
        width:10%;
        height:50%;
    }

    <div id="outer"><div id="inner"></div></div>
    <input min="0" max="360" type="range" id="slider">

但它不起作用。我需要以某種方式將值放在括號之間。

uj5u.com熱心網友回復：

兩件事，首先，正如您所說，您不能將其設定為數字，而是需要將其設定為字串，此處使用模板文字。其次，由于您希望將旋轉鏈接到滑塊，在這種情況下，您需要向滑塊添加一個偵聽器，以偵聽input event給出最直接反饋的an 。

var slider = document.getElementById("slider");

slider.addEventListener('input', () => {
  document.getElementById("outer").style.transform = `rotate(${slider.value}deg)`;
});

body {
        display:flex;
        align-items:center;
        justify-content:center;
    }
    #outer {
        background:red;
        height:20vw;
        position:relative;
        border-radius:50%;
        width:20vw;
        display:flex;
        justify-content:center;
    }
    #inner {
        transform:translateY(10%);
        border-bottom-left-radius:100%;
        border-bottom-right-radius:100%;
        position:absolute;
        bottom:0;
        background:darkgreen;
        width:10%;
        height:50%;
    }

<div id="outer">
  <div id="inner">
  </div>
</div>

<input min="0" max="360" type="range" id="slider">

uj5u.com熱心網友回復：

您需要提供一個符合 CSS 屬性的字串，例如rotateZ(180deg). 注意deg單位，因為沒有它就無法作業。

如果您想同時翻譯手，您還需要將其放入字串中，因為只有一個轉換屬性，您將覆寫它。順序在這里很重要：先旋轉，然后平移，否則結果會改變。不要忘記，您還需要移動transform-origin（參見示例）。

為滑塊的輸入事件添加一個監聽器，否則該值只會在腳本加載時應用一次。最好使用帶有反引號 ( ) 的模板文字，`rotateZ(${value}) translate(10%)`因為它更方便，但您也可以將字串添加在一起 ??( 'rotateZ(' value 'deg) translate(10%)')。

編輯：或者您可以像在另一個答案中一樣旋轉外圓，從而節省您的translate. 但是，如果您還想在圓圈中添加諸如時鐘數字之類的東西，那么在這種情況下它們也會被旋轉。

var slider = document.getElementById("slider"),
    hand = document.getElementById("inner");

slider.addEventListener('input', function() {
  hand.style.transform = `rotateZ(${this.value}deg) translateY(10%)`;
});

body {
  display:flex;
  align-items:center;
  justify-content:center;
}

#outer {
  background:red;
  height:20vw;
  position:relative;
  border-radius:50%;
  width:20vw;
  display:flex;
  justify-content:center;
}

#inner {
  transform: rotateZ(180deg) translateY(10%);
  transform-origin: top center;
  border-bottom-left-radius:100%;
  border-bottom-right-radius:100%;
  position:absolute;
  bottom:0;
  background:darkgreen;
  width:10%;
  height:50%;
}

<div id="outer"><div id="inner"></div></div>
<input min="0" max="360" type="range" id="slider">

uj5u.com熱心網友回復：

const inputValue = document.querySelector('#slider')
const inner = document.querySelector('.inner')
const rotate = document.querySelector('.rotate')
var root = document.querySelector(':root');
let oldVariable = 0
// Listen to any change in the progress bar
inputValue.addEventListener("change", function(){
  const newVariable = inputValue.value
  root.style.setProperty('--my-start-deg',`${oldVariable}deg`);
   root.style.setProperty('--my-end-deg', `${newVariable}deg`);
  inner.classList.remove("rotate");
  // Reset CSS Keyframes
  void inner.offsetWidth;
  
  inner.classList.add("rotate");
  oldVariable = inputValue.value;
});

:root {
    --my-start-deg: 0deg;
    --my-end-deg: 0deg;
}

#frame{
  position: relative;
  height: 200px;
  width: 200px;
  margin: 100px;
  padding: 10px;
  border:10px solid #000;
  border-radius:100%;
  top:50%;
  left:50%;
  transform:translate(-50%);
   transiton:all 3s;
}

.inner{
 position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%);
  height:100px;
  width:2px;
  border-radius:50%;
  background-color: red;
}

.rotate {
   transform: rotate(0deg);
  transform-origin: 0% 0%;
  animation: progressBar 3s;
  animation-fill-mode:forwards;
  transiton:all 3s;
  
}


@keyframes progressBar {
    0% {  transform: rotate(var(--my-start-deg)); }
    100% {  transform: rotate(var(--my-end-deg)); }
}

<input min="0" max="360" value="0" type="range" id="slider">
<div id="frame">
  <div class="inner rotate"></div>
</div>

標籤：javascript html css dom

上一篇：復制格式化的值并粘貼為文本

下一篇：如何從類中獲取元素的樣式值