</> DHTML Snippets

<script language="JavaScript">
var colours = ["#FF0000","#FF7F00","#FFFF00","#00FF00",
               "#0000FF","#4B0082","#9400D3"];
function rainbow(text) {
  var out = "";
  for (var i = 0; i < text.length; i++) {
    out += '<font color="' + colours[i % colours.length] + '">'
         + text.charAt(i) + '</font>';
  }
  document.write(out);
}
</script>

<h1><script language="JavaScript">rainbow("MY HOME PAGE");</script></h1>

<span id="typed"></span><span id="caret">_</span>

<script language="JavaScript">
var msg = "Welcome to my corner of the internet...";
var i = 0;
function typeIt() {
  if (i < msg.length) {
    document.getElementById("typed").innerHTML += msg.charAt(i++);
    setTimeout(typeIt, 90);
  }
}
setInterval(function () {
  var c = document.getElementById("caret");
  c.style.visibility = (c.style.visibility === "hidden") ? "visible" : "hidden";
}, 500);
typeIt();
</script>

<script language="JavaScript">
var tmsg = "*** WELCOME *** THANKS FOR VISITING *** ";
var tpos = 0;
function scrollTitle() {
  document.title = tmsg.substring(tpos) + tmsg.substring(0, tpos);
  tpos = (tpos + 1) % tmsg.length;
  setTimeout(scrollTitle, 200);
}
scrollTitle();
</script>

<p style="font:13px Verdana">The title of this frame's own document is scrolling
right now, but a frame's title never reaches the browser tab, so here is a live
mirror of it. Put the script on a real page and the tab itself scrolls.</p>
<div id="tmirror" style="font:bold 14px 'Courier New';background:#000;color:#0f0;
     display:inline-block;padding:4px 10px"></div>
<script language="JavaScript">
setInterval(function () {
  document.getElementById("tmirror").innerHTML = document.title;
}, 200);
</script>

<div id="wavy" style="font: bold 28px Arial; color: #FF00FF"></div>

<script language="JavaScript">
var wtext = "WAVY TEXT!";
var spans = [];
var host = document.getElementById("wavy");
for (var i = 0; i < wtext.length; i++) {
  var s = document.createElement("span");
  s.style.display = "inline-block";
  s.innerHTML = wtext.charAt(i) === " " ? "&nbsp;" : wtext.charAt(i);
  host.appendChild(s);
  spans.push(s);
}
var phase = 0;
setInterval(function () {
  phase += 0.25;
  for (var j = 0; j < spans.length; j++) {
    spans[j].style.transform =
      "translateY(" + (Math.sin(phase + j * 0.6) * 10).toFixed(1) + "px)";
  }
}, 50);
</script>

<h2 id="fader" style="font-family: Impact, sans-serif">FADING COLOURS</h2>

<script language="JavaScript">
var hue = 0;
setInterval(function () {
  hue = (hue + 3) % 360;
  document.getElementById("fader").style.color = "hsl(" + hue + ",100%,55%)";
}, 60);
</script>

<script language="JavaScript">
var TRAIL = 14, dots = [];
for (var i = 0; i < TRAIL; i++) {
  var d = document.createElement("div");
  d.innerHTML = "\u2726";
  d.style.cssText = "position:fixed;left:0;top:0;pointer-events:none;z-index:9999;"
    + "color:hsl(" + (i * 360 / TRAIL) + ",100%,65%);font-size:"
    + (16 - i * 0.8) + "px";
  document.body.appendChild(d);
  dots.push({ el: d, x: 0, y: 0 });
}
var mx = 0, my = 0;
document.onmousemove = function (e) { mx = e.clientX; my = e.clientY; };
setInterval(function () {
  var px = mx, py = my;
  for (var i = 0; i < dots.length; i++) {
    var s = dots[i];
    s.x += (px - s.x) * 0.35;
    s.y += (py - s.y) * 0.35;
    s.el.style.left = s.x + "px";
    s.el.style.top = s.y + "px";
    px = s.x; py = s.y;
  }
}, 25);
</script>

<script language="JavaScript">
var FMSG = "xbawx.com ";
var chars = [];
for (var i = 0; i < FMSG.length; i++) {
  var c = document.createElement("div");
  c.innerHTML = FMSG.charAt(i);
  c.style.cssText = "position:fixed;left:0;top:0;pointer-events:none;z-index:9999;"
    + "font:bold 14px Verdana;color:#FF00AA";
  document.body.appendChild(c);
  chars.push({ el: c, x: 0, y: 0 });
}
var cx = 0, cy = 0, step = 0;
document.onmousemove = function (e) { cx = e.clientX; cy = e.clientY; };
setInterval(function () {
  step += 0.28;
  for (var i = 0; i < chars.length; i++) {
    var a = step - i * 0.45;
    var tx = cx + Math.cos(a) * (24 + i * 3);
    var ty = cy + Math.sin(a) * (24 + i * 3);
    chars[i].x += (tx - chars[i].x) * 0.4;
    chars[i].y += (ty - chars[i].y) * 0.4;
    chars[i].el.style.left = chars[i].x + "px";
    chars[i].el.style.top = chars[i].y + "px";
  }
}, 30);
</script>

