• 0

JS-DOS: JavaScript Fake HTML DOS window

Asked by TonyLock,

 Share

Question

Veteran

TonyLock

Posted
Posted

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:

post-15711-1247902882.gif

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.

14 answers to this question

Recommended Posts

  • 0
Grand Master

Comic Book Guy

Posted
Posted
  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.

  • 0
Veteran

TonyLock

Posted
  • Author
Posted

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:

<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

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

  • 0
Rising Star

XgD

Posted
Posted
  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

  • 0
Veteran

TonyLock

Posted
  • Author
Posted

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";

}

}

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • You can now format text in Windows 11's Notepad

      By matthiew · Posted

      For anyone looking for a lightweight formatting-free text editor, I recommend Notepad3.
    • Sony unveils its first fight stick 'Project Defiant', supports PC and PS5

      By +sphbecker · Posted

      This looks really dumb, especially if it costs $100+. Noone who cares about using a flight yoke would touch that thing, people who don't care are probably fine using the analog sticks on their controller, so who is it for?
    • Google confirms more ads on your paid YouTube Premium Lite soon

      By +sphbecker · Posted

      A) "they shouldn't be making money off of those [free videos]"?? That is literally their business model, making money off videos that users post...if you don't feel like that should be allowed, then are you saying YouTube shouldn't exist. B) Yes, the example I gave is a net-negative transaction. If YouTube makes money from others who are following their rules, it doesn't change the fact that the person using an ad-blocker is costing them money. C) YouTube has always operated at a loss...kind of invalidates your entire argument. As I always say, I don't care what you do, I will not even say you are wrong for doing it. That is purely your choice. Just be honest enough to say something like "Google is rich, I honestly don't care." Perfectly fine reason. Don't act like there is some imagined justification for why it isn't breaking the rules.
    • You can now present content from your camera feed in Google Meet

      By David Uzondu · Posted

      You can now present content from your camera feed in Google Meet by David Uzondu Google has a new feature rolling out for Google Meet that lets you directly present video from an external camera feed right into your meetings. This means if you have a document camera for showing physical papers, a dedicated external camera for a better angle, or even output from a video production tool, you can now pipe that into Meet as a presentation source. This new option supports video up to 1080p at 30FPS. This "present from camera" function offers a more integrated way to handle certain video inputs compared to some existing workarounds. For instance, it might prove less complicated than a setup with OBS Studio where you arrange your various video sources into scenes, activate the virtual camera output, and then navigate Google Meet's settings to specifically choose "OBS Virtual Camera" as your video input before you can even start presenting that customized feed. Alongside this camera presentation feature, Google's announcement also mentioned several improvements to the general screen sharing experience in Meet. Initiating any type of screen share is faster now, and video quality during screen sharing has also been sharpened, with better handling of dynamic content like scrolling text or embedded videos. To reduce interruptions, if a second presenter stops sharing their screen, any previous presentation will now automatically resume. For those wondering when they can get their hands on this, the rollout for the camera presentation feature and these screen sharing enhancements has begun for Rapid Release domains. Users on Scheduled Release domains will start seeing it from June 11, 2025. Google notes that it could take up to 15 days for these features to be visible to all eligible users. Most Google Workspace accounts, including Business Standard and Plus, various Enterprise and Education tiers, and Workspace Individual subscribers, will have access. This new presentation option joins other recent Google Workspace enhancements. For instance, Gemini in Google Drive can now summarize changes to your files, offering a quick way to get updated on what you missed in documents since you last opened them.
    • Is Samsung teasing a Galaxy Z Fold7 Ultra? An official press release suggests so

      By Travesty · Posted

      I'll keep waiting for this day

  • Recent Achievements

    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
    • Apprentice
      DarkShrunken went up a rank
      Apprentice
    • Dedicated
      CHUNWEI earned a badge
      Dedicated
    • Collaborator
      DarkShrunken earned a badge
      Collaborator

  • Popular Contributors

    1. 1
      +primortal
      379
    2. 2
      +FloatingFatMan
      175
    3. 3
      ATLien_0
      169
    4. 4
      snowy owl
      169
    5. 5
      Xenon
      133
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!