JavaScript之V字旋转小练习

---

一、前言

  这是一个采用JavaScript编程的一个小的练习，通过点击按钮来使V字进行旋转。并且我们可以通过span来显示我们选中的元素是第几个元素，可以通过选择颜色来改变元素的颜色。
  但是，当我们点击按钮之后，元素的颜色和span里面的内容会变为初始值。

二、Html和CSS部分

  因为这个项目主要是采用JavaScript编程，所以Html和CSS部分的代码使用非常简单。

1.Html部分

<!--一个大的盒子元素，用于在其中插入五个元素 -->
<div id="fs"></div>
<!--按钮 -->
<input type="button" value="按钮" id="btn">
<!--span元素，用于展示选中的元素 -->
<span id="sp">您目前没有选中元素</span>
<!--颜色选择器 -->
<input type="color" value="#FF0000" id="inputColor">

  在Html部分，定义一个大的div，之后会通过插入元素的方式，在这个盒子里面放入五个元素。
  按钮部分通过一个type值为button的input来实现。
  span部分通过初始给span一个innerHtml，之后会通过JavaScript来改变span中的innerHtml。
  颜色选择器通过一个type为color的input实现，在运行的时候，可以通过改变input的value值来改变元素的颜色。

---

2.CSS部分

/* 因为CSS部分代码不重要，所以采用叠写的形式 */
input, span 
{	float: right;  margin: 20px;	}

 #fs div 
{	width: 50px;  height: 50px;  font-size: 28px;
    color: white;  background-color: red;
   position: absolute;  text-align: center;
   line-height: 50px;   display: none;	}

---

三、JavaScript部分

1.获取元素

var fs = document.getElementById('fs');
var btn = document.getElementById('btn');
var sp = document.getElementById('sp');
var inputColor =document.getElementById('inputColor');

2. 创建元素

  因为我们并没有在Html中创建div元素，所以我们采用在JavaScript中生成的方式来创建元素，并插入到div(fs)中。

 for (var i = 0; i < 5; i++) {
 		//创建元素
        var oDiv = document.createElement('div');
        //在新建的元素中插入数字
        oDiv.innerHTML = i;
        //插入到fs盒子中
        fs.appendChild(oDiv);
    }
    var allDiv = fs.children;

3.按钮事件

  在按钮事件中，我们需要实现的是点击按钮，然后V字进行旋转。在这里我们需要使用到循环，通过循环来调整V字中元素的位置，达到旋转的效果。

//if-else版循环
num++;
         if (num % 4 == 1) {
             for (var i = 0; i < allDiv.length; i++) {
                 allDiv[i].style.left = 50 * i + 'px';
                 if (i % 4 == 0) {
                     allDiv[i].style.top = '100px';
                 } else if (i % 2 == 1) {
                     allDiv[i].style.top = '50px';
                 }
                 else{
                     allDiv[i].style.top = '0px';
                 }
             }
         }
         else if (num % 4 == 2) {
             for (var i = 0; i < allDiv.length; i++) {
                 allDiv[i].style.top = i * 50 + 'px';
                 if (i % 4 == 0) {
                     allDiv[i].style.left = '0px';
                 } else if (i % 2 == 1) {
                     allDiv[i].style.left = '50px';
                 }
                 else {
                     allDiv[i].style.left = '100px';
                 }
             }
         }
         else if (num % 4 == 3) {
             for (var i = 0; i < allDiv.length; i++) {
                 allDiv[i].style.left = i * 50 + 'px';
                 if (i % 4 == 0) {
                     allDiv[i].style.top = '0px'
                 }
                 else if (i % 2 == 1) {
                     allDiv[i].style.top = '50px'
                 }
                 else {
                     allDiv[i].style.top = '100px';
                 }
             }
         }
         else if (num % 4 == 0) {
             for (var i = 0; i < allDiv.length; i++) {
                 allDiv[i].style.top = i * 50 + 'px';
                 if (i % 4 == 0) {
                     allDiv[i].style.left = '100px'
                 } else if (i % 2 == 1) {
                     allDiv[i].style.left = '50px'
                 }
                 else {
                     allDiv[i].style.left = '0px'
                 }
             }
         } 