<style>
body        { cursor: url(https://xbawx.com/inc/img/demo/cursors/hand.cur), auto; }
a:hover     { cursor: url(https://xbawx.com/inc/img/demo/cursors/point.cur), pointer; }
.wait-thing { cursor: url(https://xbawx.com/inc/img/demo/cursors/hourglass.cur), wait; }
</style>

<!-- .ani animated cursors were IE-only and never worked anywhere else.
     A .png works everywhere, and you can set the hotspot: -->
<style>
.custom { cursor: url(https://xbawx.com/inc/img/demo/cursors/star.png) 8 8, crosshair; }
</style>

<!-- The star is a real file in this page, so this one works right now.
     Two rules browsers added since: the image must be 128x128 or smaller,
     and a keyword fallback after the url() is required. -->
<style>
.tryme {
  cursor: url(https://xbawx.com/inc/img/demo/cursors/star.png) 8 8, crosshair;
  display: inline-block; padding: 24px 32px; border: 2px dashed #999;
  font: 13px Verdana;
}
.tryme2 {
  cursor: url(https://xbawx.com/inc/img/demo/cursors/hourglass.cur), wait;
  display: inline-block; padding: 24px 32px; border: 2px dashed #999;
  font: 13px Verdana;
}
</style>
<span class="tryme">point at this box</span>
<span class="tryme2">and this one</span>

<p style="font:13px Verdana">Click anywhere in this box.</p>

<script language="JavaScript">
document.onclick = function (e) {
  for (var i = 0; i < 12; i++) {
    (function (n) {
      var s = document.createElement("div");
      s.innerHTML = "\u2734";
      s.style.cssText = "position:fixed;pointer-events:none;z-index:9999;"
        + "font-size:12px;color:hsl(" + (n * 30) + ",100%,60%);"
        + "left:" + e.clientX + "px;top:" + e.clientY + "px;"
        + "transition:all .6s ease-out";
      document.body.appendChild(s);
      setTimeout(function () {
        s.style.left = (e.clientX + Math.cos(n) * 60) + "px";
        s.style.top  = (e.clientY + Math.sin(n) * 60) + "px";
        s.style.opacity = "0";
      }, 10);
      setTimeout(function () { s.parentNode.removeChild(s); }, 700);
    })(i);
  }
};
</script>

<script language="JavaScript">
var FLAKES = 30, flakes = [];
for (var i = 0; i < FLAKES; i++) {
  var f = document.createElement("div");
  f.innerHTML = "\u2744";
  f.style.cssText = "position:fixed;top:-20px;pointer-events:none;z-index:9998;"
    + "color:#fff;text-shadow:0 0 3px #6cf";
  document.body.appendChild(f);
  flakes.push({
    el: f,
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight,
    s: 0.6 + Math.random() * 1.6,
    r: 0.4 + Math.random() * 1.2,
    a: Math.random() * 6.28
  });
  f.style.fontSize = (8 + Math.random() * 14) + "px";
}
setInterval(function () {
  for (var i = 0; i < flakes.length; i++) {
    var f = flakes[i];
    f.y += f.s;
    f.a += 0.03;
    if (f.y > window.innerHeight) { f.y = -20; f.x = Math.random() * window.innerWidth; }
    f.el.style.left = (f.x + Math.sin(f.a) * 18) + "px";
    f.el.style.top = f.y + "px";
  }
}, 33);
</script>

<script language="JavaScript">
var GLYPH = "\u2665";      // \u2605 star  \u2618 shamrock  \u{1F383} pumpkin
var COLOR = "#FF3366";
var bits = [];
for (var i = 0; i < 24; i++) {
  var b = document.createElement("div");
  b.innerHTML = GLYPH;
  b.style.cssText = "position:fixed;pointer-events:none;z-index:9998;color:" + COLOR
    + ";font-size:" + (10 + Math.random() * 16) + "px";
  document.body.appendChild(b);
  bits.push({ el: b, x: Math.random() * window.innerWidth,
              y: Math.random() * -600, s: 1 + Math.random() * 2,
              a: Math.random() * 6.28 });
}
setInterval(function () {
  for (var i = 0; i < bits.length; i++) {
    var b = bits[i];
    b.y += b.s; b.a += 0.05;
    if (b.y > window.innerHeight) { b.y = -30; b.x = Math.random() * window.innerWidth; }
    b.el.style.left = (b.x + Math.sin(b.a) * 26) + "px";
    b.el.style.top = b.y + "px";
    b.el.style.transform = "rotate(" + (b.a * 20) + "deg)";
  }
}, 33);
</script>

<script language="JavaScript">
var bgHue = 0;
setInterval(function () {
  bgHue = (bgHue + 1) % 360;
  document.body.style.backgroundColor = "hsl(" + bgHue + ",70%,18%)";
}, 80);
</script>

<style>
  /* Black page. The canvas sits fixed behind everything and the content rides
     on top with a higher z-index. A z-index:-1 canvas would vanish behind an
     opaque body background, which is the classic way this effect "breaks". */
  html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
  #stars { position: fixed; inset: 0; z-index: 0; display: block; }
  .cyber { position: relative; z-index: 1; margin: 0 0 8px; padding: 0 18px;
           color: #fff; font-family: Verdana, sans-serif; text-shadow: 0 0 6px #39f; }
  h2.cyber { padding-top: 16px; }
</style>

<canvas id="stars"></canvas>
<h2 class="cyber">WELCOME TO CYBERSPACE</h2>
<p class="cyber">Stars stream past behind the text, like the Windows 3.1 screensaver.</p>

<script language="JavaScript">
var cv = document.getElementById("stars"), cx = cv.getContext("2d"), st = [];
function sizeIt() { cv.width = window.innerWidth; cv.height = window.innerHeight; }
sizeIt(); window.onresize = sizeIt;
for (var i = 0; i < 220; i++) {
  st.push({ x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2,
            z: Math.random() });
}
setInterval(function () {
  cx.fillStyle = "#000"; cx.fillRect(0, 0, cv.width, cv.height);
  var hw = cv.width / 2, hh = cv.height / 2;
  for (var i = 0; i < st.length; i++) {
    var s = st[i];
    s.z -= 0.006;
    if (s.z <= 0.01) { s.z = 1; s.x = (Math.random() - 0.5) * 2; s.y = (Math.random() - 0.5) * 2; }
    var px = hw + (s.x / s.z) * hw, py = hh + (s.y / s.z) * hh;
    var r = (1 - s.z) * 2.4;
    cx.fillStyle = "rgba(255,255,255," + (1 - s.z) + ")";
    cx.fillRect(px, py, r, r);
  }
}, 33);
</script>

<!-- The 1995 way (obsolete attribute, still renders) -->
<body bgcolor="#000000" text="#00FF00"
      background="https://xbawx.com/btn/assets/e9/e9f7b1b0191adffe6cf00cf4516c9eaab7ebeac1.gif">

<!-- The way to do it now -->
<style>
body {
  background-image: url(https://xbawx.com/btn/assets/e9/e9f7b1b0191adffe6cf00cf4516c9eaab7ebeac1.gif);
  background-repeat: repeat;
  background-color: #000;       /* shows while the tile loads */
  background-attachment: fixed; /* tile stays put while you scroll */
  color: #0f0;
}
</style>

<font face="Verdana" size="2">
  Tiled backgrounds live in the xbawx button gallery under
  <b>textures</b>: /btn/?collection=textures
</font>

<script language="JavaScript">
var on = false, flashes = 0;
var disco = setInterval(function () {
  on = !on;
  document.body.style.backgroundColor = on ? "#FF00FF" : "#00FFFF";
  if (++flashes > 12) {
    clearInterval(disco);
    document.body.style.backgroundColor = "";
  }
}, 350);
</script>

<form name="jumper">
  <select name="dest" onchange="if(this.value) location.href=this.value">
    <option value="">-- pick a page --</option>
    <option value="/">Home</option>
    <option value="/about.html">About Me</option>
    <option value="/links.html">My Links</option>
    <option value="/guestbook.html">Sign My Guestbook</option>
  </select>
  <input type="button" value="Go"
         onclick="if(document.jumper.dest.value) location.href=document.jumper.dest.value">
</form>

<a href="javascript:history.back()">&lt;&lt; Back</a> |
<a href="javascript:history.forward()">Forward &gt;&gt;</a> |
<a href="javascript:location.reload()">Reload</a>

<!-- Or as real buttons -->
<button onclick="history.back()">&laquo; Back</button>
<button onclick="history.forward()">Forward &raquo;</button>

<script language="JavaScript">
var places = [
  "http://www.example.com/",
  "/emu/",
  "/btn/",
  "/snd/"
];
function surpriseMe() {
  location.href = places[Math.floor(Math.random() * places.length)];
}
</script>

<a href="javascript:surpriseMe()">Take me somewhere random!</a>

<table border="2" cellpadding="6" bgcolor="#000040" align="center">
<tr><td align="center">
  <font face="Verdana" size="2" color="#FFFFFF">
    This site is a member of the<br>
    <b><font color="#FFFF00">Retro Web Ring</font></b>
  </font><br><br>
  <a href="/ring/prev?id=42">[ Previous ]</a>
  <a href="/ring/random">[ Random ]</a>
  <a href="/ring/next?id=42">[ Next ]</a>
  <a href="/ring/list">[ List Sites ]</a>
  <br><br>
  <font face="Verdana" size="1" color="#AAAAAA">
    Want to join? <a href="/ring/join">Apply here</a>
  </font>
</td></tr>
</table>

<script language="JavaScript">
<!--
// Preload so there is no flicker on first hover
var onImg = new Image();
onImg.src  = "https://xbawx.com/btn/assets/a6/a6123e8f5e63e584a09d69d3555770b2295cf761.gif";
var offImg = new Image();
offImg.src = "https://xbawx.com/btn/assets/f8/f8fe94a7667d1041aee087e1c130f93c0b11462e.gif";

function swap(name, src) { document.images[name].src = src; }
//-->
</script>

<a href="/"
   onmouseover="swap('home', onImg.src)"
   onmouseout="swap('home', offImg.src)">
  <img name="home" src="https://xbawx.com/btn/assets/f8/f8fe94a7667d1041aee087e1c130f93c0b11462e.gif"
       width="88" height="31" border="0" alt="Home">
</a>

<script language="JavaScript">
if (top.location != self.location) {
  top.location = self.location.href;
}
</script>

<p style="font:13px Verdana">This demo just tried to bust out of its frame. The
sandbox around it refused the navigation, which is the modern header doing for
every site what this script did for one page.</p>

<!-- The 2026 version. Send this as an HTTP response header instead: -->
<!-- Content-Security-Policy: frame-ancestors 'self' -->

<style>
.menu-head { cursor: pointer; font: bold 13px Verdana; color: #FFCC00;
             background: #000060; padding: 4px 8px; margin-top: 2px; }
.menu-body { display: none; background: #000030; padding: 6px 18px; }
.menu-body a { color: #99CCFF; display: block; padding: 2px 0; }
</style>

<div class="menu-head" onclick="toggleMenu('m1')">+ My Pages</div>
<div class="menu-body" id="m1">
  <a href="/about.html">About Me</a>
  <a href="/pets.html">My Pets</a>
</div>

<div class="menu-head" onclick="toggleMenu('m2')">+ Links</div>
<div class="menu-body" id="m2">
  <a href="/links.html">Cool Sites</a>
  <a href="/ring.html">Web Ring</a>
</div>

<script language="JavaScript">
function toggleMenu(id) {
  var b = document.getElementById(id);
  var open = b.style.display === "block";
  b.style.display = open ? "none" : "block";
  b.previousSibling.previousSibling.innerHTML =
    (open ? "+ " : "- ") + b.previousSibling.previousSibling.innerHTML.substring(2);
}
</script>

<div id="clock" style="font:bold 20px 'Courier New';color:#00FF00;
     background:#000;display:inline-block;padding:6px 12px;border:2px inset #333">
</div>

<script language="JavaScript">
function tick() {
  var d = new Date();
  var h = d.getHours(), m = d.getMinutes(), s = d.getSeconds();
  var ap = h >= 12 ? "PM" : "AM";
  h = h % 12; if (h === 0) h = 12;
  document.getElementById("clock").innerHTML =
    h + ":" + (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s + " " + ap;
  setTimeout(tick, 1000);
}
tick();
</script>

<script language="JavaScript">
document.write("This page last updated: " + document.lastModified);
</script>

<!-- Nicer formatting -->
<script language="JavaScript">
var lm = new Date(document.lastModified);
var months = ["January","February","March","April","May","June",
              "July","August","September","October","November","December"];
document.write("Last updated " + months[lm.getMonth()] + " "
             + lm.getDate() + ", " + lm.getFullYear());
</script>

<div id="cd" style="font:bold 16px Verdana;color:#FF0000"></div>

<script language="JavaScript">
var TARGET = new Date("2026-08-21T18:06:47Z");
function countdown() {
  var left = TARGET - new Date();
  if (left <= 0) {
    document.getElementById("cd").innerHTML = "IT'S HERE!!!";
    return;
  }
  var d = Math.floor(left / 86400000);
  var h = Math.floor(left / 3600000) % 24;
  var m = Math.floor(left / 60000) % 60;
  var s = Math.floor(left / 1000) % 60;
  document.getElementById("cd").innerHTML =
    d + " days, " + h + " hours, " + m + " minutes, " + s + " seconds";
  setTimeout(countdown, 1000);
}
countdown();
</script>

<script language="JavaScript">
var h = new Date().getHours();
var greet;
if (h < 5)       greet = "You're up late";
else if (h < 12) greet = "Good morning";
else if (h < 18) greet = "Good afternoon";
else             greet = "Good evening";
document.write("<h2>" + greet + ", and welcome to my page!</h2>");
</script>

<script language="JavaScript">
var LAUNCH = new Date("June 14, 1997");
var days = Math.floor((new Date() - LAUNCH) / 86400000);
document.write("This site has been online for <b>" + days + "</b> days.");
</script>

<script language="JavaScript">
var pics = [
  "https://xbawx.com/btn/assets/7c/7cada91ec2730b0fb58b60bab3f16e67985dd27b.gif",
  "https://xbawx.com/btn/assets/cd/cd5e5da0a6c7a9bb95bb3ce5a919aea7c39f50b0.gif",
  "https://xbawx.com/btn/assets/d7/d7e43e74e65cea13f9566328dc82277862763030.gif",
  "https://xbawx.com/btn/assets/d2/d2985e48c7ac7bdbd512da8ea61ab68e76c1dd83.gif"
];
var pick = pics[Math.floor(Math.random() * pics.length)];
document.write('<img src="' + pick + '" border="2" alt="Random picture">');
</script>

<a href="#" id="bannerLink" target="_blank">
  <img id="banner" width="468" height="60" border="0" alt=""
       src="https://xbawx.com/btn/assets/1a/1a8abd6c5408549cb231cd1123976256dc0e4564.gif">
</a>

<script language="JavaScript">
var banners = [
  { img: "https://xbawx.com/btn/assets/1a/1a8abd6c5408549cb231cd1123976256dc0e4564.gif",
    url: "http://www.example.com/" },
  { img: "https://xbawx.com/btn/assets/c7/c704f793437b37858d0104ef6e9b214caf95ab24.gif",
    url: "http://www.example.net/" },
  { img: "https://xbawx.com/btn/assets/7b/7bf9dba51af5b0a3b14b3c15f152d0cb862fe23f.gif",
    url: "http://www.example.org/" }
];
var bi = 0;
setInterval(function () {
  bi = (bi + 1) % banners.length;
  document.getElementById("banner").src = banners[bi].img;
  document.getElementById("bannerLink").href = banners[bi].url;
}, 3000);
</script>

<img id="slide" border="3"
     src="https://xbawx.com/btn/assets/7c/7cada91ec2730b0fb58b60bab3f16e67985dd27b.gif"><br>
<button onclick="step(-1)">&laquo; Previous</button>
<span id="slideNum">1 of 4</span>
<button onclick="step(1)">Next &raquo;</button>

<script language="JavaScript">
var slides = [
  "https://xbawx.com/btn/assets/7c/7cada91ec2730b0fb58b60bab3f16e67985dd27b.gif",
  "https://xbawx.com/btn/assets/cd/cd5e5da0a6c7a9bb95bb3ce5a919aea7c39f50b0.gif",
  "https://xbawx.com/btn/assets/d7/d7e43e74e65cea13f9566328dc82277862763030.gif",
  "https://xbawx.com/btn/assets/d3/d37aa48fdebf21f4f35faabc4e983573b2553fbe.gif"
];
var si = 0;
for (var i = 0; i < slides.length; i++) { var p = new Image(); p.src = slides[i]; }
function step(n) {
  si = (si + n + slides.length) % slides.length;
  document.getElementById("slide").src = slides[si];
  document.getElementById("slideNum").innerHTML = (si + 1) + " of " + slides.length;
}
</script>

<script language="JavaScript">
alert("Welcome to my home page!\n\nPlease sign my guestbook before you leave!");
</script>

<!-- Or only on the visitor's first arrival, using a cookie -->
<script language="JavaScript">
try {
  if (document.cookie.indexOf("seenwelcome=1") === -1) {
    alert("Welcome to my home page!");
    document.cookie = "seenwelcome=1; path=/; max-age=31536000";
  }
} catch (e) { /* a sandboxed frame has no cookie access */ }
</script>

<script language="JavaScript">
var who = null, m = null;
try { m = document.cookie.match(/visitorname=([^;]+)/); } catch (e) { m = null; }
if (m) {
  who = decodeURIComponent(m[1]);
} else {
  who = prompt("Hi! What's your name?", "");
  try {
    if (who) document.cookie = "visitorname=" + encodeURIComponent(who)
                             + "; path=/; max-age=31536000";
  } catch (e) {}
}
if (who) document.write("<h2>Welcome, " + who + "!</h2>");
</script>

<script language="JavaScript">
document.write("Your screen is " + screen.width + "x" + screen.height
             + " at " + screen.colorDepth + " bit colour.<br>");

if (screen.width < 800) {
  document.write("<b>This site is best viewed at 800x600 or higher!</b>");
}
</script>

<!-- The size that actually matters is the window, not the screen.
     Read it after load: during parsing this frame has no size yet, so a
     document.write here would report 0x0. -->
<p id="vp" style="font:13px Verdana"></p>
<script>
window.onload = function () {
  document.getElementById("vp").innerHTML = "Your browser window is "
    + window.innerWidth + "x" + window.innerHeight;
};
</script>

<script language="JavaScript">
if (document.referrer && document.referrer.length) {
  document.write("Thanks for coming over from <b>"
               + document.referrer + "</b>!");
} else {
  document.write("Welcome! Did you bookmark me? :)");
}
</script>

<a href="javascript:window.print()">
  <img src="https://xbawx.com/inc/img/demo/printer.gif" border="0" alt=""> Print this page
</a>

<!-- Worth adding: -->
<style media="print">
  .nav, .banner, .guestbook { display: none; }
  body { background: #fff; color: #000; }
</style>

<script language="JavaScript">
var user = "webmaster";
var host = "example.com";
document.write('<a href="mail' + 'to:' + user + '@' + host + '">'
             + user + ' at ' + host + '</a>');
</script>

<noscript>webmaster at example dot com</noscript>

<!-- The character-code version, for maximum 1998 authenticity -->
<script language="JavaScript">
var e = "";
var c = [119,101,98,64,101,120,97,109,112,108,101,46,99,111,109];
for (var i = 0; i < c.length; i++) e += String.fromCharCode(c[i]);
document.write('<a href="mailto:' + e + '">Email me</a>');
</script>

<script language="JavaScript">
var n = 0;
try {
  var m = document.cookie.match(/visits=(\d+)/);
  if (m) n = parseInt(m[1], 10);
  n++;
  document.cookie = "visits=" + n + "; path=/; max-age=31536000";
} catch (e) {
  n = 1;   // a sandboxed demo frame has no cookie access, so show the first visit
}
document.write("You have visited this page <b>" + n + "</b> time"
             + (n === 1 ? "" : "s") + "!");
</script>

<!-- Make one at https://xbawx.com/counter/ and paste the tag it gives you -->
<center>
<font face="Verdana" size="1">You are visitor number</font><br>
<a href="https://xbawx.com/counter/" target="_blank"
   title="Get your own free counter at xbawx.com">
  <img src="https://xbawx.com/counter/3cswt32t59r8.png" border="0"
       alt="Visitor counter" title="Hit counter powered by xbawx.com">
</a><br>
<font face="Verdana" size="1">since June 1997</font>
</center>

<center>
<table border="0" cellpadding="8">
<tr>
  <td align="center">
    <a href="/cgi-bin/guestbook.cgi?action=sign">
      <img src="https://xbawx.com/btn/assets/8b/8bdf0973981f85adcb4e414fdd3c29b6b5c09f87.gif"
           border="0" alt="Sign my guestbook"></a>
  </td>
  <td align="center">
    <a href="/cgi-bin/guestbook.cgi?action=view">
      <img src="https://xbawx.com/btn/assets/36/368d7990a73611324b866899545704642fd3869c.gif"
           border="0" alt="View my guestbook"></a>
  </td>
</tr>
</table>
<font face="Comic Sans MS" size="2" color="#FF00FF">
  Please sign my guestbook before you go!!
</font>
</center>

<center>
<img src="https://xbawx.com/btn/assets/eb/ebe0ed36a9171d5e37895f37e18809cf877f99b0.gif"
     width="301" height="110" alt="Under construction">
<br>
<font face="Comic Sans MS" size="3" color="#FFCC00">
  <b>This page is under construction!</b>
</font>
<br>
<font face="Verdana" size="2">
  Please check back soon. Last updated
  <script language="JavaScript">document.write(document.lastModified);</script>
</font>
<br>
<img src="https://xbawx.com/btn/assets/16/163d8fb055a9e0c37cc968d1bba32b69b72bf351.gif"
     width="64" height="68" alt="Under construction">
</center>

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td colspan="2" bgcolor="#000080" height="60">
    <font face="Arial" color="#FFFFFF" size="5">&nbsp;MY HOME PAGE</font>
  </td>
</tr>
<tr valign="top">
  <td width="150" bgcolor="#CCCCCC">
    <table cellpadding="4" cellspacing="0" border="0" width="100%">
      <tr><td><a href="/">Home</a></td></tr>
      <tr><td><a href="/about.html">About</a></td></tr>
      <tr><td><a href="/links.html">Links</a></td></tr>
    </table>
  </td>
  <td bgcolor="#FFFFFF">
    <table cellpadding="10" cellspacing="0" border="0"><tr><td>
      Main content goes in here, three tables deep.
    </td></tr></table>
  </td>
</tr>
</table>

<style>
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .clearfix { height: 1%; }   /* and hasLayout for IE6 */
</style>

<div class="clearfix" style="border:2px solid #333">
  <div style="float:left; width:80px; height:60px; background:#8cf">float</div>
  <div style="float:left; width:80px; height:60px; background:#fc8">float</div>
</div>

<!-- The 2026 version -->
<style>.modern { display: flow-root }</style>

<div id="box" style="position:absolute; left:20px; top:60px; width:160px;
     background:#FFFFCC; border:1px solid #999">Move me.</div>

<script language="JavaScript">
// 1998, in full
var isNS4 = (document.layers) ? true : false;
var isIE4 = (document.all && !document.getElementById) ? true : false;
var isDOM = (document.getElementById) ? true : false;

function getObj(id) {
  if (isDOM) return document.getElementById(id).style;
  if (isIE4) return document.all[id].style;
  if (isNS4) return document.layers[id];       // note: not .style
  return null;
}
function moveTo(id, x, y) {
  var o = getObj(id);
  if (!o) return;
  if (isNS4) { o.left = x; o.top = y; }        // numbers
  else       { o.left = x + "px"; o.top = y + "px"; }   // strings with units
}

var n = 0;
setInterval(function () { n = (n + 4) % 160; moveTo("box", 20 + n, 60); }, 60);
</script>

<form action="/cgi-bin/search.pl" method="get">
  <input type="text" name="q" size="20">
  <input type="image" src="https://xbawx.com/inc/img/demo/go.gif" name="go" border="0" width="40" height="20"
         alt="Search">
</form>

<!-- What the server actually receives -->
<!--   q=cats&go.x=17&go.y=9                                     -->
<!--   Note: no "go" parameter at all, which surprised everybody. -->

<!-- The 2026 version, if you just want a styled submit -->
<button type="submit"><img src="https://xbawx.com/inc/img/demo/go.gif" alt="Search"></button>

<script language="JavaScript">
function MM_findObj(n, d) { //v4.01
  var p, i, x;
  if (!d) d = document;
  if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
    d = parent.frames[n.substring(p + 1)].document; n = n.substring(0, p);
  }
  if (!(x = d[n]) && d.all) x = d.all[n];
  for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
  for (i = 0; !x && d.layers && i < d.layers.length; i++)
    x = MM_findObj(n, d.layers[i].document);
  if (!x && d.getElementById) x = d.getElementById(n);
  return x;
}
function MM_preloadImages() { //v3.0
  var d = document;
  if (d.images) {
    if (!d.MM_p) d.MM_p = new Array();
    var i, j = d.MM_p.length, a = MM_preloadImages.arguments;
    for (i = 0; i < a.length; i++)
      if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }
  }
}
function MM_swapImgRestore() { //v3.0
  var i, x, a = document.MM_sr;
  for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
}
function MM_swapImage() { //v3.0
  var i, j = 0, x, a = MM_swapImage.arguments;
  document.MM_sr = new Array;
  for (i = 0; i < (a.length - 2); i += 3)
    if ((x = MM_findObj(a[i])) != null) {
      document.MM_sr[j++] = x;
      if (!x.oSrc) x.oSrc = x.src;
      x.src = a[i + 2];
    }
}
</script>

<body onLoad="MM_preloadImages('https://xbawx.com/btn/assets/a6/a6123e8f5e63e584a09d69d3555770b2295cf761.gif')">
<a href="/"
   onMouseOver="MM_swapImage('home','','https://xbawx.com/btn/assets/a6/a6123e8f5e63e584a09d69d3555770b2295cf761.gif',1)"
   onMouseOut="MM_swapImgRestore()">
  <img name="home" width="88" height="31" border="0"
       src="https://xbawx.com/btn/assets/f8/f8fe94a7667d1041aee087e1c130f93c0b11462e.gif">
</a>
<p style="font:11px Verdana">Point at the button. That is four functions and about
forty lines of browser sniffing to change one image.</p>

<!-- Indent one step -->
<blockquote>Not a quotation.</blockquote>

<!-- Indent three steps -->
<blockquote><blockquote><blockquote>
  Still not a quotation. Just further right.
</blockquote></blockquote></blockquote>

<!-- The other way people did it -->
<dl><dd><dl><dd>Also just an indent.</dd></dl></dd></dl>

<!-- And the third way -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Indented with non-breaking spaces.</p>

<!-- The 2026 version -->
<p style="margin-left: 4em">A margin.</p>

<!-- Fake indentation -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;This paragraph is indented four spaces.</p>

<!-- Fake column gap -->
<p>Left column&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Right column</p>

<!-- The empty cell that has to contain something -->
<table border="1" cellpadding="4">
<tr><td>Filled</td><td>&nbsp;</td></tr>
</table>

<!-- Fake vertical space -->
<br>&nbsp;<br>&nbsp;<br>

<!-- The 2026 version -->
<p style="text-indent:4em">Indented.</p>
<div style="height:2em"></div>

<table border="0" cellpadding="4">
<tr>
  <td><font face="Arial, Helvetica, sans-serif" size="2" color="#000000">Name</font></td>
  <td><font face="Arial, Helvetica, sans-serif" size="2" color="#000000">Age</font></td>
</tr>
<tr>
  <td><font face="Arial, Helvetica, sans-serif" size="2" color="#000000">Sam</font></td>
  <td><font face="Arial, Helvetica, sans-serif" size="2" color="#000000">31</font></td>
</tr>
</table>

<!-- The 2026 version -->
<style>table { font: 14px Arial, Helvetica, sans-serif; color: #000 }</style>

<script language="JavaScript">
var today = new Date();
// getYear() returns the year minus 1900. In 1998 that was "98",
// so everyone just glued "19" in front of it.
document.write("Copyright 19" + today.getYear() + ". All rights reserved.");
</script>

<h3>This page is now editable.</h3>
<p>Click anywhere and start typing. Rearrange this paragraph. Delete
   the heading. The page will not stop you, because the page is now
   a word processor.</p>
<p><i>(Nothing is saved. Restart the demo and it all comes back.)</i></p>

<script language="JavaScript">
// One line turns the entire document into a text editor.
document.designMode = "on";
</script>

<style>
.rbox { position: relative; background: #dde6f0; padding: 22px;
        color: #14284a; font-family: Verdana, sans-serif; }
.rbox img { position: absolute; width: 16px; height: 16px; border: 0; }
.rc-tl { top: 0; left: 0 }    .rc-tr { top: 0; right: 0 }
.rc-bl { bottom: 0; left: 0 } .rc-br { bottom: 0; right: 0 }
</style>

<div class="rbox">
  <img class="rc-tl" src="https://xbawx.com/inc/img/demo/corner_tl.gif">
  <img class="rc-tr" src="https://xbawx.com/inc/img/demo/corner_tr.gif">
  <img class="rc-bl" src="https://xbawx.com/inc/img/demo/corner_bl.gif">
  <img class="rc-br" src="https://xbawx.com/inc/img/demo/corner_br.gif">
  Rounded corners, no border-radius. Four GIFs holding this shape together.
</div>

<style>
h2.logo {
  width: 360px; height: 60px;
  background: url(https://xbawx.com/inc/img/demo/header_mysite.png) no-repeat;
  text-indent: -9999px;      /* the words leave the screen, the meaning stays */
  overflow: hidden;
  margin: 0;
}
</style>

<h2 class="logo">My Cool Site</h2>
<p>You see a graphic. A search engine still reads the words "My Cool Site".</p>

<p id="out"></p>

<script language="JavaScript">
// You cannot write "</scr" + "ipt>" as one piece. The parser would
// see the closing tag inside your string and end THIS script early.
var slot = document.getElementById("out");
var tag = "<scr" + "ipt>document.title='written from a string'</scr" + "ipt>";
slot.innerHTML = "This string builds a script tag without ending the current one:" +
                 "<br><code>" + tag.replace(/</g, "&lt;") + "</code>";
</script>

<script>
var out = ("b" + "a" + + "a" + "a").toLowerCase();
document.write("<h2 style='font-family:sans-serif'>" + out + "</h2>");
document.write("<p><code>(\"b\" + \"a\" + + \"a\" + \"a\").toLowerCase()</code></p>");
document.write("<p>The <code>+ +\"a\"</code> is a unary plus on \"a\", which is <b>NaN</b>, so it spells <b>baNaNa</b>.</p>");
</script>

<script>
document.write("<p><code>0.1 + 0.2</code> is <b>" + (0.1 + 0.2) + "</b></p>");
document.write("<p><code>0.1 + 0.2 === 0.3</code> is <b>" + (0.1 + 0.2 === 0.3) + "</b></p>");
document.write("<p>Binary floating point cannot hold 0.1 or 0.2 exactly.</p>");
</script>

<script>
document.write("<p><code>typeof NaN</code> is <b>" + (typeof NaN) + "</b></p>");
document.write("<p><code>NaN === NaN</code> is <b>" + (NaN === NaN) + "</b></p>");
document.write("<p>NaN is number-typed, and the standard defines it as unequal to everything.</p>");
</script>

<script>
document.write("<p><code>typeof null</code> is <b>" + (typeof null) + "</b></p>");
document.write("<p><code>typeof undefined</code> is <b>" + (typeof undefined) + "</b></p>");
document.write("<p>null's all-zero bits matched the object type tag in the 1995 engine.</p>");
</script>

<script>
document.write("<p><code>![]</code> is <b>" + (![]) + "</b></p>");
document.write("<p><code>[] == ![]</code> is <b>" + ([] == ![]) + "</b></p>");
document.write("<p>Both sides collapse to 0 under == coercion.</p>");
</script>

<script>
document.write("<p><code>Math.max()</code> is <b>" + Math.max() + "</b></p>");
document.write("<p><code>Math.min()</code> is <b>" + Math.min() + "</b></p>");
document.write("<p><code>Math.max() < Math.min()</code> is <b>" + (Math.max() < Math.min()) + "</b></p>");
</script>

<script>
document.write("<p><code>true + true</code> is <b>" + (true + true) + "</b></p>");
document.write("<p><code>true + true + true</code> is <b>" + (true + true + true) + "</b></p>");
document.write("<p><code>true * 5</code> is <b>" + (true * 5) + "</b></p>");
</script>

<script>
document.write("<p><code>\"11\" + 1</code> is <b>" + ("11" + 1) + "</b></p>");
document.write("<p><code>\"11\" - 1</code> is <b>" + ("11" - 1) + "</b></p>");
document.write("<p><code>\"5\" * \"3\"</code> is <b>" + ("5" * "3") + "</b></p>");
</script>

<script>
document.write("<p><code>[16, 8, 4, 2].sort()</code> is <b>" + JSON.stringify([16,8,4,2].sort()) + "</b></p>");
document.write("<p><code>[16, 8, 4, 2].sort((a,b)=>a-b)</code> is <b>" + JSON.stringify([16,8,4,2].sort(function(a,b){return a-b;})) + "</b></p>");
</script>

<script>
document.write("<p><code>0 == \"\"</code> is <b>" + (0 == "") + "</b></p>");
document.write("<p><code>0 == \"0\"</code> is <b>" + (0 == "0") + "</b></p>");
document.write("<p><code>\"\" == \"0\"</code> is <b>" + ("" == "0") + "</b></p>");
</script>

<script>
document.write("<p><code>null == 0</code> is <b>" + (null == 0) + "</b></p>");
document.write("<p><code>null > 0</code> is <b>" + (null > 0) + "</b></p>");
document.write("<p><code>null >= 0</code> is <b>" + (null >= 0) + "</b></p>");
</script>

<script>
document.write("<p><code>1 < 2 < 3</code> is <b>" + (1 < 2 < 3) + "</b></p>");
document.write("<p><code>3 > 2 > 1</code> is <b>" + (3 > 2 > 1) + "</b></p>");
document.write("<p>Each comparison returns a boolean that the next one treats as 1 or 0.</p>");
</script>

<script>
// Open the browser console to see the output stack up.
console.log(console.log(console.log(console.log("lol"))));
document.write("<p>Open the browser console. It prints:</p>");
document.write("<pre>lol\nundefined\nundefined\nundefined</pre>");
document.write("<p><code>console.log</code> returns <b>undefined</b>, which the call around it then logs.</p>");
</script>

<script>
document.write("<p><code>9999999999999999</code> is <b>" + 9999999999999999 + "</b></p>");
document.write("<p><code>Number.MAX_SAFE_INTEGER</code> is <b>" + Number.MAX_SAFE_INTEGER + "</b></p>");
document.write("<p><code>MAX_SAFE_INTEGER + 1 === MAX_SAFE_INTEGER + 2</code> is <b>" + (Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2) + "</b></p>");
</script>

<script>
document.write("<p><code>[NaN].indexOf(NaN)</code> is <b>" + [NaN].indexOf(NaN) + "</b></p>");
document.write("<p><code>[NaN].includes(NaN)</code> is <b>" + [NaN].includes(NaN) + "</b></p>");
document.write("<p>indexOf uses ===, includes uses SameValueZero.</p>");
</script>

<script>
document.write("<p><code>typeof 1</code> is <b>" + (typeof 1) + "</b></p>");
document.write("<p><code>typeof typeof 1</code> is <b>" + (typeof typeof 1) + "</b></p>");
document.write("<p><code>typeof typeof anything</code> is always <b>string</b>.</p>");
</script>

<script>
// [] + {} as an expression: both coerce to strings and join.
document.write("<p><code>[] + {}</code> is <b>" + ([] + {}) + "</b></p>");
// {} + [] as a STATEMENT parses the leading {} as an empty code block,
// then runs +[] on its own, which is 0. Spelled out exactly as the parser sees it:
{}
var r = +[];
document.write("<p><code>{} + []</code> as a statement is <b>" + r + "</b></p>");
document.write("<p>The leading <code>{}</code> is an empty block, so only <code>+[]</code> runs, which is 0.</p>");
</script>

<script>
var raw = ["10", "10", "10"];
document.write('<p><code>["10", "10", "10"].map(parseInt)</code> is <b>[' + raw.map(parseInt).join(', ') + ']</b></p>');
document.write('<p>Same string three times. map hands parseInt the index as a radix.</p>');
document.write('<p>Fixed: <code>.map(function (x) { return parseInt(x, 10); })</code> is <b>[' + raw.map(function(x){return parseInt(x,10);}).join(', ') + ']</b></p>');
</script>

<script>
document.write('<p><code>parseInt(null, 24)</code> is <b>' + parseInt(null, 24) + '</b></p>');
document.write('<p>null becomes the string "null". In base 24, "n" is a valid digit worth 23, and parseInt stops at "u".</p>');
document.write('<p><code>parseInt(null, 10)</code> is <b>' + parseInt(null, 10) + '</b> (base 10 has no "n")</p>');
</script>

<script>
document.write('<p><code>String(0.0000005)</code> is <b>"' + String(0.0000005) + '"</b></p>');
document.write('<p><code>parseInt(0.0000005)</code> is <b>' + parseInt(0.0000005) + '</b></p>');
document.write('<p>The number stringifies to "5e-7", and parseInt reads just the "5".</p>');
</script>

<script>
document.write('<p><code>Math.round(2.5)</code> is <b>' + Math.round(2.5) + '</b>, <code>Math.round(-2.5)</code> is <b>' + Math.round(-2.5) + '</b></p>');
document.write('<p><code>Math.round(0.5)</code> is <b>' + Math.round(0.5) + '</b>, <code>Math.round(-0.5)</code> is <b>' + Math.round(-0.5) + '</b></p>');
document.write('<p>Halves always round toward +Infinity, not away from zero.</p>');
</script>

<script>
document.write('<p><code>(1.005).toFixed(2)</code> is <b>"' + (1.005).toFixed(2) + '"</b></p>');
document.write('<p>The value really stored: <code>(1.005).toFixed(20)</code> is <b>' + (1.005).toFixed(20) + '</b></p>');
document.write('<p>It sits just under 1.005, so it rounds down.</p>');
</script>

<script>
document.write('<p><code>Number.MIN_VALUE</code> is <b>' + Number.MIN_VALUE + '</b></p>');
document.write('<p><code>Number.MIN_VALUE > 0</code> is <b>' + (Number.MIN_VALUE > 0) + '</b></p>');
document.write('<p>The most negative number is <code>-Number.MAX_VALUE</code>, not MIN_VALUE.</p>');
</script>

<script>
document.write('<p><code>1 / 0</code> is <b>' + (1 / 0) + '</b></p>');
document.write('<p><code>-1 / 0</code> is <b>' + (-1 / 0) + '</b></p>');
document.write('<p><code>0 / 0</code> is <b>' + (0 / 0) + '</b></p>');
</script>

<script>
document.write('<p><code>0 === -0</code> is <b>' + (0 === -0) + '</b></p>');
document.write('<p><code>Object.is(0, -0)</code> is <b>' + Object.is(0, -0) + '</b></p>');
document.write('<p><code>1 / -0</code> is <b>' + (1 / -0) + '</b></p>');
</script>

<script>
document.write('<p><code>+[]</code> is <b>' + (+[]) + '</b>, <code>+[5]</code> is <b>' + (+[5]) + '</b></p>');
document.write('<p><code>+[1, 2]</code> is <b>' + (+[1,2]) + '</b>, <code>+{}</code> is <b>' + (+{}) + '</b></p>');
document.write('<p>Unary + runs the value through toString, then tries to read a number.</p>');
</script>

<script>
function show(label, v){ document.write('<p><code>' + label + '</code> is <b>' + v + '</b></p>'); }
show('Number("")', Number(""));
show('Number("0x1F")', Number("0x1F"));
show('Number(null)', Number(null));
show('Number(undefined)', Number(undefined));
</script>

<script>
document.write('<p><code>(3735928559).toString(16)</code> is <b>' + (3735928559).toString(16) + '</b></p>');
document.write('<p><code>(12648430).toString(16)</code> is <b>' + (12648430).toString(16) + '</b></p>');
document.write('<p><code>(11259375).toString(16)</code> is <b>' + (11259375).toString(16) + '</b></p>');
</script>

<script>
document.write('<p><code>!!"0"</code> is <b>' + (!!"0") + '</b> (a non-empty string is truthy)</p>');
document.write('<p><code>"0" == false</code> is <b>' + ("0" == false) + '</b> (both coerce to the number 0)</p>');
document.write('<p>Truthiness and == use different rules, so both are true.</p>');
</script>

<script>
document.write('<p><code>null == undefined</code> is <b>' + (null == undefined) + '</b></p>');
document.write('<p><code>null === undefined</code> is <b>' + (null === undefined) + '</b></p>');
document.write('<p><code>typeof null</code> is <b>"' + (typeof null) + '"</b>, <code>typeof undefined</code> is <b>"' + (typeof undefined) + '"</b></p>');
</script>

<script>
document.write('<p><code>["milk", "eggs"] == "milk,eggs"</code> is <b>' + (["milk","eggs"] == "milk,eggs") + '</b></p>');
document.write('<p><code>[null] == ""</code> is <b>' + ([null] == "") + '</b></p>');
document.write('<p>Under ==, the array becomes its comma-joined string first.</p>');
</script>

<script>
document.write('<p><code>[] === []</code> is <b>' + ([] === []) + '</b></p>');
document.write('<p><code>({}) === ({})</code> is <b>' + (({}) === ({})) + '</b></p>');
var a = []; document.write('<p><code>a === a</code> is <b>' + (a === a) + '</b> (the very same array)</p>');
</script>

<script>
var medals = {}; medals.gold = 1; medals[3] = 1; medals.silver = 1; medals[1] = 1;
document.write('<p>Inserted in order: <code>gold, 3, silver, 1</code>.</p>');
document.write('<p><code>Object.keys(medals)</code> is <b>' + JSON.stringify(Object.keys(medals)) + '</b></p>');
document.write('<p>Integer-like keys sort to the front, ascending; string keys keep insertion order.</p>');
</script>

<script>
var profile = { name: "Ada", avatar: undefined, greet: function () {}, score: NaN, wins: 3 };
document.write('<p>Profile: <code>{ name, avatar: undefined, greet: function, score: NaN, wins }</code></p>');
document.write('<p><code>JSON.stringify(profile)</code> is <b>' + JSON.stringify(profile) + '</b></p>');
document.write('<p>undefined and functions are dropped; NaN becomes null.</p>');
</script>

<script>
var arr = [1, , 3];
document.write('<p><code>[1, , 3].length</code> is <b>' + arr.length + '</b></p>');
var seen = 0; arr.forEach(function () { seen++; });
document.write('<p><code>forEach</code> visited <b>' + seen + '</b> of 3 slots (the hole is skipped)</p>');
var ran = 0; new Array(3).map(function () { ran++; });
document.write('<p><code>new Array(3).map(fn)</code> ran fn <b>' + ran + '</b> times</p>');
</script>

<script>
document.write('<p><code>Array(4).join("\ud83c\udf55")</code> is <b>' + Array(4).join("\ud83c\udf55") + '</b> (three, not four)</p>');
document.write('<p><code>["a", "b", "c"].join(" - ")</code> is <b>' + ["a","b","c"].join(" - ") + '</b></p>');
document.write('<p>join goes between elements, so N elements give N minus 1 separators.</p>');
</script>

<script>
var cache = {};
cache[{ id: 1 }] = "first";
cache[{ id: 2 }] = "second";
document.write('<p>Stored under two different objects. <code>cache[{ id: 1 }]</code> is <b>' + cache[{id:1}] + '</b></p>');
document.write('<p>Both became the key <b>"[object Object]"</b>, so the second overwrote the first.</p>');
document.write('<p><code>Object.keys(cache)</code> is <b>' + JSON.stringify(Object.keys(cache)) + '</b></p>');
</script>

<script>
document.write('<p><code>"\u{1F600}".length</code> is <b>' + "\u{1F600}".length + '</b></p>');
document.write('<p><code>[..."\u{1F600}"].length</code> is <b>' + [..."\u{1F600}"].length + '</b></p>');
document.write('<p>length counts UTF-16 code units; the emoji takes two of them.</p>');
</script>

<script>
document.write('<p><code>"100" < "99"</code> is <b>' + ("100" < "99") + '</b> (compared as text)</p>');
document.write('<p><code>100 < 99</code> is <b>' + (100 < 99) + '</b> (compared as numbers)</p>');
document.write('<p>Strings compare character by character, so "1" sorts before "9".</p>');
</script>

<script>
document.write('<p><code>2 ** 3 ** 2</code> is <b>' + (2 ** 3 ** 2) + '</b></p>');
document.write('<p><code>2 ** (3 ** 2)</code> is <b>' + (2 ** (3 ** 2)) + '</b> (what it means)</p>');
document.write('<p><code>(2 ** 3) ** 2</code> is <b>' + ((2 ** 3) ** 2) + '</b> (what it looks like)</p>');
</script>

<script>
var result = (function () {
  var before = typeof total;   // total is declared just below
  var total = 100;
  return before;
})();
document.write('<p>Reading <code>total</code> before <code>var total = 100</code> gives <b>"' + result + '"</b>, not an error.</p>');
document.write('<p>The declaration hoists to the top of the function; the assignment stays where it is.</p>');
</script>

<script>
document.write('<p><code>typeof document.all</code> is <b>"' + (typeof document.all) + '"</b></p>');
document.write('<p><code>document.all == undefined</code> is <b>' + (document.all == undefined) + '</b></p>');
document.write('<p>Yet it works: <code>document.all.length</code> is <b>' + document.all.length + '</b> elements on this page.</p>');
</script>

<script>
document.write('<p><code>new Date(2020, 11, 25)</code> is <b>' + new Date(2020, 11, 25).toDateString() + '</b> (month 11 is December)</p>');
document.write('<p><code>new Date(2020, 12, 25)</code> is <b>' + new Date(2020, 12, 25).toDateString() + '</b> (month 12 rolled into next year)</p>');
</script>

<script>
document.write('<p><code>Symbol("id") === Symbol("id")</code> is <b>' + (Symbol("id") === Symbol("id")) + '</b></p>');
var s = Symbol("id");
document.write('<p><code>s === s</code> is <b>' + (s === s) + '</b> (the same symbol)</p>');
document.write('<p>The description "id" is just a label; each Symbol() call is unique.</p>');
</script>

<script>
(function () {
  document.write('<p><code>typeof arguments</code> is <b>"' + (typeof arguments) + '"</b></p>');
  document.write('<p><code>arguments.length</code> is <b>' + arguments.length + '</b></p>');
  document.write('<p><code>Array.isArray(arguments)</code> is <b>' + Array.isArray(arguments) + '</b></p>');
})(1, 2, 3);
</script>

<script>
document.write('<p><code>(1, 2, 3)</code> is <b>' + (1, 2, 3) + '</b></p>');
var x = (document.write('<p>The middle expression ran (this line), and...</p>'), 42);
document.write('<p><code>x = (writeThisLine(), 42)</code> gives x = <b>' + x + '</b></p>');
</script>

<script>
function total() {
  return
    42;
}
document.write('<p><code>return</code>, newline, then <code>42</code> gives <b>' + total() + '</b></p>');
document.write('<p>A semicolon is inserted after <code>return</code>, so the <code>42</code> is dead code.</p>');
</script>

<script>
document.write('<p><code>(1).toString(2)</code> is <b>' + (1).toString(2) + '</b></p>');
document.write('<p><code>255..toString(16)</code> is <b>' + 255..toString(16) + '</b></p>');
document.write('<p><code>1.toString(2)</code> is a <b>SyntaxError</b>: the parser reads <code>1.</code> as a decimal point.</p>');
</script>

<script>
document.write('<p><code>void 0 === undefined</code> is <b>' + (void 0 === undefined) + '</b></p>');
document.write('<p><code>void "anything at all"</code> is <b>' + (void "anything at all") + '</b></p>');
document.write('<p>Old engines let you reassign <code>undefined</code>. <code>void 0</code> always returned the real one.</p>');
</script>

<script>
var factorial = function (n) {
  return n <= 1 ? 1 : n * arguments.callee(n - 1);   // the function calls itself with no name
};
document.write('<p><code>factorial(5)</code>, recursing through <code>arguments.callee</code>, is <b>' + factorial(5) + '</b></p>');
document.write('<p>In strict mode that line throws. The fix is a named function expression.</p>');
</script>

<p id="k" style="font:14px Verdana">Click here first, then type:
<b>up up down down left right left right B A</b></p>

<script>
var seq = [38,38,40,40,37,39,37,39,66,65], pos = 0;
document.addEventListener("keydown", function (e) {
  pos = (e.keyCode === seq[pos]) ? pos + 1 : (e.keyCode === seq[0] ? 1 : 0);
  if (pos === seq.length) {
    pos = 0;
    document.getElementById("k").innerHTML =
      "<b style='color:#ff3d8b;font:bold 22px Verdana'>⭐ CHEAT ACTIVATED ⭐</b>";
    document.body.style.transition = "transform 1s";
    document.body.style.transform = "rotate(360deg)";
  }
});
</script>

<script>
var s = Array(16).join('wat' - 1) + ' Batman!';
document.write("<h2 style='font-family:sans-serif'>" + s + "</h2>");
document.write("<p><code>Array(16).join('wat' - 1) + ' Batman!'</code></p>");
document.write("<p><code>'wat' - 1</code> is <b>NaN</b>, joined across fifteen array gaps.</p>");
</script>

<script>
function row(expr, val){ document.write('<p><code>' + expr + '</code> is <b>' + val + '</b></p>'); }
row('+[]', JSON.stringify(+[]));
row('![]', JSON.stringify(![]));
row('!![]', JSON.stringify(!![]));
row('!+[]+!+[]', JSON.stringify(!+[]+!+[]));
row('[][[]]', String([][[]]));
row('(![]+[])[+[]]', JSON.stringify((![]+[])[+[]]));
document.write('<p>Six characters, <code>[ ] ( ) ! +</code>, reach every number, letter and function.</p>');
</script>

<script>
document.write("<p><code>[1, 2, 3] + [4, 5, 6]</code> is <b>" + ([1,2,3] + [4,5,6]) + "</b></p>");
document.write("<p>Plus has no array mode, so each side runs toString and the two comma strings join.</p>");
</script>

<script>
var a = { i: 1, valueOf: function(){ return this.i++; } };
document.write("<p><code>a == 1 && a == 2 && a == 3</code> is <b>" + (a == 1 && a == 2 && a == 3) + "</b></p>");
document.write("<p>Each <code>==</code> calls valueOf, and valueOf hands back 1, then 2, then 3.</p>");
</script>

<script>
document.write('<p><code>parseInt("0x10")</code> is <b>' + parseInt("0x10") + '</b> (the 0x makes it hex)</p>');
document.write('<p><code>parseInt("0x10", 10)</code> is <b>' + parseInt("0x10", 10) + '</b> (base 10 stops at the x)</p>');
document.write('<p><code>parseInt("0xFF")</code> is <b>' + parseInt("0xFF") + '</b></p>');
</script>

<script>
function show(l, v){ document.write('<p><code>' + l + '</code> is <b>' + v + '</b></p>'); }
show('isNaN("")', isNaN(""));
show('isNaN("abc")', isNaN("abc"));
show('isNaN([])', isNaN([]));
show('Number.isNaN("abc")', Number.isNaN("abc"));
</script>

<script>
document.write('<p><code>010</code> is <b>' + 010 + '</b> (a leading zero once meant octal)</p>');
document.write('<p><code>0755</code> is <b>' + 0755 + '</b> (the old file-permission octal)</p>');
document.write('<p>In strict mode <code>010</code> is a <b>SyntaxError</b>: legacy octal literals were banned.</p>');
</script>

<script>
document.write('<p><code>-1 >>> 0</code> is <b>' + (-1 >>> 0) + '</b> (all 32 bits, read unsigned)</p>');
document.write('<p><code>-1 >> 0</code> is <b>' + (-1 >> 0) + '</b> (signed shift keeps the sign)</p>');
document.write('<p><code>4294967295 | 0</code> is <b>' + (4294967295 | 0) + '</b> (the same bits, read signed)</p>');
</script>

<script>
document.write('<p><code>typeof neverDeclared</code> is <b>' + (typeof neverDeclared) + '</b></p>');
try {
  neverDeclared;
  document.write('<p>reading it directly did not throw</p>');
} catch (e) {
  document.write('<p>reading <code>neverDeclared</code> directly throws <b>' + e.name + '</b></p>');
}
document.write('<p>typeof is the one operator that tolerates a name that was never declared.</p>');
</script>

<script>
document.write('<p><code>[] ? "truthy" : "falsy"</code> is <b>' + ([] ? 'truthy' : 'falsy') + '</b></p>');
document.write('<p><code>[] == false</code> is <b>' + ([] == false) + '</b></p>');
document.write('<p>if() asks whether the value is truthy, == turns [] into the number 0. The two rules disagree.</p>');
</script>

<script>
var P = String.fromCodePoint, ZWJ = String.fromCodePoint(0x200D);
var fam = P(0x1F468) + ZWJ + P(0x1F469) + ZWJ + P(0x1F467) + ZWJ + P(0x1F466);
document.write('<p>This renders as one glyph: <b style="font-size:1.7em">' + fam + '</b></p>');
document.write('<p><code>str.length</code> (UTF-16 code units) is <b>' + fam.length + '</b></p>');
document.write('<p><code>[...str].length</code> (code points) is <b>' + [...fam].length + '</b></p>');
document.write('<p>Four person emoji joined by three zero width joiners: eleven code units, one family.</p>');
</script>

<script>
var dash = new Date("2024-01-01");
var slash = new Date("2024/01/01");
document.write('<p><code>new Date("2024-01-01")</code> local: <b>' + dash.toString() + '</b></p>');
document.write('<p><code>new Date("2024/01/01")</code> local: <b>' + slash.toString() + '</b></p>');
document.write('<p>The dashed ISO date is read as UTC midnight. Its <code>.toISOString()</code> is always <b>' + dash.toISOString() + '</b>. The slashed date is read as LOCAL midnight.</p>');
document.write('<p>Gap in your timezone: <b>' + ((slash - dash) / 3600000) + '</b> hours (0 only on UTC).</p>');
</script>

<script>
var d = new Date("spaghetti");
document.write('<p><code>new Date("spaghetti")</code> prints <b>' + String(d) + '</b></p>');
document.write('<p><code>typeof</code> it is <b>' + typeof d + '</b>, <code>instanceof Date</code> is <b>' + (d instanceof Date) + '</b></p>');
document.write('<p>Its timestamp <code>+d</code> is <b>' + (+d) + '</b></p>');
document.write('<p>By value it does not even equal itself: <code>+d === +d</code> is <b>' + (+d === +d) + '</b></p>');
</script>

<table id="t" border="1">
  <tr><td>a row with no tbody in the source</td></tr>
</table>
<script>
var t = document.getElementById('t');
document.write('<p>t.tBodies.length is <b>' + t.tBodies.length +
  '</b>, and the table first child is a &lt;' +
  t.firstElementChild.tagName.toLowerCase() + '&gt;.</p>');
</script>

<p>Named references still resolve with the semicolon left off:</p>
<p style="font-size:1.6em">&copy &reg &amp &lt &gt</p>
<p>The greedy trap. The source <code>&amp;notit;</code> renders as
<b>&notit;</b>, because the parser matches <code>&amp;not</code>
(the not sign) and leaves <code>it;</code> as plain text.</p>

<ul>
  <li>first
  <li>second
  <li>third
</ul>
<script>
document.write('<p>List items parsed: <b>' +
  document.querySelectorAll('ul li').length +
  '</b>. Each &lt;li&gt; closed itself at the next one.</p>');
</script>

<p style="font-size:2.4em; line-height:2.6">
  <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
  and
  <ruby>東京<rt>tokyo</rt></ruby>
</p>

<style>
/* Numbering with no numbers in the markup, CSS2 */
ol.steps { list-style: none; counter-reset: step; padding-left: 0; }
ol.steps > li { counter-increment: step; margin: 2px 0; }
ol.steps > li::before {
  content: "Step " counter(step) ": ";
  font-weight: bold;
}
</style>

<ol class="steps">
  <li>Insert coin.</li>
  <li>Press start.</li>
  <li>Blow into the cartridge.</li>
</ol>

<style>
.tri-up {
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 52px solid #c0392b;
}
.tri-right {
  width: 0; height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 52px solid #2c7d4f;
  margin-top: 18px;
}
</style>

<p>An element with zero width and zero height. Its four borders meet along 45 degree diagonals, so one solid border with its neighbours transparent leaves a triangle.</p>
<div class="tri-up"></div>
<div class="tri-right"></div>

<style>
.toggle-box { position: absolute; left: -9999px; }
.toggle-label {
  display: inline-block; cursor: pointer;
  background: #234a6b; color: #fff; padding: 8px 16px;
}
.toggle-panel {
  max-height: 0; overflow: hidden;
  background: #eef2f7; color: #12233a;
  transition: max-height .3s ease;
}
.toggle-box:checked ~ .toggle-panel { max-height: 200px; padding: 12px; }
</style>

<input type="checkbox" id="t1" class="toggle-box">
<label for="t1" class="toggle-label">Click to toggle</label>
<div class="toggle-panel">
  Hidden until the checkbox is checked. A label flips a hidden checkbox, and the
  sibling combinator reveals this panel. No JavaScript.
</div>

<style>
.nav, .nav ul { list-style: none; margin: 0; padding: 0; }
.nav > li { position: relative; display: inline-block;
            background: #234a6b; color: #fff; padding: 6px 14px; }
.nav ul { position: absolute; left: 0; top: 100%;
          display: none; min-width: 150px; z-index: 5; }
.nav ul li { background: #336789; padding: 6px 14px;
             border-top: 1px solid #234a6b; }
.nav li:hover > ul { display: block; }
</style>

<ul class="nav">
  <li>Home</li>
  <li>Products
    <ul>
      <li>Widgets</li>
      <li>Gadgets</li>
      <li>Gizmos</li>
    </ul>
  </li>
  <li>About</li>
</ul>
<p>Hover "Products". The submenu drops with no script. This was the navigation dropdown before jQuery.</p>

<!DOCTYPE html>
<html>
<head>
<!-- The base keeps the #shot link resolving inside this sandboxed preview.
     You do not need it on your own page, delete this line there. -->
<base href="about:srcdoc">
<style>
.lb { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,.8);
      display: none; align-items: center; justify-content: center; }
.lb:target { display: flex; }
.lb .card { background: #fff; color: #12233a; padding: 28px; max-width: 300px; }
.lb .close { display: inline-block; margin-top: 12px; color: #c0392b; }
</style>
</head>
<body>
<p><a href="#shot">Open the lightbox</a></p>
<div class="lb" id="shot">
  <div class="card">
    A modal with no JavaScript. The link sets the URL fragment to this box's id,
    :target matches, and the box appears.
    <a class="close" href="#">Close</a>
  </div>
</div>
</body>
</html>

<style>
.press {
  background: #d3d7de; color: #4a4f57;
  font: bold 2.2rem/1.4 Arial, sans-serif;
  text-align: center; padding: 22px;
  text-shadow: 0 1px 0 #ffffff;
}
.emboss {
  background: #2b2f36; color: #2f333b;
  font: bold 2.2rem/1.4 Arial, sans-serif;
  text-align: center; padding: 22px;
  text-shadow: 0 -1px 0 rgba(255,255,255,.45);
}
</style>

<p class="press">ENGRAVED</p>
<p class="emboss">EMBOSSED</p>

<style>
.dropcap::first-letter {
  float: left;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.4em; line-height: .8;
  padding: 4px 8px 0 0; color: #a33;
  font-weight: bold;
}
</style>

<p class="dropcap">Once upon a time the first letter of a chapter was drawn large
and set into the paragraph. The ::first-letter pseudo-element does it with no
extra markup, styling a character that is not an element. It has been in CSS
since the first version.</p>

<script>
// Open the browser DevTools console (F12) to see the styled line.
console.log(
  "%cxbawx.com",
  "color:#fff;background:#c0f;font-size:40px;padding:6px 14px;border-radius:6px;font-family:monospace"
);
document.write("<p>Open your DevTools console (F12). This page logged a 40px pink banner:</p>");
document.write("<pre>console.log(\"%cxbawx.com\", \"color:#fff;background:#c0f;font-size:40px\")</pre>");
document.write("<p>The <code>%c</code> token reads the NEXT argument as a CSS string and paints everything after it. Two <code>%c</code> tokens style two runs.</p>");
</script>