add JavaScript练习demo

giscafer · Mar 4, 2017 · bee9c12 · bee9c12
1 parent 72dcced
commit bee9c12
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 25 deletions.
diff --git a/public/js/utils.js b/public/js/utils.js
diff --git a/斌斌学院/data.json b/斌斌学院/data.json
@@ -14,5 +14,15 @@
     "description":"欢迎关注，持续更新",
     "img": "https://raw.githubusercontent.com/giscafer/ife-course-demo/master/斌斌学院/cover.jpg",
     "url": "http://giscafer.com/ife-course-demo/斌斌学院/任务三：零基础JavaScript编码（三）/index.html"
+  },{
+    "name": "任务四：基础JavaScript练习（一）",
+    "description":"欢迎关注，持续更新",
+    "img": "https://raw.githubusercontent.com/giscafer/ife-course-demo/master/斌斌学院/任务四：基础JavaScript练习（一）/cover.jpg",
+    "url": "http://giscafer.com/ife-course-demo/斌斌学院/任务四：基础JavaScript练习（一）/index.html"
+  },{
+    "name": "任务五：基础JavaScript练习（二）",
+    "description":"欢迎关注，持续更新",
+    "img": "https://raw.githubusercontent.com/giscafer/ife-course-demo/master/斌斌学院/任务五：基础JavaScript练习（二）/cover.jpg",
+    "url": "http://giscafer.com/ife-course-demo/斌斌学院/任务五：基础JavaScript练习（二）/index.html"
   }
 ]
diff --git a/斌斌学院/任务一：零基础JavaScript编码（一）/index.html b/斌斌学院/任务一：零基础JavaScript编码（一）/index.html
@@ -62,6 +62,5 @@ <h2>JavaScript源码</h2>
         })();
     </pre>
 </div>
-<script type="text/javascript" src="../../public/js/utils.js"></script>
 </body>
 </html>
diff --git a/斌斌学院/任务三：零基础JavaScript编码（三）/index.html b/斌斌学院/任务三：零基础JavaScript编码（三）/index.html
@@ -215,6 +215,5 @@ <h2>JavaScript源码</h2>
         init();
     </pre>
 </div>
-<script type="text/javascript" src="../../public/js/utils.js"></script>
 </body>
 </html>
diff --git a/斌斌学院/任务二：零基础JavaScript编码（二）/index.html b/斌斌学院/任务二：零基础JavaScript编码（二）/index.html
@@ -90,6 +90,5 @@ <h2>JavaScript源码</h2>
         })();
     </pre>
 </div>
-<script type="text/javascript" src="../../public/js/utils.js"></script>
 </body>
 </html>
