切换颜色声明 -

时间:2018-04-27 07:48:20

标签: javascript colors switch-statement drag

我希望为我的拖动功能制作一个switch语句。 基本上希望能够点击下面提到的四个按钮之一并让它切换拖动和放大器。颜色功能到按钮的颜色。

  • 更新,我现在已经完成了27/04

         08:00-16:30   08:30-17:00   09:00-17:30   09:30-18:00   集合
      <script>
    var box;
    var boxArray;
    var backgroundColor;
    var text;
    boxArray = [];
    
    box = document.getElementsByClassName("sidebar");
    for ( var i = 0; i < box.length; i++ ) (function(i){
    box[i].onmousemove = function(e) {
    if(e.buttons == 1)
    box[i].style.backgroundColor = backgroundColor, box[i].innerHTML = text, box[i].style.fontSize = "10px", box[i].style.padding = "4px";
    }
    })(i);
    
    document.addEventListener("contextmenu", function (e) {
    e.preventDefault();
    }, false);
    
    
    
    function changeColor(color){
      switch(color) {
        case 'o' :
          backgroundColor = "orange";
          text = "08:00-16:30";
          break;
        case 'r' :
          backgroundColor = "red";
          text ="08:30-17:00";
          break;
        case 'g' :
          backgroundColor = "green";
          text ="09:00-17:30";
          break;
        case 'p' :
          backgroundColor = "purple";
          text ="09:00-17:30";
        }
      }
    

2 个答案:

答案 0 :(得分:0)

开关语句在语法上是不正确的。您需要提供一个要将开关案例与之比较的参数,并且在开关语句中,您不需要使用大括号。

这样的事情:

switch (color) {
   case "o":
     backgroundColor = "orange";
     break;
   case "r":
     backgroundColor = "red";
     break;
   case "g":
     backgroundColor = "green";
     break;
   case "p":
     backgroundColor = "purple";
     break;
}

请注意&#34; o&#34;,&#34; r&#34;,&#34; g&#34;和&#34; p&#34;在引号中,因为它们是字符串值,如果省略引号,就像在代码示例中所做的那样,JavaScript会将它们解释为变量,这些变量将是未定义的。

答案 1 :(得分:0)

我自己刚刚解决了这个问题 -

      <script>
    var box;
    var boxArray;
    var backgroundColor;
    var text;
    boxArray = [];

    box = document.getElementsByClassName("sidebar");
    for ( var i = 0; i < box.length; i++ ) (function(i){
    box[i].onmousemove = function(e) {
    if(e.buttons == 1)
    box[i].style.backgroundColor = backgroundColor, box[i].innerHTML = text, box[i].style.fontSize = "10px", box[i].style.padding = "4px";
    }
    })(i);

    document.addEventListener("contextmenu", function (e) {
    e.preventDefault();
    }, false);



    function changeColor(color){
      switch(color) {
        case 'o' :
          backgroundColor = "orange";
          text = "08:00-16:30";
          break;
        case 'r' :
          backgroundColor = "red";
          text ="08:30-17:00";
          break;
        case 'g' :
          backgroundColor = "green";
          text ="09:00-17:30";
          break;
        case 'p' :
          backgroundColor = "purple";
          text ="09:00-17:30";
        }
      }



      </script>