任务四：基础JavaScript练习（一）

Lesson

Reference

Demo

Note

Array

  • push()
    在末端添加

  • pop()
    在末端删除

  • shift()
    将首端删除

  • unshift()
    在首端添加

Tips

  • $(‘#id’).value的值可以随着引用位置变化，var value = $(‘#id’).value的值不再变化。
  • isNaN()可用来验证数字。
  • 判断句中0就是false

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #display{
      list-style: none;
      margin: 5px 0;
      padding: 0;
    }
    #display li{
      list-style: none;
      display: inline-block;
      padding: 5px;
      margin:0 5px 5px 0;
      border:1px solid #aaa;
      background: #eee;
    }
  </style>
</head>
<body>
  <div>
    <input type="text" id="input-text">
    <button id="leftin" value="LeftIn">LeftIn</button>
    <button id="rightin" value="RightIn">RightIn</button>
    <button id="leftout" value="LeftOut">LeftOut</button>
    <button id="rightout" value="RightOut">RightOut</button>
  </div>
  <ul id="display">
    
  </ul>
</body>
<script>
  var inputText = getid('input-text');
  var leftIn = getid('leftin');
  var leftOut = getid('leftout');
  var rightIn = getid('rightin');
  var rightOut = getid('rightout');
  var display = getid('display');
  var queue = new Array();

  // 选择器
  function getid(id){
    return document.getElementById(id);
  }

  // 创建执行函数
  function putLeftIn(input){
    queue.unshift(input);
  }

  function putRightIn(input){
    queue.push(input);
  }

  function putLeftOut(){
    var removed = queue.shift();
    alert(removed);
  }

  function putRightOut(){
    var removed = queue.pop();
    alert(removed);
  }

  // 检验合法性
  function veryfied(input){
    if(!(isNaN(input))){
      return input;
    }else{
      alert('请输入数字！');
      return false;
    }
  }

  // 渲染
  function render(){
    display.innerHTML = ""
    for (i=0;i<queue.length;i++){
      var newLi = document.createElement('li');
      var newText = document.createTextNode(queue[i]);
      newLi.append(newText);
      display.append(newLi)
    }
  }

  // 绑定事件
  leftin.addEventListener('click',function(){
    var number = inputText.value.trim();
    if(veryfied(number)){
      putLeftIn(number);
      render();
    }
  })
  rightin.addEventListener('click',function(){
    var number = inputText.value.trim();
    if(veryfied(number)){
      putRightIn(number);
      render();
    }
  })
  leftout.addEventListener('click',function(){
    if (queue.length){
      putLeftOut();
      render();
    }
    
  })
  rightout.addEventListener('click',function(){
    if(queue.length){
      putRightOut();
      render();
    }
  })


</script>
</html>