Question

我正在尝试实现这个“链表动画”，用户可以选择矩形的颜色，它们看起来好像是在链表类型的图表中。

我在设置某种类型的循环时遇到问题，这些循环会在矩形放置到页面后改变矩形的位置？我的代码目前正在计算他们点击“插入按钮”的次数，然后根据计数将在页面上绘制矩形。我当然知道这不是最有效的方法，我想帮助我如何做得更好？一个for循环，一个数组？我的代码如下所示，它严重依赖于＆amp;其他语句现在，如果我想在将来删除节点，这不是最好的...请帮助。

基本上：我想在用户点击“插入”按钮后将矩形添加到另一端的末尾。如何在不依赖于if-else语句的情况下执行此操作？我怎么能把循环放到这里？

<!DOCTYPE html>
<html>
<head>
        <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">

        <style type='text/css'>
            body {
            font-family: 'Josefin Sans', sans-serif;
            line-height: 1.4em;
                }
                #left_column{
                    float: left;
                    width:50%;
                }
                #right_column{
                    float:right;
                    width:50%;
                }

                #Container{
                width: 100%;
                height: 400px;
                position: relative;
                background: yellow;
                }

        </style>


    <title>Rainbow</title>
</head>
<body>
    <div style="text-align: center">
        <h1 class="Title">rainbow</h1>
    </div>
    <div id = "left_column">
        <div id = Container>
            <canvas id = "panel"></canvas>
        </div>
    </div>
    <div id = "right_column">
            <select id = "colorNodes" style="margin-left: 10px">
                <option value = "red">red</option>
                <option value = "blue">blue</option>
                <option value = "green">green</option>
                <option value = "orange">orange</option>
            </select>
            <button onclick ="insertNode()" style="margin-left: 10px">Insert</button>   
            <button onclick = "searchNode()" style="margin-left: 10px">Search</button>  
            <button onclick = "deleteNode()" style="margin-left: 10px">Delete</button>  

    </div>

    <script>
        var count = 0; 

        function insertNode(){
            var e = document.getElementById("colorNodes");
            var f = e.options[e.selectedIndex].text;
            console.log("var f is " + f);

        if(count == 0){
            if(f == "red"){
                count++;
                var canvas = document.getElementById("panel");
                if(canvas.getContext){
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle = "#ff3535";
                    ctx.fillRect(20, 20, 150, 100);
                } 
            } else if(f == "blue"){
                count++;
                var canvas = document.getElementById("panel");
                if(canvas.getContext){
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle = "#60b2ff";
                    ctx.fillRect(20, 20, 150, 100);
                } 
            } else if(f == "green"){
                count++;
                var canvas = document.getElementById("panel");
                if(canvas.getContext){
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle = "#6ce2a5";
                    ctx.fillRect(20, 20, 150, 100);
                } 
            } else if(f == "orange"){
                count++;
                var canvas = document.getElementById("panel");
                if(canvas.getContext){
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle = "#ffb135";
                    ctx.fillRect(20, 20, 150, 100);
                } 
            }
        } else if (count == 1){ 
            if(f == "red"){
                count++;
                var canvas = document.getElementById("panel");
                if(canvas.getContext){
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle = "#ff3535";
                    ctx.fillRect(190, 20, 190, 100);
                } 
            } else if(f == "blue"){
                count++;
                var canvas = document.getElementById("panel");
                if(canvas.getContext){
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle = "#60b2ff";
                    ctx.fillRect(190, 20, 190, 100);
                } 
            } else if(f == "green"){
                count++;
                var canvas = document.getElementById("panel");
                if(canvas.getContext){
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle = "#6ce2a5";
                    ctx.fillRect(190, 20, 190, 100);
                } 
            } else if(f == "orange"){
                count++;
                var canvas = document.getElementById("panel");
                if(canvas.getContext){
                    var ctx = canvas.getContext("2d");
                    ctx.fillStyle = "#ffb135";
                    ctx.fillRect(190, 20, 190, 100);
                } 
            }
        } 
    } 
    </script>
</body>
</html>

Answer 1

就个人而言，我会尝试不重复任何代码，除非我想不出另一种方式。

在这种情况下我也会使用switch statement。

＆＃13;

var count = 0;

function insertNode(){
    var e = document.getElementById("colorNodes");
    var f = e.options[e.selectedIndex].text;
    console.log("var f is " + f);
    
    var canvas = document.getElementById("panel");
    if (! canvas.getContext) {
        console.log("no canvas context");
        return;
    }
    if (count > 1) {
        console.log("count > 1");
        return
    }
    var ctx = canvas.getContext("2d");
    var fRect = {
                  0:[20, 20, 150, 100],
                  1:[190, 20, 190, 100],
                };
    var fColor = null;
    switch(f) {
        case 'red' :
            fColor = "#ff3535";
            break;
        case 'blue' :
            fColor = "#60b2ff";
            break;
        case 'green' :
            fColor = "#6ce2a5";
            break;
        case 'orange' :
            fColor = "#ffb135";
            break;
        default :
            console.log("invalid color selection");
            return;            
    }
    ctx.fillStyle = fColor;
    ctx.fillRect(fRect[count][0],fRect[count][1],fRect[count][2],fRect[count][3]);
    count++;
    return;
}

＆＃13;

body {
    font-family: 'Josefin Sans', sans-serif;
    line-height: 1.4em;
}
#left_column{
    float: left;
    width:50%;
}
#right_column{
    float:right;
    width:50%;
}
#Container{
    width: 100%;
    height: 400px;
    position: relative;
    background: yellow;
}

＆＃13;

<div style="text-align: center">
    <h1 class="Title">rainbow</h1>
</div>
<div id = "left_column">
    <div id = Container>
        <canvas id = "panel"></canvas>
    </div>
</div>
<div id = "right_column">
    <select id = "colorNodes" style="margin-left: 10px">
        <option value = "red">red</option>
        <option value = "blue">blue</option>
        <option value = "green">green</option>
        <option value = "orange">orange</option>
    </select>
    <button onclick ="insertNode()" style="margin-left: 10px">Insert</button>
    <button onclick = "searchNode()" style="margin-left: 10px">Search</button>  
    <button onclick = "deleteNode()" style="margin-left: 10px">Delete</button>
</div>

＆＃13;

HTML5和JavaScript动画矩形？

1 个答案: