时间戳

首页 > 解决方案 > 从这三个收音机中制作一个按钮

javascript - 从这三个收音机中制作一个按钮

问题描述

我有这个带有单选按钮的代码，但我想制作一个简单的按钮，它能够进行相同的侧面更改，我所做的每一次点击都会显示盒子的新侧面。

随意解释有关此代码的所有内容，我想学习。

var box = document.querySelector('.box'); //Choose the first from "images"//
var radioGroup = document.querySelector('.radio-group'); //choose the first item from buttons
var currentClass = '';

function changeSide() {
  var checkedRadio = radioGroup.querySelector(':checked');
  var showClass = 'show-' + checkedRadio.value;
  if (currentClass) {
    box.classList.remove(currentClass);
  }
  box.classList.add(showClass);
  currentClass = showClass;
}
// set initial side
changeSide();

radioGroup.addEventListener('change', changeSide);
body {
  font-family: sans-serif;
}

.scene {
  width: 640px;
  height: 360px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 1000px;
}

.box {
  width: 640px;
  height: 360px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-50px);
  transition: transform 1s;
}

.box.show-front {
  transform: translateZ( -50px) rotateY( 0deg);
}

.box.show-back {
  transform: translateZ( -50px) rotateY(-180deg);
}

.box.show-right {
  transform: translateZ(-150px) rotateY( -90deg);
}

.box.show-left {
  transform: translateZ(-150px) rotateY( 90deg);
}

.box.show-top {
  transform: translateZ(-100px) rotateX( -90deg);
}

.box.show-bottom {
  transform: translateZ(-100px) rotateX( 90deg);
}

.box__face {
  position: absolute;
  border: 2px solid black;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.box__face--front,
.box__face--back {
  width: 640px;
  height: 360px;
  line-height: 200px;
}

.box__face--right,
.box__face--left {
  width: 100px;
  height: 200px;
  left: 100px;
  line-height: 500px;
}

.box__face--top,
.box__face--bottom {
  width: 640px;
  height: 360px;
  top: -60px;
  line-height: 100px;
}

.box__face--front {
  background: hsla( 0, 100%, 50%, 0.7);
}

.box__face--right {
  background: hsla( 60, 100%, 50%, 0.7);
}

.box__face--back {
  background: hsla(120, 100%, 50%, 0.7);
}

.box__face--left {
  background: hsla(180, 100%, 50%, 0.7);
}

.box__face--top {
  background: hsla(240, 100%, 50%, 0.7);
}

.box__face--bottom {
  background: hsla(300, 100%, 50%, 0.7);
}

.box__face--front {
  transform: rotateY( 0deg) translateZ( 180px);
}

.box__face--back {
  transform: rotateY(180deg) translateZ( 180px);
}

.box__face--right {
  transform: rotateY( 90deg) translateZ(150px);
}

.box__face--left {
  transform: rotateY(-90deg) translateZ(150px);
}

.box__face--top {
  transform: rotateX( 90deg) translateZ(120px);
}

.box__face--bottom {
  transform: rotateX(-90deg) translateZ(240px);
}

label {
  margin-right: 10px;
}
<div class="scene">
  <div class="box">
    <div class="box__face box__face--front"><img src="23.png " alt="Smiley face" height="360" width="640"></div>
    <label>
          <input type="radio" name="rotate-cube-side" value="bottom"  class="lab"/> bottom
        </label>
    <div class="box__face box__face--back">back</div>
    <div class="box__face box__face--right">right</div>
    <div class="box__face box__face--left">left</div>
    <div class="box__face box__face--top"><img src="23.png " alt="Smiley face" height="100" width="300"></div>
    <div class="box__face box__face--bottom">bottom</div>
  </div>

</div>
<p class="radio-group">
  <label>
        <input type="radio" name="rotate-cube-side" value="front" checked /> front
      </label>
  <label>
        <input type="radio" name="rotate-cube-side" value="back" /> back
      </label>

  <label>
        <input type="radio" name="rotate-cube-side" value="top" /> top
      </label>

</p>


<br />

标签： javascripthtmldom

解决方案

创建 html 按钮。在脚本中创建一个数组。

let values = ["back", "front", "top"];

创建一个全局索引。

let index = 0;

实现您创建的按钮的单击事件并调用changeSide(values[index]). 对于上述调用，您需要修改现有代码。

function changeSide(value) {
  var showClass = 'show-' + value;
  if ( currentClass ) {
    box.classList.remove( currentClass );
  }
  box.classList.add( showClass );
  currentClass = showClass;
}

以您想要的方式更改索引。我的意思是增加它或选择随机值。我希望你得到答案。

推荐阅读