给span随机给背景色如何做呢?


<!DOCTYPE html>
<html>
<head>
<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="js/jquery.qrcode.min.js"></script>

<style type="text/css">
.color1
{
bgcolor="#9dc6eb"
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}

.color2
{
bgcolor="#9dc6eb"
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}

.color3
{
bgcolor="#f8c471"
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}

.color4
{
bgcolor="#b9a3ef"
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}

.color5
{
bgcolor="#fdb1ca"
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}
</style>
</head>
<body>
<span class="color_span">随机颜色的Span1</span>
<span class="color_span">随机颜色的Span2</span>
<span class="color_span">随机颜色的Span3</span>
<span class="color_span">随机颜色的Span4</span>
<span class="color_span">随机颜色的Span5</span>
<span class="color_span">随机颜色的Span6</span>
<span class="color_span">随机颜色的Span7</span>
<script>
$(".color_span").each(function(i, obj){
    var j = Math.floor(Math.random()*5);
    switch(j){
        case 0:
        $(this).addClass("color1");
        break;
        case 1:
        $(this).addClass("color2");
        break;
        case 2:
        $(this).addClass("color3");
        break;
        case 3:
        $(this).addClass("color4");
        break;
        default:
        $(this).addClass("color5");
        break;
    }
})
</script>
</body>
</html>

这段代码无效呢~
还有 不希望按这个顺序给颜色 而是这5种颜色随机给 怎么做呢?


 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.qrcode.min.js"></script>
