脚本说明:
第一步:把如下代码加入＜head＞区域中

＜script＞
function ShowMenu(bMenu) {
document.all.idFinder.style.display = (bMenu) ? "none" : "block"
document.all.idMenu.style.display = (bMenu) ? "block" : "none"
idML.className = (bMenu) ? "cOn" : "cOff"
idRL.className = (bMenu) ? "cOff" : "cOn"
return false
}
＜/script＞
＜style＞
＜!--
A.cOn {text-decoration:none;font-weight:bolder}
#article {font: 12pt Verdana, geneva, arial, sans-serif; background: white; color: black; padding: 10pt 15pt 0 5pt}
#article P.start {text-indent: 0pt}
#article P {margin-top:0pt;font-size:10pt;text-indent:12pt}
#article #author {margin-bottom:5pt;text-indent:0pt;font-style: italic}
#pageList P {padding-top:10pt}
#article H3 {font-weight:bold}
#article DL, UL, OL {font-size: 10pt}
--＞
＜/style＞
＜script＞
＜!--
function addList(url,desc) {
if ((navigator.appName=="Netscape") || (parseInt(navigator.appVersion)＞=4)) {
var w=window.open("","_IDHTML_LIST_","top=0,left=0,width=475,height=150,history=no,menubar=no,status=no,resizable=no")
var d=w.document
if (!w._init) {
d.open()
d.write("＜TITLE＞Loading...＜/TITLE＞＜EM＞Loading...＜/EM＞")
d.close()
d.location.replace("/assist/listing.asp?url="+escape(url)+"&desc="+escape(desc))
w.opener=self
window.status="Personal Assistant (Adding): " + desc
} else {
window.status=w.addOption(url,desc)
w.focus()
}
}
else
alert("Your browser does not support the personal assistant.")
return false
}
// --＞
＜/script＞

