JS-History-Recoder 3

HTML

<button id="prev" type="button">上一步</button>
<button id="next" type="button">下一步</button>
<br><br>
<textarea id="text" cols="5" style="width:300px"></textarea>

JavaScript

var prev = document.getElementById('prev');
var next = document.getElementById('next');
var text = document.getElementById('text');

var size = 6;    //佇列大小，需空一個位置給佇列結尾
var front = 0;   //佇列開頭
var real = 1;    //佇列結尾的下一個位置
var curr = 0;    //步驟當前位置
var queue = new Array(size); //佇列容器
queue[0] = "";   //設定第一個元素為空白

prev.onclick = function() {
		//判斷是不是在開頭位置
    if (curr === front){
        alert('沒有上一步');
        return;
    }
    //將當前位置移動到上一步
    curr = (curr + size - 1) % size;
    text.value = queue[curr];
}
next.onclick = function() {
		//判斷是不是在結尾的位置
		var next = (curr + 1) % size;
    if (next === real){
        alert('沒有下一步');
        return;
    }
    //將當前位置移動到下一步
    curr = next;
    text.value = queue[curr];
}
text.addEventListener('input', function textWrite() {
    //判斷當前位置是不是在結尾
    var next = (curr + 1) % size;
    if (next === real) {
    		//判斷佇列是否已滿
    		if ((real + 1) % size === front) {
        		//覆蓋開頭的紀錄
        		front = (front + 1) % size;
        }
    }
    //設到當前位置到下個位置上
    curr = next;
    //將文字加入佇列
    queue[curr] = text.value;
    //將結尾設到當前位置的下個位置上
    real = (curr + 1) % size;
});