javascript单击更改颜色

Question

我有这样一个立方体我想点击每个墙上改变的颜色我不知道从哪里开始不久前我开始学习编程我必须使用javascript onclick？ 我想稍后添加一个函数，例如，在旋转时会改变立方体的方向

这是我的代码：

＆＃13;

＆＃13;

{MYSQL_DATABASE}

＆＃13;

  #scena {
  position: relative;
  perspective: 1000px;
  width: 200px;
  height: 200px;
  margin: 140px;
  border: 1px solid rebeccapurple;
}

#kostka {
  position: absolute;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  animation: obracaniekostki 7s infinite alternate
}

.sciana {
  opacity: 0.6;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 200px;
  font-size: 50px;
}

div.front {
  background-color: aqua;
  transform: translateZ(100px);
}

div.back {
  background-color: red;
  transform: rotateX(180deg) translateZ(100px);
}

div.left {
  background-color: yellow;
  transform: rotateY(-90deg) translateZ(100px);
}

div.right {
  background-color: orange;
  transform: rotateY(90deg) translateZ(100px);
}

div.top {
  background-color: purple;
  transform: rotateX(90deg) translateZ(100px);
}

div.bottom {
  background-color: rgb(68, 128, 0);
  transform: rotateX(-90deg) translateZ(100px);
}

@keyframes obracaniekostki {
  from {}
  to {
    transform: rotateZ(360deg) rotateX(360deg);
  }

＆＃13;

＆＃13;

＆＃13;

Answer 1

你在寻找类似的东西吗？

修改

正如您所说，我添加了更改轮换的代码。诀窍是改变CSS动画。如果您希望转换流畅，则必须更改代码以启动第一个停止第一个动画的动画（本文可以提供帮助：https://css-tricks.com/controlling-css-animations-transitions-javascript/）。

＆＃13;

＆＃13;

 final ActivityManager activityManager = (ActivityManager) getSystemService    (Context.ACTIVITY_SERVICE);
    final List<ActivityManager.RunningTaskInfo> recentTasks = activityManager.getRunningTasks(Integer.MAX_VALUE);

    for (int i = 0; i < recentTasks.size(); i++)
    {
        Log.d("Executed app", "Application executed : " +recentTasks.get(i).baseActivity.toShortString()+ "\t\t ID: "+recentTasks.get(i).id+"");

      //  tv.setText(recentTasks.get(i).baseActivity.toShortString());
        tv.setText("Application executed : "
                        +recentTasks.get(i).baseActivity.toShortString()+ "\t\t ID: "+recentTasks.get(i).id+"\n");

    }

＆＃13;

document.querySelectorAll('.sciana')
  .forEach(faceElement => {
    faceElement.addEventListener('click', () => {

      // Do whatever you want here...

      // Gets the face of the cube...
      var face = faceElement.className
        .split(' ')
        .filter(_class => _class != 'sciana')[0];

      // Changes the color of the clicked face...
      faceElement.style.backgroundColor = 'red';     
    })
  });
  
 /* EDIT #1 */
 var cubeElement = document.querySelector('#kostka');
 cubeElement.addEventListener('click', () => {
  // Changes the rotation by applying another animation...
  cubeElement.classList.toggle('animation-1');
  cubeElement.classList.toggle('animation-2');
 });
 /* EDIT #1 END */

＆＃13;

#scena {
  position: relative;
  perspective: 1000px;
  width: 200px;
  height: 200px;
  margin: 140px;
  border: 1px solid rebeccapurple;
}


/* EDIT #1 */
#kostka {
  position: absolute;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}
/* EDIT #1 END */


/* EDIT #1 */
.animation-1 {
  animation: animation-1 7s infinite alternate;
}

.animation-2 {
  animation: animation-2 7s infinite alternate;
}
/* EDIT #1 END */

.sciana {
  opacity: 0.6;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 200px;
  font-size: 50px;
}

div.front {
  background-color: aqua;
  transform: translateZ(100px);
}

div.back {
  background-color: red;
  transform: rotateX(180deg) translateZ(100px);
}

div.left {
  background-color: yellow;
  transform: rotateY(-90deg) translateZ(100px);
}

div.right {
  background-color: orange;
  transform: rotateY(90deg) translateZ(100px);
}

div.top {
  background-color: purple;
  transform: rotateX(90deg) translateZ(100px);
}

div.bottom {
  background-color: rgb(68, 128, 0);
  transform: rotateX(-90deg) translateZ(100px);
}

/* EDIT #1 */
@keyframes animation-1 {
  from {}
  to {
    transform: rotateZ(360deg) rotateX(360deg);
  }
}
  
@keyframes animation-2 {
  from {}
  to {
    transform: rotateZ(-360deg) rotateX(-360deg);
  }
}
/* EDIT #1 END */

＆＃13;

＆＃13;

＆＃13;