＜style＞
#board {font-family: arial}
.dot {position: absolute; width: 5px; height: 5px; font-size: 0pt; background: black}
#line {position: absolute; font-size: 0pt; height: 5px}
.p1 {position: absolute; font-size: 0pt;background: navy}
.p2 {position: absolute; font-size: 0pt; background: red}
.p1B {position: absolute; font-size: 8pt; color: navy;text-align: center; font-weight: bold}
.p2B {position: absolute; font-size: 8pt; color: red; text-align: center; font-weight: bold}
＜/style＞
＜style type="text/css"＞
＜!--
body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: none }
A:hover { COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active { font: 9pt "宋体"; cursor: hand; color: #FF0033 }

--＞
＜/style＞
＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞
＜SCRIPT LANGUAGE="JavaScript"＞
＜!-- Begin
var timerRunning = false;
var timezone = "Greenwich Mean Time";
var adjust = 0;

function timeCheck(tzone, diff) {
if (timerRunning) {
clearTimeout(updatetime);
timerRunning = false; }
gmtOffset=eval(diff+adjust);
timezone = tzone;
checkDateTime();
}

function checkDateTime () {
var today = new Date();
var year = today.getYear() + 1900;
var month = today.getMonth()+1;
var date = today.getDate();
var day = today.getDay();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();

var lastSat = date - (day+1);
while (lastSat ＜ 32) lastSat+=7;
if (lastSat ＞ 31) lastSat+=-7;
var firstSat = date - (day+1);
while (firstSat ＞ 0) firstSat+=-7;
if (firstSat ＜ 1) firstSat+=7;
if ((((month == 4) && (date ＞= firstSat)) || month ＞ 4) &&
(month ＜ 11 || ((month == 10) && day ＜= lastSat))) adjust += 60;
yourOffset = (new Date()).getTimezoneOffset();
yourOffset = yourOffset + adjust;

var xx = navigator.appName
var xy = navigator.appVersion;
xy = xy.substring(0,1);
if ((xy == 4) && (xx == "Netscape")) yourOffset = yourOffset+adjust;
if ((((month == 4) && (date ＞ 20)) || month ＞ 4) && (month ＜ 11 || ((month == 10) &&
day ＜ 30))) adjust -= 60;

ourDifference = eval(gmtOffset - yourOffset);
var half = eval(ourDifference % 60);
ourDifference = Math.round(ourDifference / 60);
hour = eval(hour - ourDifference);
var m = new Array("",
"Jan","Feb","Mar",
"Apr","May","Jun",
"Jul","Aug","Sept",
"Oct","Nov","Dec");
var leap = eval(year % 4);

if ((half == -30) || (half == 30)) minute += 30;
if (minute ＞ 59) minute -= 60, hour++;
if (minute ＜ 0) minute += 60, hour--;
if (hour ＞ 23) hour -= 24, date += 1;
if (((month == 4) || (month == 6) ||
(month == 9) || (month == 11)) && (date==31)) date = 1, month ++;
if (((month == 2) && (date ＞ 28)) && (leap != 0)) date = 1, month ++;
if ((month == 2) && (date ＞ 29)) date = 1, month++;
if (hour ＜ 0) hour += 24, date --;
if ((date == 32) && (month == 12)) month = m[1], date = 1, year++;
if (date == 32) date = 1, month++;
if ((date ＜ 1) && (month == 1)) month= m[12], date = 31, year--;
if (date ＜ 1) date = 31, month --;
if (((month == 4) || (month == 6) ||
(month== 9) || (month == 11)) && (date == 31)) date = 30;
if ((month == 2) && (date ＞ 28)) date = 29;
if (((month == 2) && (date ＞ 28)) && (leap != 0)) date=28;
for (i=1; i＜13; i++) {
if (month == i) {
month = m[i]; break;
}
}

var dateTime = hour;
dateTime = ((dateTime ＜ 10) ? "0":"") + dateTime;
dateTime = " " + dateTime;
dateTime += ((minute ＜ 10) ? ":0" : ":") + minute;
dateTime += ((second ＜ 10) ? ":0" : ":") + second;
dateTime += (hour ＞= 12) ? " PM, " : " AM, ";
dateTime += month + " " + date + ", " + year;

document.clock.zonetime.value = dateTime;
document.clock.zonename.value = timezone;
updatetime=setTimeout("checkDateTime()", 900);
timerRunning = true;
}
// End --＞
＜/SCRIPT＞

第二步:把如下代码加入＜body＞区
＜table CELLPADDING="0" CELLSPACING="0" BORDER="0" width="509"＞
＜tr＞
＜td WIDTH="10"＞＜/td＞
＜td valign="top" WIDTH="499" ID="article"＞＜p class="start" STYLE="text-align: left"＞＜font
size="+2" style="font-weight:bold;font-size: 14pt"＞＜b＞看谁围的框子多？＜/b＞＜/font＞＜/p＞
＜p＞这是一个双人游戏，蓝色的先行，看谁围的框子多，谁就赢。＜/p＞
＜p STYLE="margin-top: 5pt"＞＜script＞
/* DHTML Dots is copyright 1998 insideDHTML.com, LLC. All rights reserved.
DHTML Dots cannot be reproduced in any manner without prior consent from insideDHTML.com */

var scale= 25
var size = 5

var totalSize = ((size+1)*scale) + 6
var cache = new Object()
var move=0,point=0
var player = true

function initCache() {
cache.x = 0
cache.y = 0
cache.red = 0
cache.navy = 0
move=0,point=0
}

function updateScore() {
document.all.red.innerText = cache.red
document.all.navy.innerText = cache.navy
if ((cache.red+cache.navy)==((size-1)*(size-1))) {
board.onclick = null
document.all.message.innerText = "Game Over!"
}

}

function fillPos(x,y) {
document.all.board.insertAdjacentHTML("beforeEnd","＜DIV class=" + (player ? "p1B" : "p2B") + " ID=\"point"+point+"\"＞" + (player ? "N" : "R") + "＜/DIV＞")
var el = document.all["point"+point].style
el.pixelTop = (y*scale)+5
el.pixelLeft = (x*scale)+5
el.pixelWidth = scale - 5
el.pixelHeight = scale - 5

}

function checkBoard(x,y,dir, player) {
var piece=0
if ("vertical"==dir) {
if ((x==size) || (x＞1)) {
var bPos = boardArray[x-1][y]
var nextV = boardArray[x-1][y+1]
if ((bPos["vertical"]) && (bPos["horizontal"]) && (nextV["horizontal"])) {
point++
piece++
fillPos(x-1,y)
}
}
if ((x==1) || (x＜size)) {
var nextV = boardArray[x+1][y]
var nextH = boardArray[x][y+1]
if ((nextV["vertical"]) && (nextH["horizontal"]) && (boardArray[x][y]["horizontal"])) {
point++
piece++
fillPos(x,y)
}
}
}
else {
if ((y==size) || (y＞1)) {
var nextV = boardArray[x+1][y-1]
var bPos = boardArray[x][y-1]
if ((bPos["vertical"]) && (bPos["horizontal"]) && (nextV["vertical"])) {
point++
piece++
fillPos(x,y-1)
}
}
if ((y==1) || (y＜size)) {
var nextV = boardArray[x+1][y]
var nextH = boardArray[x][y+1]
if ((nextV["vertical"]) && (nextH["horizontal"]) && (boardArray[x][y]["vertical"])) {
point++
piece++
fillPos(x,y)
}
}
}
if (piece＞0) {
if (player)
cache.navy+=piece
else
cache.red+=piece
document.all.message.innerText = "Score! Go Again."
updateScore()
return player
}
else
return !player

}

function doMouseMove() {
if (event.srcElement.className!="dot") {
var x = Math.floor(event.offsetX / scale)
var y = Math.floor(event.offsetY / scale)
var dirX = (event.offsetX % scale)
var dirY = (event.offsetY % scale)
if ((x＜size+1) && (y＜size+1) && (y＞0) && (x＞0)) {
if (dirX＞=dirY) {
if (x＜size) {
line.style.pixelHeight = 5
line.style.pixelWidth = scale - 5
line.style.pixelTop = (y * scale)
line.style.pixelLeft = (x * scale) + 5
cache.direction = "horizontal"
}
} else
{
if (y＜size) {
line.style.pixelWidth = 5
line.style.pixelHeight = scale - 5
line.style.pixelTop = (y * scale) + 5
line.style.pixelLeft = x * scale
cache.direction = "vertical"
}
}
cache.x = x
cache.y = y
}
}

}

function doClick() {

if (cache.x==0) return
if (boardArray[cache.x][cache.y][cache.direction])
document.all.message.innerText="That spot is taken! Choose again"
else {
document.all.board.insertAdjacentHTML("beforeEnd","＜DIV class=" + (player ? "p1" : "p2") + " ID=move"+move+"＞＜/DIV＞")
var el = document.all["move"+move]
el.style.top = line.style.top
el.style.left = line.style.left
el.style.width = line.style.width
el.style.height = line.style.height
boardArray[cache.x][cache.y][cache.direction]=true
var nextPlayer = checkBoard(cache.x,cache.y,cache.direction, player)
if (nextPlayer!=player) {
player = nextPlayer
if (player) {
document.all.message.innerText = "Navy players turn"
line.style.border = "1px navy solid"
}
else {
document.all.message.innerText = "Red players turn"
line.style.border = "1px red solid"
}
}
}

move++
}

function buildDiv(x,y, scale) {
return ("＜DIV CLASS=dot STYLE=\"top:" + (x*scale) + "; left: " + (y*scale) + "\"＞＜/DIV＞")
}

var boardArray = new Object

function buildBoard() {
initCache()
board = ("＜DIV ID=line STYLE=\"border: 1px navy solid; width: 0; height: 0\"＞＜/DIV＞")
boardArray = new Object()
for (var x=1; x ＜ size+1; x++) {
boardArray[x] = new Object()
for (var y=1; y ＜ size+1; y++) {
boardArray[x][y] = new Object
boardArray[x][y]["vertical"] = false
boardArray[x][y]["horizontal"] = false
board+=(buildDiv(x,y, scale))
}
}

return board
}

function createGame() {
size=parseInt(document.all.setSize.value)
if (size＞12)
size=12
if (size＜3)
size=3
document.all.setSize.value = size
document.all.board.innerHTML = buildBoard()
document.all.board.onclick = doClick
totalSize = ((size+1)*scale) + 6
document.all.board.style.pixelWidth = totalSize
document.all.board.style.pixelHeight = totalSize
document.all.message.innerText = "Navy player goes first. Good Luck!"
updateScore()
}
document.write("＜DIV ID=board STYLE=\"position: relative; height: "+ totalSize + "; width:" + totalSize + "; border: 1px black solid\"＞" + buildBoard() + "＜/DIV＞")
document.all.board.onmousemove = doMouseMove
document.all.board.onclick = doClick

＜/script＞ ＜/p＞
＜div STYLE="margin-left: 10pt; margin-top: 5pt"＞＜p class="start" ID="message"＞Navy player
goes first. Good Luck!＜/p＞
＜dd＞＜br＞
＜table border="1" width="100"＞
＜tr＞
＜td style="color: red"＞＜b＞Red＜/b＞＜/td＞
＜td ID="red"＞0＜/td＞
＜/tr＞
＜tr＞
＜td style="color: navy"＞＜b＞Navy＜/b＞＜/td＞
＜td ID="navy"＞0＜/td＞
＜/tr＞
＜/table＞
＜p＞＜br＞
＜/p＞
＜table width="200"＞
＜tr＞
＜td＞游戏大小: ＜/td＞
＜td＞＜input TYPE="Text" VALUE="5" ID="setSize" SIZE="2"＞＜/td＞
＜/tr＞
＜tr＞
＜td COLSPAN="2" align="center"＞＜input TYPE="button" ONCLICK="createGame()"
VALUE="New Game"＞＜/td＞
＜/tr＞
＜/table＞ ＜p CLASS="copyright"＞　＜/p＞
＜/dd＞
＜/div＞＜/td＞
＜/tr＞
＜/table＞