Skip to content

Instantly share code, notes, and snippets.

@pleum

pleum/queue.html

Last active March 17, 2017 14:27
Show Gist options
  • Save pleum/020855381fda76c19cab7209b8298b81 to your computer and use it in GitHub Desktop.
Save pleum/020855381fda76c19cab7209b8298b81 to your computer and use it in GitHub Desktop.
Download ZIP
Algorithm
Raw
queue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Queue</title>
<style>
body {
font-family: 'tahoma';
font-size: 12px;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<h1>Queue</h1>
<p>เป็นการเก็บข้อมูลแบบเรียงตามคิว ข้อมูลที่เข้ามาก่อนออกก่อน </p>
<canvas width="210" height="120" id="canvas"></canvas>
<div id="controller">
<input type="text" id="data" placeholder="Data" width="200" size="5" maxlength="3"/>
<button onclick="enqueue()">Enqueue</button>
<button onclick="dequeue()">Dequeue</button>
<button onclick="isEmpty()">isEmpty</button>
</div>
<br />
<table id="table" style="width: 210px">
<tr>
<th>Method</th>
<th>Return</th>
<th>Data</th>
</tr>
</table>
</div>
<script>
const arraySize = 5
// Class: Queue
var Queue = function() {
this.front = 0
this.rear = 0
this.size = 0
this.data = []
}
Queue.prototype.isEmpty = function() {
return this.size == 0
}
Queue.prototype.enqueue = function(element) {
if (this.size == arraySize) {
return 'full'
} else {
this.data[this.rear] = element
this.rear = (this.rear + 1) % arraySize
this.size++;
}
return ''
}
Queue.prototype.dequeue = function() {
if (this.isEmpty()) {
return 'null'
}
let value = this.data[this.front]
this.data[this.front] = null
this.front = (this.front + 1) % arraySize
this.size--
return value
}
// init
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
let table = document.getElementById('table')
let queue = new Queue()
function enqueue() {
let value = document.getElementById('data').value
if (value == "" || value.length > 3) {
value = Math.floor((Math.random() * 10) + 1);
}
document.getElementById('data').value = ""
addRow('Enqueue()', queue.enqueue(value))
}
function dequeue() {
addRow('Dequeue()', queue.dequeue())
}
function isEmpty() {
addRow('isEmpty()', queue.isEmpty())
}
let rowCount = 1
function addRow(method, returnData) {
let row = table.insertRow(rowCount++)
let cell1 = row.insertCell(0)
let cell2 = row.insertCell(1)
let cell3 = row.insertCell(2)
cell1.innerHTML = method
cell2.innerHTML = returnData
cell3.innerHTML = queue.data
}
// Draw
const gird = 30;
draw()
function draw() {
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, 300, 300)
ctx.restore()
ctx.textAlign = 'center'
queue.data.forEach((v, i) => {
if (v !== null) {
ctx.fillStyle = '#FFF'
ctx.fillRect((gird + 10) * i + 10, 21, gird, gird)
ctx.fillStyle = '#000'
ctx.fillText(v, (gird + 10) * i + 25, 40)
}
})
ctx.save()
ctx.restore()
ctx.textAlign = 'left'
ctx.fillStyle = '#303030'
ctx.fillRect(0, 70, 210, 50)
ctx.font = '12px Tahoma'
ctx.fillStyle = '#FFF'
ctx.fillText('isEmpty: ' + queue.isEmpty(), 10, 90)
ctx.fillText('Front: ' + queue.front, 100, 90)
ctx.fillText('Size: ' + queue.size, 10, 110)
ctx.fillText('Rear: ' + queue.rear, 100, 110)
ctx.save()
ctx.font = '10px Tahoma'
ctx.textAlign = 'center'
ctx.fillText('Front', (gird + 10) * queue.front + 24, 63)
ctx.fillText('Rear', (gird + 10) * queue.rear + 24, 15)
requestAnimationFrame(draw)
}
</script>
</body>
</html>
Raw
stack.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stack</title>
<style>
body {
font-family: 'tahoma';
}
p {
font-size: 12px;
}
</style>
</head>
<body>
<h1>Stack</h1>
<p>เป็นการเก็บข้อมูลแบบเรียงเป็นชั้นๆ ข้อมูลที่เข้ามาที่หลังจะออกก่อนข้อมูลที่เข้ามาก่อน</p>
<canvas id="stackCanvas" width="135" height="350"></canvas>
<p>Controller: </p>
<button onclick="push()"> Push</button>
<button onclick="getSize()"> Size</button>
<button onclick="getTop()"> Top</button>
<button onclick="pop()"> Pop</button>
<script>
let canvas = document.getElementById('stackCanvas');
var ctx = canvas.getContext('2d');
let stack = {
arraySize: 5,
size: 0,
top: -1,
data: []
};
let message = "";
loop();
function loop() {
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
stack.data.forEach((value, index) => {
ctx.fillStyle = '#ffffff';
ctx.fillRect(45, 50 * (stack.arraySize - index), 40, 40);
ctx.fillStyle = '#000000';
ctx.font = "15px Tahoma";
ctx.fillText(value, 50, (50 * (stack.arraySize - index)) + 20 );
});
ctx.fillStyle = '#ffffff';
ctx.font = "12px Tahoma";
ctx.fillText('ArraySize: ' + stack.arraySize, 10, 20);
ctx.fillText(message, 10, 340);
ctx.fillText('Top Index: ' + stack.top, 10, 320);
requestAnimationFrame(loop);
}
console.log("Array Max Size: " + stack.arraySize);
function push() {
if(stack.size < stack.arraySize) {
let randomValue = Math.floor((Math.random() * 10) + 1);
stack.data.push(randomValue);
stack.size++;
stack.top++;
console.log('Push: ' + randomValue);
message = 'Push value: ' + randomValue;
console.log(stack.data);
} else {
message = 'Stack is full.';
console.log('Stack is full.');
}
}
function getSize() {
message = 'Size: ' + stack.size;
console.log('Size: ' + stack.size);
}
function getTop() {
if (stack.top != -1) {
message = 'Top value: ' + stack.data[stack.top];
console.log('Top value: ' + stack.data[stack.top]);
} else {
message = 'Stack is empty.';
console.log('Stack is empty.');
}
}
function pop() {
if (stack.top != -1) {
console.log('Pop: ' + stack.data[stack.top]);
message = 'Pop value: ' + stack.data[stack.top];
stack.data.pop();
stack.size--;
stack.top--;
console.log(stack.data);
} else {
message = 'Stack is empty.';
console.log('Stack is empty.');
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment