• 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')[i];
			  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
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
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

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

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

    • AB Download Manager 1.9.0

      By Copernic · Posted

      AB Download Manager 1.9.0 by Razvan Serea AB Download Manager is an open-source, feature-rich download manager designed to accelerate downloads, organize files efficiently, and provide seamless control over downloads. With support for multiple connections, resume capability, and an intuitive interface, it enhances the downloading experience for users seeking speed and reliability. The software integrates with various browsers, enabling quick link grabbing and batch downloading. It supports HTTP, HTTPS, and FTP protocols, ensuring broad compatibility with different file sources. Users can schedule downloads, set speed limits, and categorize files automatically for better organization. AB Download Manager is lightweight yet powerful, making it a great alternative to proprietary download managers. Its open-source nature allows developers to contribute, customize, and improve the software as needed. Whether you're downloading large files, managing multiple downloads at once, or seeking an ad-free experience, this tool offers a practical and efficient solution. Key features of AB Download Manager: Multi-Connection Support – Accelerates downloads by splitting files into multiple segments. Resume Capability – Allows paused or interrupted downloads to be resumed without starting over. Batch Downloading – Supports downloading multiple files at once for improved efficiency. Browser Integration – Captures download links directly from browsers for seamless operation. HTTP, HTTPS, and FTP Support – Ensures compatibility with a wide range of file sources. Download Scheduling – Enables users to automate downloads at specific times. Speed Limiting – Lets users control bandwidth usage for optimized performance. File Categorization – Automatically organizes downloaded files into designated folders. User-Friendly Interface – Simple and intuitive design for easy navigation. Cross-Platform Compatibility – Works on multiple operating systems. Ad-Free Experience – No intrusive ads or tracking for a clean user experience. AB Download Manager 1.9.0 changelog: Added Czech language support User-friendly error messages for download errors (#1252) An option to remember the last selected queue and quickly add downloads to it by long-clicking the Add button ( #1246) An option to export/import downloads using JSON format A Download button on the multi-download page for cases where users do not want to start downloads without queue processing (#1247) The app now includes a logger that can be enabled using a command-line flag (#1226) Startup errors are now logged automatically to help diagnose initialization issues Changed The default unqueued "Max Concurrent Downloads" value has been changed from "Unlimited" to 3 (This can be customized in the app settings) Improved Updated translations Added an indicator on the Android main page when resume is not supported (#1248) Extract the file name from the download link as a fallback when no response information is available (#1209) Minor UI/UX improvements Download: AB Download Manager 1.9.0 | Portable | ~80.0 MB (Open Source) Download: ARM64 | Portable ARM64 | Android Links: AB Download Manager Website | Github Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Claude on Windows is eating up massive amounts of RAM, with no way to stop it

      By kiddingguy · Posted

      32 GB RAM here. What’s the issue?
    • EU Commission explains why Siri AI isn't launching in the EU, and Apple is to blame

      By Dutchie64 · Posted

      Good consumer.......... /s
    • Microsoft explains how it made Teams so much faster in 2026

      By +virtorio · Posted

      I just started using Teams (and “New” Oiutlook) at work (instead of Slack) and both are truly abysmal pieces of software.
    • EU Commission explains why Siri AI isn't launching in the EU, and Apple is to blame

      By NEXXUS · Posted

      I'm actually on apples side for this

  • Recent Achievements

    • First Post
      DragonOfMercy earned a badge
      First Post
    • First Post
      bella52 earned a badge
      First Post
    • Reacting Well
      Techinmay earned a badge
      Reacting Well
    • Collaborator
      WndSks went up a rank
      Collaborator
    • One Month Later
      Sopa flores earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      491
    2. 2
      PsYcHoKiLLa
      205
    3. 3
      +Edouard
      153
    4. 4
      Steven P.
      84
    5. 5
      ATLien_0
      74
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!