task2-18/index.html at master · HashCoding/task2-18 · GitHub

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
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务十八：基础JavaScript练习（一）</title>
	<style>
		.queue {
			height: 40px;
			padding: 10px 0;
		}
		.queue > .item {
			display: inline-block;
			width: 40px;
			height: 40px;
			margin-right: 8px;
			line-height: 40px;
			text-align: center;
			color: #FFFFFF;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="operate">
			<input type="text" id="input">
			<button id="leftIn">左侧入</button>
			<button id="rightIn">右侧入</button>
			<button id="leftOut">左侧出</button>
			<button id="rightOut">左侧出</button>
		</div>
		<div id="queue" class="queue">
		</div>
	</div>
	<script>
		(function() {
			// code start


			var li = _id('leftIn'),
				ri = _id('rightIn'),
				lo = _id('leftOut'),
				ro = _id('rightOut');

			var input = _id('input'),
				queue = _id('queue');

			var _queue = [];
			[li, ri].forEach(function(elem) {
				elem.onclick = function() {
					var val = input.value,
						id = this.id;
					if(!_check(val)) {
						alert('输入的的内容不能为空且为数字');
						return;
					}
					if(id === 'leftIn') _unshift(val);
					if(id === 'rightIn') _push(val);
				}
			});

			[lo, ro].forEach(function(elem) {
				elem.onclick = function() {
					var id = this.id;
					if(id === 'leftOut') _shift();
					if(id === 'rightOut') _pop();
				}
			});

			queue.onclick = function(e) {
				var _target = e.target;
				if(_target.className === 'item') {
					queue.removeChild(_target);
				}
			}

			function viewShift() {
				queue.removeChild(queue.firstChild);
			}
			function viewPop() {
				queue.removeChild(queue.lastChild);
			}
			function viewUnshift(v) {
				var sp = document.createElement('span');
				sp.className = 'item';
				sp.innerHTML = v;
				queue.insertBefore(sp, queue.firstChild);
			}

			function viewPush(v) {
				var sp = document.createElement('span');
				sp.className = 'item';
				sp.innerHTML = v;
				queue.appendChild(sp);
			}
			function _shift() {
				viewShift();
				_queue.shift();
			}

			function _pop() {
				viewPop();
				_queue.pop();
			}
			function _unshift(v) {
				viewUnshift(v);
				_queue.unshift(v);
			}
			function _push(v) {
				viewPush(v);
				_queue.push(v);
			}

			function _check(str) {
				return str && /^\d+$/g.test(str);
			}

			function _id(id) {
				return document.getElementById(id);
			}
		})();

	</script>
</body>
</html>