Slightly modified.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <script type="text/javascript"> // 1.1. set the window size var w = 558, h = 400; // window.moveTo((window.screen.width - w) / 2, (window.screen.height - h) / 2); window.resizeTo(w, h); </script> <!-- Network Calculator Copyright (c) 2007 by Ildar Shaimordanov --> <head> <HTA:APPLICATION ID="oSubnetCalc" APPLICATIONNAME="Subnet Calculator" BORDER="dialog" BORDERSTYLE="normal" CAPTION="yes" CONTEXTMENU="yes" INNERBORDER="no" MAXIMIZEBUTTON="yes" MINIMIZEBUTTON="yes" NAVIGABLE="no" SCROLL="no" SCROLLFLAT="no" SELECTION="no" SHOWINTASKBAR="yes" SINGLEINSTANCE="no" SYSMENU="yes" VERSION="1.0" WINDOWSTATE="normal" ICON="calculator.ico"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Subnet Calculator</title> <style type="text/css"> /** * * Common styles * */ * { font-family: Verdana, Tahoma, Helvetica, sans-serif, Monospace; font-size: 12px; } body { margin: 0; padding: 0; } #body { background-color: #1990CC; color: white; height: 500px; padding-left: 1px; padding-right: 1px; width: 540px; } #body #hostNetworkContainer { background-color: #ccc; border: 2px outset #ccc; position: absolute; left: 142px; top: 135px; width: 200px; } #body #hostNetworkContainer select { font-family: Monospace; font-size: 11px; width: 100%; } #body #netmaskMapContainer { background-color: #ccc; border: 2px outset #ccc; position: absolute; left: 162px; top: 100px; width: 180px; } #body #netmaskMapContainer select { font-family: Monospace; font-size: 11px; margin: 0; width: 100%; } form#netCalc { margin: 0; } form#netCalc h1 { font-size: 1.2em; margin: 0; } form#netCalc fieldset { padding: 5px; } form#netCalc .leftPanel { float: left; width: 50%; } form#netCalc .rightPanel { margin-left: 50%; } form#netCalc label, form#netCalc .label { float: left; margin-right: 3px; text-align: right; width: 85px; } form#netCalc input { font-family: Monospace; font-size: 11px; margin: 0; width: 145px; } form#netCalc input.longinput { width: 250px; } form#netCalc input.netClass { border: 1px solid #999; font-family: 'Monospace'; font-size: 11px; font-weight: bold; height: 20px; width: 20px; } form#netCalc select { margin-left: 33px; width: 110px; } </style> <script type="text/javascript"><!-- //js/NetIP.js function NetIP(){var privates={address:0,bitmask:24,network:0};this.getPrivates=function(){return privates;};var ip=arguments[0];var pos;var addr;var mask;if(ip&&ip.constructor==NetIP){addr=ip.getAddress();mask=ip.getBitmask();}else if(ip&&ip.constructor==Array){addr=ip[0];mask=ip[1];}else if(ip&&ip.constructor==String&&(pos=ip.indexOf('/'))!=-1){addr=ip.substr(0,pos);mask=ip.substr(pos+1);}else{addr=arguments[0]||privates.address;mask=arguments[1]||privates.bitmask;}this.setAddress(addr);if(NetIP.isBitmask(mask)){this.setBitmask(mask);}else{this.setNetmask(mask);}};NetIP.netmaskMap=[0x00000000,0x80000000,0xC0000000,0xE0000000,0xF0000000,0xF8000000,0xFC000000,0xFE000000,0xFF000000,0xFF800000,0xFFC00000,0xFFE00000,0xFFF00000,0xFFF80000,0xFFFC0000,0xFFFE0000,0xFFFF0000,0xFFFF8000,0xFFFFC000,0xFFFFE000,0xFFFFF000,0xFFFFF800,0xFFFFFC00,0xFFFFFE00,0xFFFFFF00,0xFFFFFF80,0xFFFFFFC0,0xFFFFFFE0,0xFFFFFFF0,0xFFFFFFF8,0xFFFFFFFC,0xFFFFFFFE,0xFFFFFFFF];NetIP.atoi=function(value){var bytes=String(value).split('.');var result=0;for(var i=0;i<bytes.length;i++){result=result*0x100+Number(bytes[i]);}return result;};NetIP.isBitmask=function(value){var bitmask=parseInt(value);return bitmask==value&&bitmask>=1&&bitmask<=32;};NetIP.isIP=function(value){return!!String(value).match(/^\s*(?:([01]?\d\d?|2[0-4]\d|25[0-5])\.)(?:([01]?\d\d?|2[0-4]\d|25[0-5])\.)(?:([01]?\d\d?|2[0-4]\d|25[0-5])\.)([01]?\d\d?|2[0-4]\d|25[0-5])\s*$/);};NetIP.isNetmask=function(value){if(!NetIP.isIP(value)){return false;}if(typeof value=='string'){value=NetIP.atoi(value);}var ip=new NetIP();ip.setNetmask(value);return value==ip.getNetmask()||value==ip.getNetmask(true);};NetIP.itoa=function(value,radix){var padding;switch(radix){case 2:padding="00000000";break;case 8:padding="000";break;case 16:padding="00";break;default:padding="";radix=10;}value=Number(value);var bytes=[((value>>>0x18)&0xff),((value>>>0x10)&0xff),((value>>>0x08)&0xff),(value&0xff)];for(var i=0;i<bytes.length;i++){bytes[i]=(padding+bytes[i].toString(radix).toUpperCase()).slice(-padding.length);}return bytes.join('.');};NetIP.prototype.contains=function(value){var ip=new NetIP(value);return ip.getAddress()>=this.getNetwork()&&ip.getAddress()<=this.getBroadcast();};NetIP.prototype.equals=function(value){var ip=new NetIP(value);return ip.getAddress()==this.getAddress();};NetIP.prototype.getAddress=function(){return this.getPrivates().address;};NetIP.prototype.getBitmask=function(){return this.getPrivates().bitmask;};NetIP.prototype.getBroadcast=function(){return this.getNetwork()+this.getNetmask(true);};NetIP.prototype.getFirstAddress=function(){return this.getNetwork()+1;};NetIP.prototype.getLastAddress=function(){return this.getBroadcast()-1;};NetIP.prototype.getNetmask=function(inverse){var mask=NetIP.netmaskMap[this.getBitmask()];return inverse?mask^0xffffffff:mask;};NetIP.prototype.getNetwork=function(){return this.getPrivates().network;};NetIP.prototype.length=function(){var count=this.getBroadcast()-this.getFirstAddress();return count<0?0:count;};(function(){var adjustNetwork=function(ip){var p=ip.getPrivates();p.network=ip.getAddress()&ip.getNetmask();if(p.network<0){p.network+=0x100000000;}};NetIP.prototype.setAddress=function(value){if(NetIP.isIP(value)){value=NetIP.atoi(value);}this.getPrivates().address=Number(value);adjustNetwork(this);};NetIP.prototype.setBitmask=function(value){if(String(value).match(/^\/\d+$/)){value=value.substr(1);}if(!NetIP.isBitmask(value)){return;}this.getPrivates().bitmask=Number(value);adjustNetwork(this);};})();NetIP.prototype.setNetmask=function(value){if(NetIP.isIP(value)){value=NetIP.atoi(value);}if(value<NetIP.netmaskMap[1]){value^=0xffffffff;}if(value<0){value+=0x100000000;}var i=NetIP.netmaskMap.length-1;while(i&&NetIP.netmaskMap[i]!=value){i--;}this.setBitmask(i);};NetIP.prototype.toString=function(netmask){return NetIP.itoa(this.getAddress())+'/'+(netmask?NetIP.itoa(this.getNetmask()):this.getBitmask());}; --></script> <script type="text/javascript"> (function() { function netCalc() { var element = document.getElementById('addr'); var addr = element.value; if ( ! NetIP.isIP(addr) ) { alert('Illegal IP address'); element.focus(); element.select(); return; } var element = document.getElementById('mask'); var mask = element.value; if ( ! NetIP.isBitmask(mask) && ! NetIP.isNetmask(mask) ) { alert('Illegal netmask or bitmask'); element.focus(); element.select(); return; } var radix = [2, 8, 10, 16][document.getElementById('radix').selectedIndex]; var ip = new NetIP(addr, mask); // Address frame document.getElementById('address').value = NetIP.itoa(ip.getAddress()); document.getElementById('netmaskd').value = NetIP.itoa(ip.getNetmask()); document.getElementById('netmaski').value = NetIP.itoa(ip.getNetmask(true)); document.getElementById('bitmask').value = ip.getBitmask(); if ( radix == 10 ) { document.getElementById('address_').value = ip.getAddress(); document.getElementById('netmaskd_').value = ip.getNetmask(); document.getElementById('netmaski_').value = ip.getNetmask(true); } else { document.getElementById('address_').value = NetIP.itoa(ip.getAddress(), radix); document.getElementById('netmaskd_').value = NetIP.itoa(ip.getNetmask(), radix); document.getElementById('netmaski_').value = NetIP.itoa(ip.getNetmask(true), radix); } // Network frame document.getElementById('network').value = NetIP.itoa(ip.getNetwork()); document.getElementById('address1').value = NetIP.itoa(ip.getFirstAddress()); document.getElementById('addressN').value = NetIP.itoa(ip.getLastAddress()); document.getElementById('broadcast').value = NetIP.itoa(ip.getBroadcast()); document.getElementById('length').value = ip.length(); document.getElementById('length_').value = [NetIP.itoa(ip.getFirstAddress()), NetIP.itoa(ip.getLastAddress())].join(' - '); if ( radix == 10 ) { document.getElementById('network_').value = ip.getNetwork(); document.getElementById('address1_').value = ip.getFirstAddress(); document.getElementById('addressN_').value = ip.getLastAddress(); document.getElementById('broadcast_').value = ip.getBroadcast(); } else { document.getElementById('network_').value = NetIP.itoa(ip.getNetwork(), radix); document.getElementById('address1_').value = NetIP.itoa(ip.getFirstAddress(), radix); document.getElementById('addressN_').value = NetIP.itoa(ip.getLastAddress(), radix); document.getElementById('broadcast_').value = NetIP.itoa(ip.getBroadcast(), radix); } }; function setNetmask(value) { document.getElementById('mask').value = value; netCalc(); }; function setNetwork(addr, mask) { document.getElementById('addr').value = addr; setNetmask(mask); }; function showHostNetwork() { document.getElementById('hostNetworkContainer').style.display = ''; var hostNetwork = document.getElementById('hostNetwork'); hostNetwork.focus(); var notation = [document.getElementById('addr').value, document.getElementById('mask').value].join('/'); hostNetwork.options.selectedIndex = -1; for (var i = 0; i < hostNetwork.options.length; i++) { if ( hostNetwork.options[i].text.indexOf(notation) == 0 ) { hostNetwork.options.selectedIndex = i; break; } } }; function hideHostNetwork() { document.getElementById('hostNetworkContainer').style.display = 'none'; var hostNetwork = document.getElementById('hostNetwork'); hostNetwork.blur(); // Hide only - called from the toggleXXX() routine if ( arguments.length == 0 ) { return; } if ( hostNetwork.options.selectedIndex == -1 ) { return; } var notation = hostNetwork.options[hostNetwork.options.selectedIndex].text.split('/'); setNetwork(notation[0], notation[1]); }; function toggleHostNetwork() { if ( document.getElementById('hostNetworkContainer').style.display == '' ) { hideHostNetwork(); } else { showHostNetwork(); } }; function selectNetmaskMap() { var netmaskMap = document.getElementById('netmaskMap'); var mask = document.getElementById('mask').value; var isBitmask = NetIP.isBitmask(mask); for (var i = 0; i < netmaskMap.options.length; i++) { var text = netmaskMap.options[i].text; if ( ! isBitmask && text.indexOf(mask) == 0 || isBitmask && text.lastIndexOf(mask) == text.length - mask.length ) { netmaskMap.options.selectedIndex = i; break; } } }; function showNetmaskMap() { document.getElementById('netmaskMapContainer').style.display = ''; var netmaskMap = document.getElementById('netmaskMap'); netmaskMap.focus(); selectNetmaskMap(); }; function hideNetmaskMap() { document.getElementById('netmaskMapContainer').style.display = 'none'; var netmaskMap = document.getElementById('netmaskMap'); netmaskMap.blur(); // Hide only - called from the toggleXXX() routine if ( arguments.length == 0 ) { return; } setNetmask(netmaskMap.options[netmaskMap.options.selectedIndex].text.split(/\s+/)[0]); }; function toggleNetmaskMap() { if ( document.getElementById('netmaskMapContainer').style.display == '' ) { hideNetmaskMap(); } else { showNetmaskMap(); } }; function initWin(network) { // private-use network (RFC1918) setNetwork('192.168.0.0', '255.255.255.0'); if ( document.attachEvent ) { document.getElementById('radix').attachEvent('onchange', netCalc); document.getElementById('netmaskMap').attachEvent('onchange', hideNetmaskMap); document.getElementById('hostNetwork').attachEvent('onchange', hideHostNetwork); } else { document.getElementById('radix').addEventListener('change', netCalc, true); document.getElementById('netmaskMap').addEventListener('change', hideNetmaskMap, true); document.getElementById('hostNetwork').addEventListener('change', hideHostNetwork, true); } }; /** * Returns all network information as array of a [addr, mask] pair for Windows only. * This feature is experimental. * * @param void * @return Array * @access Static */ NetIP.win32IPConfig = function() { var WMI = GetObject('WinMgmts:'); var sql = 'SELECT * FROM Win32_NetworkAdapterConfiguration'; var query = WMI.ExecQuery(sql); var enumer = new Enumerator(query); var result = []; while ( ! enumer.atEnd() ) { var adapter = enumer.item(); enumer.moveNext(); if ( adapter.IPAddress === null || adapter.IPSubnet === null ) { continue; } var addr = (new VBArray(adapter.IPAddress)).toArray(); var mask = (new VBArray(adapter.IPSubnet)).toArray(); var len = Math.min(addr.length, mask.length); for (var i = 0; i < len; i++) { if ( ! addr[i] || ! mask[i] ) { continue; } result[result.length] = [addr[i], mask[i]]; } } return result; }; function initHta() { // 2. create list of all available networks for this host var hostNetwork = document.getElementById('hostNetwork'); var nets = NetIP.win32IPConfig(); for (var i = 0; i < nets.length; i++) { var option = new Option(nets[i].join('/')); hostNetwork.options[i] = option; } var network; if ( nets.length ) { network = nets[0]; } // 3. initialize the frame of application or use private-use network (RFC1918) internally initWin(); // 4. first available network for this host if ( nets.length ) { setNetwork(nets[0][0], nets[0][1]); } // 5. Enables select of all networks document.getElementById('hostNetworkButton').disabled = false; }; function handleClick(e) { var e = e || event; var target = e.target || e.srcElement; if ( ! target || target.tagName.toUpperCase() != 'INPUT' || target.type.toUpperCase() != 'BUTTON' || target.className != 'netClass' || target.disabled ) { return; } switch (target.value) { case '#': hideNetmaskMap(); toggleHostNetwork(); target.blur(); break; case 'Calculate': netCalc(); target.blur(); break; case 'A': setNetmask('255.0.0.0'); selectNetmaskMap(); target.blur(); break; case 'B': setNetmask('255.255.0.0'); selectNetmaskMap(); target.blur(); break; case 'C': setNetmask('255.255.255.0'); selectNetmaskMap(); target.blur(); break; case 'i': hideHostNetwork(); toggleNetmaskMap(); target.blur(); break; } }; /** * Handles keystrokes (for HTA only) * * @access private */ function handleKeydown(e) { var e = e || event; var target = e.target || e.srcElement; // F5 if ( e.keyCode == 116 ) { return false; } // Esc if ( e.keyCode == 27 ) { return false; } // Enter if ( target && target.tagName.toUpperCase() == 'INPUT' && target.type.toUpperCase() == 'TEXT' ) { if ( e.keyCode == 13 ) { netCalc(); return false; } } }; if ( window.attachEvent ) { if ( window.oHTA && oHTA.applicationName ) { window.attachEvent('onload', initHta); } else { window.attachEvent('onload', initWin); } document.attachEvent('onclick', handleClick); document.attachEvent('onkeydown', handleKeydown); } else { window.addEventListener('load', initWin, true); window.addEventListener('click', handleClick, true); window.addEventListener('keydown', handleKeydown, true); } })(); </script> </head> <body> <div id="body"> <form action="" id="netCalc" onsubmit="return false"> <fieldset> <legend>Input</legend> <center><div style="font-size: 9px; padding: 10px 0;">Enter an IP address and a subnet mask/wildcard mask!! OMG SO KEWL!!!</div></center> <div class="leftPanel"> <label for="addr">Address</label><input type="text" id="addr" value="" tabindex="1" title="Enter IP address" onfocus="this.select()" /> <label for="mask">Netmask</label><input type="text" id="mask" value="" tabindex="1" title="Enter netmask or bitmask" onfocus="this.select()" /> </div> <div class="rightPanel"> <input type="button" class="netClass" id="hostNetworkButton" value="#" tabindex="32767" accesskey="N" title="Networks of this host" disabled="disabled" /> <input type="button" class="netClass" value="Calculate" tabindex="32767" title="Calculate" style="width: 68px; background-color:#C0D890" /> <div style="font-size: 2px;"> </div> <input type="button" class="netClass" value="A" tabindex="32767" accesskey="A" title="Mask of subnet A" /> <input type="button" class="netClass" value="B" tabindex="32767" accesskey="B" title="Mask of subnet B" /> <input type="button" class="netClass" value="C" tabindex="32767" accesskey="C" title="Mask of subnet C" /> <input type="button" class="netClass" value="i" tabindex="32767" accesskey="I" title="Netmasks" /> <select id="radix" tabindex="1" title="Change IP presentation" > <option>Binary</option> <option>Octal</option> <option>Decimal</option> <option>Hexadecimal</option> </select> </div> </fieldset> <fieldset> <legend>Address</legend> <div class="leftPanel"> <span class="label">Address</span><input type="text" readonly="readonly" maxlength="35" id="address" value="" tabindex="2" onfocus="this.select()" style="background-color:#DADADA" /> <span class="label">Netmask</span><input type="text" readonly="readonly" maxlength="35" id="netmaskd" value="" tabindex="2" onfocus="this.select()" style="background-color:#DADADA" /> <span class="label">Inv.Netmask</span><input type="text" readonly="readonly" maxlength="35" id="netmaski" value="" tabindex="2" onfocus="this.select()" style="background-color:#DADADA" /> <span class="label">Bitmask</span><input type="text" readonly="readonly" maxlength="35" id="bitmask" value="" tabindex="2" onfocus="this.select()" style="background-color:#DADADA" /> </div> <div class="rightPanel"> <input type="text" class="longinput" readonly="readonly" maxlength="35" id="address_" value="" tabindex="2" onfocus="this.select()" style="background-color:#DADADA" /> <input type="text" class="longinput" readonly="readonly" maxlength="35" id="netmaskd_" value="" tabindex="2" onfocus="this.select()" style="background-color:#DADADA" /> <input type="text" class="longinput" readonly="readonly" maxlength="35" id="netmaski_" value="" tabindex="2" onfocus="this.select()" style="background-color:#DADADA" /> </div> </fieldset> <fieldset> <legend>Network</legend> <div class="leftPanel"> <span class="label">Network</span><input type="text" readonly="readonly" maxlength="35" id="network" value="" tabindex="3" onfocus="this.select()" style="background-color:#DADADA" /> <span class="label">First Address</span><input type="text" readonly="readonly" maxlength="35" id="address1" value="" tabindex="3" onfocus="this.select()" style="background-color:#DADADA" /> <span class="label">Last Address</span><input type="text" readonly="readonly" maxlength="35" id="addressN" value="" tabindex="3" onfocus="this.select()" style="background-color:#DADADA" /> <span class="label">Broadcast</span><input type="text" readonly="readonly" maxlength="35" id="broadcast" value="" tabindex="3" onfocus="this.select()" style="background-color:#DADADA" /> <span class="label">Length</span><input type="text" readonly="readonly" maxlength="35" id="length" value="" tabindex="3" onfocus="this.select()" style="background-color:#DADADA" /> </div> <div class="rightPanel"> <input type="text" class="longinput" readonly="readonly" maxlength="35" id="network_" value="" tabindex="3" onfocus="this.select()" style="background-color:#DADADA" /> <input type="text" class="longinput" readonly="readonly" maxlength="35" id="address1_" value="" tabindex="3" onfocus="this.select()" style="background-color:#DADADA" /> <input type="text" class="longinput" readonly="readonly" maxlength="35" id="addressN_" value="" tabindex="3" onfocus="this.select()" style="background-color:#DADADA" /> <input type="text" class="longinput" readonly="readonly" maxlength="35" id="broadcast_" value="" tabindex="3" onfocus="this.select()" style="background-color:#DADADA" /> <input type="text" class="longinput" readonly="readonly" maxlength="35" id="length_" value="" tabindex="3" onfocus="this.select()" style="background-color:#DADADA" /> </div> </fieldset> </form> <form action="" id="hostNetworkContainer" style="display: none;" onsubmit="return false"> <fieldset> <legend>Networks of this host</legend> <select id="hostNetwork" size="8"> </select> </fieldset> </form> <form action="" id="netmaskMapContainer" style="display: none;" onsubmit="return false"> <fieldset> <legend>Netmasks</legend> <select id="netmaskMap" size="16"> <option value="128.0.0.0">128.0.0.0 /1</option> <option value="192.0.0.0">192.0.0.0 /2</option> <option value="224.0.0.0">224.0.0.0 /3</option> <option value="240.0.0.0">240.0.0.0 /4</option> <option value="248.0.0.0">248.0.0.0 /5</option> <option value="252.0.0.0">252.0.0.0 /6</option> <option value="254.0.0.0">254.0.0.0 /7</option> <option value="255.0.0.0">255.0.0.0 /8</option> <option value="255.128.0.0">255.128.0.0 /9</option> <option value="255.192.0.0">255.192.0.0 /10</option> <option value="255.224.0.0">255.224.0.0 /11</option> <option value="255.240.0.0">255.240.0.0 /12</option> <option value="255.248.0.0">255.248.0.0 /13</option> <option value="255.252.0.0">255.252.0.0 /14</option> <option value="255.254.0.0">255.254.0.0 /15</option> <option value="255.255.0.0">255.255.0.0 /16</option> <option value="255.255.128.0">255.255.128.0 /17</option> <option value="255.255.192.0">255.255.192.0 /18</option> <option value="255.255.224.0">255.255.224.0 /19</option> <option value="255.255.240.0">255.255.240.0 /20</option> <option value="255.255.248.0">255.255.248.0 /21</option> <option value="255.255.252.0">255.255.252.0 /22</option> <option value="255.255.254.0">255.255.254.0 /23</option> <option value="255.255.255.0">255.255.255.0 /24</option> <option value="255.255.255.128">255.255.255.128 /25</option> <option value="255.255.255.192">255.255.255.192 /26</option> <option value="255.255.255.224">255.255.255.224 /27</option> <option value="255.255.255.240">255.255.255.240 /28</option> <option value="255.255.255.248">255.255.255.248 /29</option> <option value="255.255.255.252">255.255.255.252 /30</option> <option value="255.255.255.254">255.255.255.254 /31</option> <option value="255.255.255.255">255.255.255.255 /32</option> </select> </fieldset> </form> </div> </body> </html>