diff --git a/斌斌学院/任务五：基础JavaScript练习（二）/cover.jpg b/斌斌学院/任务五：基础JavaScript练习（二）/cover.jpg
diff --git a/斌斌学院/任务五：基础JavaScript练习（二）/index.html b/斌斌学院/任务五：基础JavaScript练习（二）/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>IFE JavaScript Task 02</title>
+    <link type="text/css" rel="stylesheet" href="../../public/css/style.css"/>
+</head>
+<style>
+    #sequence {
+        margin-top: 120px;
+        font-size: 18px;
+        transform: rotateX(180deg);
+    }
+
+    #sequence div {
+        position: relative;
+        float: left;
+        background-color: red;
+        margin-left: 10px;
+        cursor: pointer;
+        width: 20px;
+    }
+
+    button {
+        cursor: pointer;
+    }
+</style>
+<body>
+<div class="nav">
+    <a href="https://raw.githubusercontent.com/giscafer/ife-course-demo/master/斌斌学院/任务四：基础JavaScript练习（一）/index.html"
+       target="_blank">demo源码</a>
+    <a href="http://ife.baidu.com/course/detail/id/103">查看原题</a>
+    <a href="http://ife.giscafer.com">返回demo演示站</a>
+</div>
+<div id="code-display">
+    <p>基于上一任务</p>
+    <p>限制输入的数字在10-100</p>
+    <p>队列元素数量最多限制为60个，当超过60个时，添加元素时alert出提示</p>
+    <p>队列展现方式变化如图，直接用高度表示数字大小；</p>
+    <p>实现一个简单的排序功能，如冒泡排序（不限制具体算法），用可视化的方法表达出来，参考见下方参考资料；</p>
+</div>
+
+<div id="source">
+    <h2>demo演示</h2>
+    <div>
+        <input type="text" id="in"/>
+        <button onclick="insertLeft()">左侧入</button>
+        <button onclick="insertRight()">右侧入</button>
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <button onclick="removeLeft()">左侧出</button>
+        <button onclick="removeRight()">右侧出</button>
+        <div id="sequence">
+            <div style="height: 101px"></div>
+            <div style="height: 50px"></div>
+            <div style="height: 30px"></div>
+        </div>
+    </div>
+</div>
+<script>
+    var sequenceDom = document.getElementById("sequence");
+    var inputDom = document.getElementById("in");
+
+    /**
+     * 获取input值
+     */
+    function getInputValue() {
+        var value = inputDom.value - 0;
+        console.log(typeof value)
+        if (typeof value != "number") {
+            return alert('请输入10~100之间的数字!');
+        } else if (value < 10 || value > 100) {
+            return alert('请输入10~100之间的数字!');
+        }
+        return value;
+    }
+    function insertLeft() {
+        var value=getInputValue();
+        if(!value) return;
+        var div = document.createElement("div");
+        div.style.height =  value+'px';
+        sequenceDom.insertBefore(div, sequenceDom.children[0]);
+    }
+    function insertRight() {
+        var value=getInputValue();
+        if(!value) return;
+        var div = document.createElement("div");
+        div.style.height = value+'px';
+        sequenceDom.appendChild(div);
+    }
+    function removeLeft() {
+        var temp = sequenceDom.children[0];
+        alert('移除左侧数字：' + temp.style.height.replace('px',''))
+        sequenceDom.removeChild(temp);
+    }
+    function removeRight() {
+        var temp = sequenceDom.children[sequenceDom.children.length - 1];
+        alert('移除右侧数字：' + temp.style.height.replace('px',''));
+        sequenceDom.removeChild(temp);
+    }
+    sequenceDom.addEventListener('click', function (e) {
+        if (e.target && e.target.nodeName === 'DIV') {
+            sequenceDom.removeChild(e.target);
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/斌斌学院/任务四：基础JavaScript练习（一）/cover.jpg b/斌斌学院/任务四：基础JavaScript练习（一）/cover.jpg
diff --git a/斌斌学院/任务四：基础JavaScript练习（一）/index.html b/斌斌学院/任务四：基础JavaScript练习（一）/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>IFE JavaScript Task 02</title>
+    <link type="text/css" rel="stylesheet" href="../../public/css/style.css"/>
+</head>
+<style>
+    #sequence{
+        margin-top:20px;
+        font-size: 18px;
+    }
+    #sequence span{
+        /*width: 10px;*/
+        /*height: 10px;*/
+        padding: 10px 10px;
+        background-color: red;
+        margin-left:10px;
+        cursor:pointer;
+    }
+    button{
+        cursor:pointer;
+    }
+</style>
+<body>
+<div class="nav">
+    <a href="https://raw.githubusercontent.com/giscafer/ife-course-demo/master/斌斌学院/任务四：基础JavaScript练习（一）/index.html" target="_blank">demo源码</a>
+    <a href="http://ife.baidu.com/course/detail/id/103">查看原题</a>
+    <a href="http://ife.giscafer.com">返回demo演示站</a>
+</div>
+<div id="code-display">
+    <p>有一个input输入框，以及4个操作按钮</p>
+    <p>点击"左侧入"，将input中输入的数字从左侧插入队列中；</p>
+    <p>点击"右侧入"，将input中输入的数字从右侧插入队列中；</p>
+    <p>点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；</p>
+    <p>点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；</p>
+    <p>点击队列中任何一个元素，则该元素会被从队列中删除</p>
+
+</div>
+
+<div id="source">
+    <h2>demo演示</h2>
+    <div>
+        <input type="text" id="in"/>
+        <button onclick="insertLeft()">左侧入</button>
+        <button onclick="insertRight()">右侧入</button>&nbsp;&nbsp;&nbsp;&nbsp;
+        <button onclick="removeLeft()">左侧出</button>
+        <button onclick="removeRight()">右侧出</button>
+        <div id="sequence">
+            <span>11</span>
+            <span>12</span>
+            <span>13</span>
+        </div>
+    </div>
+</div>
+<script>
+    var sequenceDom=document.getElementById("sequence");
+    var inputDom=document.getElementById("in");
+
+    /**
+     * 获取input值
+     */
+    function getInputValue(){
+        return inputDom.value;
+    }
+    function insertLeft(){
+        var span=document.createElement("span");
+        span.innerText= getInputValue();
+        sequenceDom.insertBefore(span,sequenceDom.children[0]);
+    }
+    function insertRight(){
+        var span=document.createElement("span");
+        span.innerText= getInputValue();
+        sequenceDom.appendChild(span);
+    }
+    function removeLeft() {
+        var temp=sequenceDom.children[0];
+        alert('移除左侧数字：'+temp.innerText)
+        sequenceDom.removeChild(temp);
+    }
+    function removeRight() {
+        var temp=sequenceDom.children[sequenceDom.children.length-1];
+        alert('移除右侧数字：'+temp.innerText);
+        sequenceDom.removeChild(temp);
+    }
+    sequenceDom.addEventListener('click',function(e){
+        console.log(e)
+        if(e.target && e.target.nodeName==='SPAN'){
+            sequenceDom.removeChild(e.target);
+        }
+    });
+</script>
+</body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,6 +62,5 @@ <h2>JavaScript源码</h2> @@
             })();
         </pre>
     </div>
-    <script type="text/javascript" src="../../public/js/utils.js"></script>
     </body>
     </html>