0

我正在尝试将以下代码添加到我的博客中。它有 jquery CDN。它在我的机器上运行良好，但在我的博客中运行不正常。这是已经在我的博客Color Scheme Generator上发布的配色方案生成器。我只是想在我的博客上测试它的初始版本。

      <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<style>
#red, #green, #blue {
          float: left;
           clear: left;
            width: 300px;
             margin: 15px;
       }
       #swatch {
               width: 120px;
                height: 100px;
                  margin-top: 18px;
              margin-left: 350px;
                background-image: none;
         }
       #red .ui-slider-range { background: #ef2929; }
        #red .ui-slider-handle { border-color: #ef2929; }
        #green .ui-slider-range { background: #8ae234; }
            #green .ui-slider-handle { border-color: #8ae234; }
            #blue .ui-slider-range { background: #729fcf; }
             #blue .ui-slider-handle { border-color: #729fcf; }
       </style>
     <script>
  function hexFromRGB(r, g, b) {
     var hex = [r.toString( 16 ),g.toString( 16 ),b.toString( 16 )];
        $.each( hex, function( nr, val ) {
                if ( val.length === 1 ) {
                        hex[ nr ] = "0" + val;
           }
            });
         return hex.join( "" ).toUpperCase();
         }
     function refreshSwatch() {
       var red = $( "#red" ).slider( "value" ),
        green = $( "#green" ).slider( "value" ),
         blue = $( "#blue" ).slider( "value" ),
         hex = hexFrom RGB( red, green, blue );
            $( "#swatch" ).css( "background-color", "#" + hex );
         color_match();
      }
      jQuery(document).ready(function() {
      $( "#red, #green, #blue" ).slider({
         orientation: "horizontal",
         range: "min",
          max: 255,
         value: 127,
        slide: refreshSwatch
         });
       $( "#red" ).slider( "value", 255 );
        $( "#green" ).slider( "value", 140 );
            $( "#blue" ).slider( "value", 60 );
       refreshSwatch();
        });
 </script>

<script type="text/javascript">

    function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
        function toHex(n) {
              n = parseInt(n,10);
             if (isNaN(n)) return "00";
         n = Math.max(0,Math.min(n,255));
             return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
     }

   function color_match()
  {
          var red,green,blue;
            red = $( "#red" ).slider( "value" );
           green = $( "#green" ).slider( "value" );
        blue = $( "#blue" ).slider( "value" );

        var rm,gm,bm;
         var str="";
            var i=0;
            var j=0;
 for(j=0;j<=9;j++)
 {
        rm=Math.floor(Math.random()*255);
        gm=Math.floor(Math.random()*255);
        bm=Math.floor(Math.random()*255);
        str=str+"<table>";
        str=str+"<tr>";
        var k;
         k=2;
        for(i=0;i<6;i++)
          {
            rm = (rm+red)/k;
              gm = (gm+green)/k;
            bm = (bm+blue)/k;
         var bgcolor="";
             bgcolor=rgbToHex(rm,gm,bm);

             str=str+"<td id='swatch' style='background-color:#"+bgcolor+";width: 80px; height: 40px; '>&nbsp;&nbsp;#"+bgcolor+"&nbsp;&nbsp;</td>";

   }
        str=str+"</tr>";
   str=str+"</table>";
     str=str+"<br />";

    }
  $( "#color_seq" ).html(str);
}
</script>
<br />
<div id="red">
</div>
<div id="green">
</div>
<div id="blue">
</div>
<div class="ui-widget-content ui-corner-all" id="swatch">
</div>
<br />
<input id="color_gen" onclick="color_match();" type="button" value="Generate" />
 <br />
<div id="color_seq">
</div>

它在我的本地机器上运行良好，但我无法弄清楚为什么这在博客上不起作用。

4

0 回答 0