//switch版循环
switch (num) {
            case 0:
                for (var i = 0; i < allDiv.length; i++) {
                    allDiv[i].removeAttribute('style');
                    allDiv[i].style.display = 'block';
                    allDiv[i].style.left = 50 * i + 'px';
                    if (i % 4 == 0) {
                        allDiv[i].style.top = '100px';
                    } else if (i % 2 == 1) {
                        allDiv[i].style.top = '50px';
                    }
                    else {
                        allDiv[i].style.top = '0px';
                    }
                }
                num++;
                break;
            case 1:
                for (var i = 0; i < allDiv.length; i++) {
                    allDiv[i].removeAttribute('style');
                    allDiv[i].style.display = 'block';
                    allDiv[i].style.top = i * 50 + 'px';
                    if (i % 4 == 0) {
                        allDiv[i].style.left = '0px';
                    } else if (i % 2 == 1) {
                        allDiv[i].style.left = '50px';
                    }
                    else {
                        allDiv[i].style.left = '100px';
                    }
                }
                num++;
                break;
            case 2:
                for (var i = 0; i < allDiv.length; i++) {
                    allDiv[i].removeAttribute('style');
                    allDiv[i].style.display = 'block';
                    allDiv[i].style.left = i * 50 + 'px';
                    if (i % 4 == 0) {
                        allDiv[i].style.top = '0px';
                    } else if (i % 2 == 1) {
                        allDiv[i].style.top = '50px';
                    }
                    else {
                        allDiv[i].style.top = '100px';
                    }
                }
                num++;
                break;
            case 3:
                for (var i = 0; i < allDiv.length; i++) {
                    allDiv[i].removeAttribute('style');
                    allDiv[i].style.display = 'block';
                    allDiv[i].style.top = i * 50 + 'px';
                    if (i % 4 == 0) {
                        allDiv[i].style.left = '100px'
                    } else if (i % 2 == 1) {
                        allDiv[i].style.left = '50px'
                    }
                    else {
                        allDiv[i].style.left = '0px'
                    }
                }
                num = 0;
                break;
        }

4.元素事件

  当我们选中元素的时候，span元素里面的内容会随之改变。
  当我们选中元素的时候，如果改变inputColor的value值，盒子元素的颜色也会随之改变。

   for (var i = 0; i < allDiv.length; i++) {
        //可以在js对象里面看见
        allDiv[i].index = i;
        allDiv[i].onclick = function () {
            needDOM = this;
            sp.innerHTML = "您选中的是" + this.index + "号元素"
        }
    }
    inputColor.oninput = function () {
        if (needDOM = '') {
            alert('您还没有选择到元素');
            return;
        } else {
            needDOM.style.backgroundColor = this.value;
        }
    }

5.还原效果

  当我们点击按钮的时候，盒子元素和span元素会初始化，这里我们就需要在点击事件里面加入实现还原效果的代码。

        sp.innerHTML = "您没有选中元素";
        inputColor.value = '#ff0000';

四、完整代码

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        input,
        span {
            float: right;
            margin: 20px;
        }

        #fs div {
            width: 50px;
            height: 50px;
            font-size: 28px;
            color: white;
            background-color: red;
            position: absolute;
            text-align: center;
            line-height: 50px;
            display: none;
        }
    </style>

<body>
    <div id="fs"></div>
    <input type="button" value="按钮" id="btn">
    <span id="sp">您目前没有选中元素</span>
    <input type="color" value="#FF0000" id="inputColor">
