如何使用纯JavaScript客户端创建彩虹按钮

huangapple go评论72阅读模式
英文:

How do I make a rainbow button using Vanilla Javascript Client

问题

所以,我正在为一个项目制作一个面板...我想制作一个JavaScript版本的彩虹按钮,不是渐变的,它会平滑地改变颜色,就像彩虹LED灯一样。

例如,我们有一个名为 "set" 的变量。
如果 "set" 等于 true,那么按钮就是彩虹的。否则,它就是普通的。

我已经尝试了各种方法,但没有任何代码可以正常工作。

英文:

So, I'm making a panel for a project.. and I'd like to make a javascript version of a rainbow button, not gradient, it would smoothly change colors, like a rainbow LED light.

For example, we have a variable named "set"
If set equals true, then the button is rainbow. Otherwise, its normal.

I've been trying everything and have no luck with any code working.

答案1

得分: -1

以下是您要翻译的代码部分:

  1. let rainbowButton = document.getElementById("rainbow-button");
  2. function toggleLight() {
  3. if (rainbowButton.classList.contains("rainbow-light"))
  4. rainbowButton.classList.remove("rainbow-light")
  5. else
  6. rainbowButton.classList.add("rainbow-light")
  7. }
  1. #rainbow-button {
  2. border: none;
  3. border-radius: 8px;
  4. background-color: gray;
  5. padding: 8px;
  6. }
  7. .rainbow-light {
  8. animation: rainbow-animation 2.5s linear;
  9. animation-iteration-count: infinite;
  10. }
  11. @keyframes rainbow-animation {
  12. 100%, 0% {
  13. background-color: rgb(255, 0, 0);
  14. }
  15. 8% {
  16. background-color: rgb(255, 127, 0);
  17. }
  18. 16% {
  19. background-color: rgb(255, 255, 0);
  20. }
  21. 25% {
  22. background-color: rgb(127, 255, 0);
  23. }
  24. 33% {
  25. background-color: rgb(0, 255, 0);
  26. }
  27. 41% {
  28. background-color: rgb(0, 255, 127);
  29. }
  30. 50% {
  31. background-color: rgb(0, 255, 255);
  32. }
  33. 58% {
  34. background-color: rgb(0, 127, 255);
  35. }
  36. 66% {
  37. background-color: rgb(0, 0, 255);
  38. }
  39. 75% {
  40. background-color: rgb(127, 0, 255);
  41. }
  42. 83% {
  43. background-color: rgb(255, 0, 255);
  44. }
  45. 91% {
  46. background-color: rgb(255, 0, 127);
  47. }
  48. }
  1. <input id="rainbow-button" type="button" onclick="toggleLight()" value="Rainbow button">

请注意,这段代码是用于创建一个带有彩虹光效果的按钮的示例,通过JavaScript和CSS实现。

英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let rainbowButton = document.getElementById(&quot;rainbow-button&quot;);
  2. function toggleLight() {
  3. if (rainbowButton.classList.contains(&quot;rainbow-light&quot;))
  4. rainbowButton.classList.remove(&quot;rainbow-light&quot;)
  5. else
  6. rainbowButton.classList.add(&quot;rainbow-light&quot;)
  7. }

<!-- language: lang-css -->

  1. #rainbow-button {
  2. border: none;
  3. border-radius: 8px;
  4. background-color: gray;
  5. padding: 8px;
  6. }
  7. .rainbow-light {
  8. animation: rainbow-animation 2.5s linear;
  9. animation-iteration-count: infinite;
  10. }
  11. @keyframes rainbow-animation {
  12. 100%, 0% {
  13. background-color: rgb(255, 0, 0);
  14. }
  15. 8% {
  16. background-color: rgb(255, 127, 0);
  17. }
  18. 16% {
  19. background-color: rgb(255, 255, 0);
  20. }
  21. 25% {
  22. background-color: rgb(127, 255, 0);
  23. }
  24. 33% {
  25. background-color: rgb(0, 255, 0);
  26. }
  27. 41% {
  28. background-color: rgb(0, 255, 127);
  29. }
  30. 50% {
  31. background-color: rgb(0, 255, 255);
  32. }
  33. 58% {
  34. background-color: rgb(0, 127, 255);
  35. }
  36. 66% {
  37. background-color: rgb(0, 0, 255);
  38. }
  39. 75% {
  40. background-color: rgb(127, 0, 255);
  41. }
  42. 83% {
  43. background-color: rgb(255, 0, 255);
  44. }
  45. 91% {
  46. background-color: rgb(255, 0, 127);
  47. }
  48. }

<!-- language: lang-html -->

  1. &lt;input id=&quot;rainbow-button&quot; type=&quot;button&quot; onclick=&quot;toggleLight()&quot; value=&quot;Rainbow button&quot;&gt;

<!-- end snippet -->

You don't really need JS for this. This type of light can be done using CSS animations. If you want to control when the light is on/off you can just add/remove CSS class of your button.

huangapple
  • 本文由 发表于 2023年5月30日 13:01:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76361731.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定