<style type="text/css">
.color1
{
background-color: #9dc6eb;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}
.color2
{
background-color: #5ad785;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}
.color3
{
background-color: #f8c471;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}
.color4
{
background-color: #b9a3ef;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}
.color5
{
background-color: #fdb1ca;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}
</style>
</head>
<body>
<span class="color_span">随机颜色的Span1</span>
<span class="color_span">随机颜色的Span2</span>
<span class="color_span">随机颜色的Span3</span>
<span class="color_span">随机颜色的Span4</span>
<span class="color_span">随机颜色的Span5</span>
<span class="color_span">随机颜色的Span6</span>
<span class="color_span">随机颜色的Span7</span>
<script>
$(".color_span").each(function(i,job){
    var j = Math.floor(Math.random()*5);
    switch(j){
        case 0:
        $(this).addClass("color1");
        break;
        case 1:
        $(this).addClass("color2");
        break;
        case 2:
        $(this).addClass("color3");
        break;
        case 3:
        $(this).addClass("color4");
        break;
        default:
        $(this).addClass("color5");
        break;
    }
});
</script>
</body>
</html>

样式有误，

.color1
{
background-color: #9dc6eb;// 这里
border-radius: 25px;
border: 2px solid #73AD21;
padding: 2px;
}

随机颜色：

$(".color_span").each(function(i, obj){
    var j = Math.floor(Math.random()*5)+1;
    $(this).addClass("color"+j);
})

你要实现span随机给背景色，那么如果在前端，你只能通过js来实现，颜色由26个字母以及数字组成。那么你就可以这样去做。
通过随机生成一个数字或者字母，经过六次循环后，就可以得到六个随机的字母或者数字，然后将它们进行拼接，组成对应的颜色。
最后设置其span的样式。
可以查看js的一些使用。
你的那种方式单单只能针对其中几种设定的颜色进行随机变换。

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 
  <style type="text/css">
        .color1 {
            background-color: #9dc6eb;
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 2px;
        }
        .color2 {
            background-color: #5ad785;
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 2px;
        }
        .color3 {
            background-color: #f8c471;
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 2px;
        }
        .color4 {
            background-color: #b9a3ef;
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 2px;
        }
        .color5 {
            background-color: #fdb1ca;
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 2px;
        }
    </style> 
 </head> 
 <body> 
  <span class="color_span">随机颜色的Span1</span> 
  <span class="color_span">随机颜色的Span2</span> 
  <span class="color_span">随机颜色的Span3</span> 
  <span class="color_span">随机颜色的Span4</span> 
  <span class="color_span">随机颜色的Span5</span> 
  <span class="color_span">随机颜色的Span6</span> 
  <span class="color_span">随机颜色的Span7</span> 
  <script>
        $(".color_span").each(function(i, job) {  
            var j = Math.floor(Math.random() * 5);  
            switch (j) {    
                case 0:
                        $(this).addClass("color1");    
                    break;    
                case 1:
                        $(this).addClass("color2");    
                    break;    
                case 2:
                        $(this).addClass("color3");    
                    break;    
                case 3:
                        $(this).addClass("color4");    
                    break;    
                default:
                        $(this).addClass("color5");    
                    break;  
            }
        });
    </script>  
 </body>
</html>

img

要实现span随机给背景色，我们都知道颜色由26个字母以及数字组成，你可以试试通过随机生成一个数字或者字母，经过六次循环后，就可以得到六个随机的字母或者数字，然后将它们进行拼接，组成对应的颜色。
最后设置其span的样式。
可以查看js的一些使用。
你的那种方式单单只能针对其中几种设定的颜色进行随机变换。

emm是这样的，你这个代码已经是正确的了，颜色不是顺序给，而是在switch里不断查找

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 
  <style type="text/css">
        .color1 {
            background-color: #9dc6eb;
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 2px;
        }
        .color2 {
            background-color: #5ad785;
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 2px;
        }
        .color3 {
            background-color: #f8c471;
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 2px;
        }
        .color4 {
            background-color: #b9a3ef;
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 2px;
        }
        .color5 {
            background-color: #fdb1ca;
            border-radius: 25px;
            border: 2px solid #73AD21;
            padding: 2px;
        }
    </style> 
 </head> 
 <body> 
  <span class="color_span">随机颜色的Span1</span> 
  <span class="color_span">随机颜色的Span2</span> 
  <span class="color_span">随机颜色的Span3</span> 
  <span class="color_span">随机颜色的Span4</span> 
  <span class="color_span">随机颜色的Span5</span> 
  <span class="color_span">随机颜色的Span6</span> 
  <span class="color_span">随机颜色的Span7</span> 
  <script>
        $(".color_span").each(function(i, job) {  
            var j = Math.floor(Math.random() * 5);  
            switch (j) {    
                case 0:
                        $(this).addClass("color1");    
                    break;    
                case 1:
                        $(this).addClass("color2");    
                    break;    
                case 2:
                        $(this).addClass("color3");    
                    break;    
                case 3:
                        $(this).addClass("color4");    
                    break;    
                default:
                        $(this).addClass("color5");    
                    break;  
            }
        });
    </script>  
 </body>
</html>

下面的js方法可以返回一个随机的颜色，你可以给你的span赋上去
var getRandomColor = function(){
return (function(m,s,c){
return (c ? arguments.callee(m,s,c-1) : '#') +
s[m.floor(m.random() * 16)]
})(Math,'0123456789abcdef',5)
}
亲测有效的， 就这几行 解决问题，忘采纳

img

按照你原本代码修改 你的代码有些错误点：

img
把你自己css样式改一下就好了 语法错误 如下

<!DOCTYPE html>
 <html>
     <head>
         <script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
        <script src="js/jquery.qrcode.min.js"></script>
         <style type="text/css">
             .color1 {
                background-color: #9dc6eb;
                 border-radius: 25px;
                 border: 2px solid #73AD21;
                 padding: 2px;
             }

             .color2 {
                 background-color: #9dc6eb;
                 border-radius: 25px;
                 border: 2px solid #73AD21;
                 padding: 2px;
             }

             .color3 {
                 background-color: #f8c471;
                 border-radius: 25px;
                 border: 2px solid #73AD21;
                 padding: 2px;
             }

             .color4 {
                 background-color: #b9a3ef;
                 border-radius: 25px;
                 border: 2px solid #73AD21;
                 padding: 2px;
             }

             .color5 {
                 background-color: #fdb1ca;
                 border-radius: 25px;
                 border: 2px solid #73AD21;
                 padding: 2px;
             }
         </style>
     </head>
     <body>
         <span class="color_span">随机颜色的Span1</span>
         <span class="color_span">随机颜色的Span2</span>
         <span class="color_span">随机颜色的Span3</span>
         <span class="color_span">随机颜色的Span4</span>
         <span class="color_span">随机颜色的Span5</span>
         <span class="color_span">随机颜色的Span6</span>
         <span class="color_span">随机颜色的Span7</span>
         <script>
             $(".color_span").each(function(i, obj) {
                 var j = Math.floor(Math.random() * 5);
                 switch (j) {
                     case 0:
                         $(this).addClass("color1");
                         break;
                     case 1:
                         $(this).addClass("color2");
                         break;
                     case 2:
                         $(this).addClass("color3");
                         break;
                     case 3:
                         $(this).addClass("color4");
                         break;
                     default:
                         $(this).addClass("color5");
                         break;
                 }
             })
         </script>
     </body>
 </html>