</body>
<script>
    var fs = document.getElementById('fs');
    var btn = document.getElementById('btn');
    var sp = document.getElementById('sp');
    var inputColor = document.getElementById('inputColor');
    for (var i = 0; i < 5; i++) {
        var oDiv = document.createElement('div');
        oDiv.innerHTML = i;
        fs.appendChild(oDiv);
    }
    var allDiv = fs.children;
    var needDOM = '';
    //元素事件
    for (var i = 0; i < allDiv.length; i++) {
        //可以在js对象里面看见
        allDiv[i].index = i;
        allDiv[i].onclick = function () {
            needDOM = this;
            sp.innerHTML = "您选中的是" + this.index + "号元素"
        }
    }
    inputColor.oninput = function () {
        if (needDOM = '') {
            alert('您还没有选择到元素');
            return;
        } else {
            needDOM.style.backgroundColor = this.value;
        }
    }

    // 按钮事件
    var num = 0;
    btn.onclick = function () {
        sp.innerHTML = "您没有选中元素";
        inputColor.value = '#ff0000';
        // if-else版的V字旋转
        /* 
         num++;
         if (num % 4 == 1) {
             for (var i = 0; i < allDiv.length; i++) {
                 allDiv[i].style.left = 50 * i + 'px';
                 if (i % 4 == 0) {
                     allDiv[i].style.top = '100px';
                 } else if (i % 2 == 1) {
                     allDiv[i].style.top = '50px';
                 }
                 else{
                     allDiv[i].style.top = '0px';
                 }
             }
         }
         else if (num % 4 == 2) {
             for (var i = 0; i < allDiv.length; i++) {
                 allDiv[i].style.top = i * 50 + 'px';
                 if (i % 4 == 0) {
                     allDiv[i].style.left = '0px';
                 } else if (i % 2 == 1) {
                     allDiv[i].style.left = '50px';
                 }
                 else {
                     allDiv[i].style.left = '100px';
                 }
             }
         }
         else if (num % 4 == 3) {
             for (var i = 0; i < allDiv.length; i++) {
                 allDiv[i].style.left = i * 50 + 'px';
                 if (i % 4 == 0) {
                     allDiv[i].style.top = '0px'
                 }
                 else if (i % 2 == 1) {
                     allDiv[i].style.top = '50px'
                 }
                 else {
                     allDiv[i].style.top = '100px';
                 }
             }
         }
         else if (num % 4 == 0) {
             for (var i = 0; i < allDiv.length; i++) {
                 allDiv[i].style.top = i * 50 + 'px';
                 if (i % 4 == 0) {
                     allDiv[i].style.left = '100px'
                 } else if (i % 2 == 1) {
                     allDiv[i].style.left = '50px'
                 }
                 else {
                     allDiv[i].style.left = '0px'
                 }
             }
         }  */
        //switch版本的V字旋转
        switch (num) {
            case 0:
                for (var i = 0; i < allDiv.length; i++) {
                    allDiv[i].removeAttribute('style');
                    allDiv[i].style.display = 'block';
                    allDiv[i].style.left = 50 * i + 'px';
                    if (i % 4 == 0) {
                        allDiv[i].style.top = '100px';
                    } else if (i % 2 == 1) {
                        allDiv[i].style.top = '50px';
                    }
                    else {
                        allDiv[i].style.top = '0px';
                    }
                }
                num++;
                break;
            case 1:
                for (var i = 0; i < allDiv.length; i++) {
                    allDiv[i].removeAttribute('style');
                    allDiv[i].style.display = 'block';
                    allDiv[i].style.top = i * 50 + 'px';
                    if (i % 4 == 0) {
                        allDiv[i].style.left = '0px';
                    } else if (i % 2 == 1) {
                        allDiv[i].style.left = '50px';
                    }
                    else {
                        allDiv[i].style.left = '100px';
                    }
                }
                num++;
                break;
            case 2:
                for (var i = 0; i < allDiv.length; i++) {
                    allDiv[i].removeAttribute('style');
                    allDiv[i].style.display = 'block';
                    allDiv[i].style.left = i * 50 + 'px';
                    if (i % 4 == 0) {
                        allDiv[i].style.top = '0px';
                    } else if (i % 2 == 1) {
                        allDiv[i].style.top = '50px';
                    }
                    else {
                        allDiv[i].style.top = '100px';
                    }
                }
                num++;
                break;
            case 3:
                for (var i = 0; i < allDiv.length; i++) {
                    allDiv[i].removeAttribute('style');
                    allDiv[i].style.display = 'block';
                    allDiv[i].style.top = i * 50 + 'px';
                    if (i % 4 == 0) {
                        allDiv[i].style.left = '100px'
                    } else if (i % 2 == 1) {
                        allDiv[i].style.left = '50px'
                    }
                    else {
                        allDiv[i].style.left = '0px'
                    }
                }
                num = 0;
                break;
        }
    }
</script>