JS-DOS: JavaScript Fake HTML DOS window

2,163 · July 18, 2009

Can someone help me with some JavaScript?

I'm working on a fake MS-DOS console. I've made most of the design so far but I need help with programming the prompts. Here's how I would like it to work:

I've managed to restore the <blink> tag ;-) so that will help with an authentic look but ideally, I want the the user to be able to type anything in and his enter. When they do, a new line appears saying "Bad command or filename." and below that, the C:\> appears again and the user is able to continue to type stuff in. I would like to add commands like: "ver" or "dir" which shows some text as in the example above.

Here's the code so far, please copy/paste and try it out:

&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;JS-DOS&lt;/title&gt;
		&lt;meta http-equiv="Page-Enter" content="BlendTrans(Duration=0.25)" /&gt;
		&lt;meta http-equiv="Page-Exit" content="BlendTrans(Duration=0.25)" /&gt;
		&lt;link rel="shortcut icon" href="/dos/favicon.ico" /&gt;
		&lt;meta name="robots" content="noindex" /&gt;
		&lt;style type="text/css" media="all"&gt;
			BODY{
				BackGround:			Black;
				Color:				LightGrey;
				Font-Family:		Courier New, Courier;
				Font-Size:			12pt;
				Font-Weight:		Bold;
				Padding:			10px;
				Overflow:			Auto;
			}
			BLINK{
				Color:				LightGrey;
				Font-Size:			13pt;
			}
		&lt;/style&gt;
		&lt;script type="text/javascript"&gt;
		function Blink() {
		   for(i=0;i&lt;document.all.tags('blink').length;i  s=document.all.tags('blink];
			  s.style.visibility=(s.style.visibility=='visible')?'hidden':'visible';
		   }
		}
		setInterval('Blink()',500);
		&lt;/script&gt;
	&lt;/head&gt;
	&lt;body bgcolor="Black" scroll="Auto"&gt;
		C:\&gt;&lt;span id="Prompt"&gt;&lt;blink&gt;_&lt;/blink&gt;&lt;/span&gt;
	&lt;/body&gt;
&lt;/html&gt;

I've experimented with the following JS code but I've had litle success getting my dead around it:

		function ProcessKey(){
			var KeyID = event.keyCode;
			var Key = String.fromCharCode(KeyID);
			//document.getElementById("Prompt").innerText += Key;
			var _body = document.getElementsByTagName('body') [0];
			var _div = document.createElement('span');
			var _text = document.createTextNode(Key)
			_div.appendChild(_text);
			_body.appendChild(_div);
		}
		document.onkeyup = ProcessKey;

I'd appreciate any help. Thank you so much.

2,163 · July 18, 2009

Anyone want to have a go at this?

7,137 · July 18, 2009

Mhmm, I'd like to help on this, but I'm not really that great at JavaScript, sorry :/

Good luck with the project, though! :)

2,541 · July 18, 2009

That is so '90s!

July 18, 2009

Why do I think this will be applied as one of those phony alerts on web pages?

July 18, 2009

I'm bored. I started from scratch and based it on a textarea. Have a look:

http://www.gazumbo.com/cmd.html

XgD

July 18, 2009

Forgot to say... I've only developed/tested in firefox. Others probably won't work.

Implemented commands:

ver

win

eval [javascript code]

1,832 · July 18, 2009

why even do this?

July 18, 2009

Thunderbuck said:
Why do I think this will be applied as one of those phony alerts on web pages?

my 1st thoughts exactly

12,995 · July 18, 2009

you should at least recognize the help command and list all the available functions

July 18, 2009

Kalint said:
why even do this?

I've had a lot of free time today =)

primexx said:
you should at least recognize the help command and list all the available functions

Good idea. Implemented =)

XgD

2,541 · July 19, 2009

XgD said:
Forgot to say... I've only developed/tested in firefox. Others probably won't work.
Implemented commands:

ver

win

eval [javascript code]

Works on IE8, however eval comes back as undefined. Also comes back as undefined on Firefox 3.5.1.

I used to have a code that I found back in the '90s, that I modified that would end up using up so much memory that it would freeze your browser and most often crash your computer, it was all done through JavaScript; you had to press a button on a web page to activate it. Would love to find that code again and see what it would do on modern browsers and OSes.

2,163 · July 19, 2009

That's fantastic! Thank you :)

Can I ask how to make it so it's not limited to 24 lines? I know I was looking for authenticity but it would look cool if it just when all the way to the bottom on of the screen.

I've made the following mods:

<textarea readonly id="cmd" style="overflow:hidden; width:100%; height:100%; background-color: #000; color: white; font-family: Courier New; border: none;" onFocus="this.blur()"></textarea

Also, is it possible to add the BACKSPACE function in there to delete typed characters?

July 19, 2009

TonyLock said:
That's fantastic! Thank you :)
Can I ask how to make it so it's not limited to 24 lines? I know I was looking for authenticity but it would look cool if it just when all the way to the bottom on of the screen.

I've removed the line-limiting code

Quote
I've made the following mods:
<body bgcolor="Black" onload="init()" onKeyPress="return processKey(event)" scroll="no" style="OverFlow:Hidden">

<textarea readonly id="cmd" style="overflow:hidden; width:100%; height:100%; background-color: #000; color: white; font-family: Courier New; border: none;" onFocus="this.blur()"></textarea

Added these changes

Quote
Also, is it possible to add the BACKSPACE function in there to delete typed characters?

That code was already there (in Firefox). I've written some IE specific code to make sure that it actually works this time. Command history wasn't working either, but should be now.

XgD

2,163 · July 19, 2009

Nice job :)

I added these lines in BTW:

case "del": return processDel(parameters[0]);

and

function processDel(FileParam){

if(FileParam == undefined){

return "Please specify a file to delete.\n\n";

}else if(FileParam == "*.*"){

return "Yeah, right! You wish.\n\n";

}else{

return "Unable to delete that file.\n\n";

}

Sign In

JS-DOS: JavaScript Fake HTML DOS window

Question

TonyLock

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

TonyLock

Link to comment

Share on other sites

The Teej

Link to comment

Share on other sites

Comic Book Guy

Link to comment

Share on other sites

Thunderbuck

Link to comment

Share on other sites

XgD

Link to comment

Share on other sites

XgD

Link to comment

Share on other sites

Kalint

Link to comment

Share on other sites

Eevo

Link to comment

Share on other sites

primexx

Link to comment

Share on other sites

XgD

Link to comment

Share on other sites

Comic Book Guy

Link to comment

Share on other sites

TonyLock

Link to comment

Share on other sites

XgD

Link to comment

Share on other sites

TonyLock

Link to comment

Share on other sites

Recently Browsing 0 members

Posts

Recent Achievements

Popular Contributors

Tell a friend

Choose your Ad Blocker