Question

我是网络开发人员的初学者，我需要做这个调色板作业。我按照所有说明操作，但我的问题是我的调色板根本无法在浏览器中显示。有没有我误解的指示？

HTML code：

<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>JavaScript Fun</title>
<style type='text/css'>
    .palette {
        float: left;
        height: 50px;
        width: 100px;
    }
</style>
<script type='text/javascript'>
</script>
 </head>
 <body>
  <div id='palette-div' style='border:2px solid white; float:left;'>&nbsp;</div>
  <div id='color-div' style='clear:both; position:relative; left:0;'>&nbsp;</div>

 <script type='text/javascript'>
    //<![CDATA[
    //<!--

    // 1. Define an array with indexes for at least 8 colors.
    var colors = ["#7FFF00", "#8B008B", "#E9967A", "#00BFFF", "#DAA520", "#CD5C5C"];

    var palette = "";
    // 2. Iterate through the colors array, concatenating a string with a div with class 'palette
    //    to a variable - this will be your palette.

    // 3.   Add an inline style for each div so that the background color of the div corresponds 
    //      to the current index of the colors array.

    // 4. Add an event listener to each div so that setBgColor() will be called when 
    //      the div is clicked.

            for(var i = 0; i < colors.length; i++) {
                palette = palette + " <div class='palette'" + " style='background-color:" + i
                    + "' onclick='setBgColor()'>  </div>";
            }

    // 5. Add the palette variable as the contents of the 'palette-div' div.
            document.getElementById('palette-div').innerHTML = palette;

    function setBgColor( clickedDiv ) {
        // 6. Create a variable that's equal to the background color of clickedDiv
            var currentColor = clickedDiv.style.backgroundColor;

        // 7. Set the contents of 'color-div' equal to the variable in (6).
        //      (The RGB value should be displayed in 'color-div', not the color itself).
            document.getElementById('color-div').innerHTML = currentColor;

        // 8. Set the background color of the entire page to be background color of clickedDiv.
            document.body.style.backgroundColor = currentColor;

        // 9. Now, just for fun, move 'color-div' 10px to the right, every time a 
        //      colored div is clicked.
            document.getElementById('color-div').style.left = '10px';
    }
    //-->
    //]]>
</script>

如何使用javascript显示我的调色板？

0 个答案: