代码之家  ›  专栏  ›  技术社区  ›  Dr.PB

在切换开关内添加开/关文本

css html javascript
  •  0
  • Dr.PB  · 技术社区  · 6 年前

    如问题所示,我想添加“on”或“off”文本 里面 切换开关取决于开关状态,使用 JS 只有。本主题中的示例很少,但无法掌握。MWE如下所示: 

    window.addEventListener('DOMContentLoaded', function() {
  var swPos = [Math.random() >= 0.5];
  var swConnection = ["a0"];
  switchPosition(swPos, swConnection);

  var togglebtns = document.getElementsByClassName('togglebtn');
  for (var i = 0; i < togglebtns.length; i++) {
    togglebtns[i].addEventListener('click', function() {
      changingPin = Number(this.id.substr(2));
      swPos[changingPin] = !swPos[changingPin];

      drawSwitch(this.id.substr(2), swPos[changingPin]);
    });
  }
}, false);

function switchPosition(swPos, swConnection) {
  for (i = 0; i < swConnection.length; i++) {
    drawSwitch(pad(i, 2), swPos[i]);
  }
}

function drawSwitch(pinNoStr, state) {
  var btnWrapper = document.getElementById('tb' + pinNoStr);
  var btn = document.getElementById('mt' + pinNoStr);
  if (state == true) {
    btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
    btnWrapper.style.background = '#7bc77b';
    btnWrapper.style.border = '1px solid #7bc77b';

    document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
        background: gradient-gradient(#ffffff, #77a1b9);\
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(100,231,253,1),  inset 0 0 8px rgba( 61,157,247,0.8),  inset 0 -2px 5px rgba(185,231,253,0.3),  inset 0 -3px 8px rgba(185,231,253,0.5);'
  } else {
    btn.style.left = '0px';
    btnWrapper.style.background = 'lightgrey';
    btnWrapper.style.border = '1px solid lightgrey';

    document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
        background: gradient-gradient(#36455b, #283446);\
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.2),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(185,231,253,0),  inset 0 0 8px rgba(0,0,0,0.9),  inset 0 -2px 5px rgba(0,0,0,0.3),  inset 0 -5px 5px rgba(0,0,0,0.5);'
  }
}

function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
    * {
  margin: 0;
  padding: 0;
}

.dc {
  margin: 10px 50px 10px 50px;
  padding: 10px 10px 10px 10px;
  background: rgb(183, 154, 216);
}

.tbanimate {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.togglebtn {
  width: 75px;
  height: 33px;
  float: left;
  background: lightgray;
  border-radius: 9999px;
  border: 2px solid lightgray;
}

.mainToggle {
  width: 33px;
  height: 33px;
  background: whitesmoke;
  border-radius: 9999px;
  position: relative;
  left: 0;
}

.light {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 10px;
  border-radius: 9999px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}
    <section class="dc" id="00">
  <div>
    <div class="togglebtn tbanimate" id="tb00">
      <div class="mainToggle tbanimate" id="mt00"></div>
    </div>
    <div class="light" id="l00"></div>
  </div>
</section>

    额外:这可以做一个可拖动的开关吗?当前,只有单击才能更改状态。如果我能把圆从一边拖到另一边就好了。纯JS,CSS。

    2 回复  |  直到 6 年前
        1
  •  0
  •   Observer    6 年前

    我已经设法处理了伪元素:之后和之前 你需要给父母相对的位置,绝对的位置给:之后和之前。 

    (()=>{
var swPos = [Math.random() >= 0.5];
  var swConnection = ["a0"];
   if(swPos[0]){
     document.getElementById("tb00").classList.add("on-text");
			document.getElementById("tb00").classList.remove("off-text");
   } else {
     document.getElementById("tb00").classList.add("off-text");
     document.getElementById("tb00").classList.remove("on-text");
   }
  switchPosition(swPos, swConnection);

  var togglebtns = document.getElementsByClassName('togglebtn');
  for (var i = 0; i < togglebtns.length; i++) {
    togglebtns[i].addEventListener('click', function() {
      changingPin = Number(this.id.substr(2));
      swPos[changingPin] = !swPos[changingPin];
      if(swPos[changingPin]){
      document.getElementById("tb00").classList.add("on-text");
			document.getElementById("tb00").classList.remove("off-text");
      
      } else {
         document.getElementById("tb00").classList.add("off-text");
         document.getElementById("tb00").classList.remove("on-text");
      }
      drawSwitch(this.id.substr(2), swPos[changingPin]);
    });
  }
})();

function switchPosition(swPos, swConnection) {
  for (i = 0; i < swConnection.length; i++) {
    drawSwitch(pad(i, 2), swPos[i]);
  }
}

function drawSwitch(pinNoStr, state) {
  var btnWrapper = document.getElementById('tb' + pinNoStr);
  var btn = document.getElementById('mt' + pinNoStr);
  if (state == true) {
    btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
    btnWrapper.style.background = '#7bc77b';
    btnWrapper.style.border = '1px solid #7bc77b';

    document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
        background: gradient-gradient(#ffffff, #77a1b9);\
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(100,231,253,1),  inset 0 0 8px rgba( 61,157,247,0.8),  inset 0 -2px 5px rgba(185,231,253,0.3),  inset 0 -3px 8px rgba(185,231,253,0.5);'
  } else {
    btn.style.left = '0px';
    btnWrapper.style.background = 'lightgrey';
    btnWrapper.style.border = '1px solid lightgrey';

    document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
        background: gradient-gradient(#36455b, #283446);\
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.2),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(185,231,253,0),  inset 0 0 8px rgba(0,0,0,0.9),  inset 0 -2px 5px rgba(0,0,0,0.3),  inset 0 -5px 5px rgba(0,0,0,0.5);'
  }
}

function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
    * {
  margin: 0;
  padding: 0;
}

.dc {
  margin: 10px 50px 10px 50px;
  padding: 10px 10px 10px 10px;
  background: rgb(183, 154, 216);
}

.tbanimate {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.togglebtn {
  width: 75px;
  height: 33px;
  float: left;
  background: lightgray;
  border-radius: 9999px;
  border: 2px solid lightgray;
  position: relative;
}

.on-text:before {
  content: 'On';
  position: absolute;
  top: 8px;
  left: 8px;
}

.off-text:after {
  content: 'Off';
  position: absolute;
  top: 8px;
  right: 8px;
}

.mainToggle {
  width: 33px;
  height: 33px;
  background: whitesmoke;
  border-radius: 9999px;
  position: relative;
  left: 0;
}

.light {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 10px;
  border-radius: 9999px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}
    <section class="dc" id="00">
  <div>
    <div class="togglebtn tbanimate off-text" id="tb00">
      <div class="mainToggle tbanimate" id="mt00"></div>
    </div>
    <div class="light" id="l00"></div>
  </div>
</section>
        2
  •  1
  •   Unmitigated    6 年前

    你改变了 textContent 的 #mt00 div 基于内部布尔值 swPos . 

    * {
  margin: 0;
  padding: 0;
}

.dc {
  margin: 10px 50px 10px 50px;
  padding: 10px 10px 10px 10px;
  background: rgb(183, 154, 216);
}

.tbanimate {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.togglebtn {
  width: 75px;
  height: 33px;
  float: left;
  background: lightgray;
  border-radius: 9999px;
  border: 2px solid lightgray;
}

.mainToggle {
  width: 33px;
  height: 33px;
  background: whitesmoke;
  border-radius: 9999px;
  position: relative;
  left: 0;
}

.light {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 10px;
  border-radius: 9999px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}

#mt00{
  vertical-align: middle;
  display: table-cell;
}
    <section class="dc" id="00">
  <div>
    <div class="togglebtn tbanimate" id="tb00">
      <div class="mainToggle tbanimate" id="mt00"></div>
    </div>
    <div class="light" id="l00"></div>
  </div>
  <span id="result"></span>
</section>
<script>
window.addEventListener('DOMContentLoaded', function() {
  var swPos = [Math.random() >= 0.5];
  var swConnection = ["a0"];
  var mtoo = document.getElementById('mt00');
   if(swPos[0]){
      mtoo.innerHTML = "On";
      
   } else {
      mtoo.innerHTML= "Off";
   }
  switchPosition(swPos, swConnection);

  var togglebtns = document.getElementsByClassName('togglebtn');
  for (var i = 0; i < togglebtns.length; i++) {
    togglebtns[i].addEventListener('click', function() {
      changingPin = Number(this.id.substr(2));
      swPos[changingPin] = !swPos[changingPin];
      if(swPos[changingPin]){
       mtoo.innerHTML = "On";
      } else {
       mtoo.innerHTML = "Off";
      }
      drawSwitch(this.id.substr(2), swPos[changingPin]);
    });
  }
}, false);

function switchPosition(swPos, swConnection) {
  for (i = 0; i < swConnection.length; i++) {
    drawSwitch(pad(i, 2), swPos[i]);
  }
}

function drawSwitch(pinNoStr, state) {
  var btnWrapper = document.getElementById('tb' + pinNoStr);
  var btn = document.getElementById('mt' + pinNoStr);
  if (state == true) {
    btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
    btnWrapper.style.background = '#7bc77b';
    btnWrapper.style.border = '1px solid #7bc77b';

    document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
        background: gradient-gradient(#ffffff, #77a1b9);\
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(100,231,253,1),  inset 0 0 8px rgba( 61,157,247,0.8),  inset 0 -2px 5px rgba(185,231,253,0.3),  inset 0 -3px 8px rgba(185,231,253,0.5);'
  } else {
    btn.style.left = '0px';
    btnWrapper.style.background = 'lightgrey';
    btnWrapper.style.border = '1px solid lightgrey';

    document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
        background: gradient-gradient(#36455b, #283446);\
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.2),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(185,231,253,0),  inset 0 0 8px rgba(0,0,0,0.9),  inset 0 -2px 5px rgba(0,0,0,0.3),  inset 0 -5px 5px rgba(0,0,0,0.5);'
  }
}

function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
</script>
    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Thirumal isireddy  ·  在导航栏顺风css中,img被扭曲,而不是将元素推到旁边
    1 年前
    eXor420  ·  如何在脚本标记中使用导出的函数?
    1 年前
    Hadi  ·  如何在无效和有效输入中选择用于更改样式的psoudo元素(after)
    1 年前
    IonicMan  ·  剑道网格在宽度过大时不显示某些列
    1 年前
    Kernier  ·  如何将数学公式支持添加到StacksEditor?
    1 年前
    Md. Ibrahim  ·  CSS网格项溢出小屏幕滚动
    1 年前
    Arjun V Srivatsa  ·  如何将系统时区信息分配给javascript中的变量?
    1 年前
    Akshay mek  ·  Vscode扩展建议不适用于某些文件夹
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号