<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> JavaScript-based go interface </title> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> function $ (s) {return document. getelementbyid (s)} <br/> // global variable <br/> var step = 0; <br/> var black = 1; <br/> var ball = "●"; <br/> var arr = "abcdefghjklmnopqrst ". split (""); <br/> // <br/> window. onload = function () {<br/> Init (); <br/> Adde (); // addevent <br/>}< br/> function Init () {<br/> var r = ''; <br/> // draw a checkerboard line <br/> for (VAR I = 0; I <324; I ++) R + = '<div> </div>'; // 19*19 intersections, each of which uses a div <br/> $ ("line "). innerhtml = R; <Br/> r = ''; <br/> // draw a child Div <br/> for (VAR I = 0; I <19; I ++) {<br/> for (var j = 0; j <19; j ++) {<br/> r + = '<Div id = "' + arr [J] + (19-i) + '"> & nbsp; </div> '; <br/>}< br/> $ ("Grid "). innerhtml = r; <br/> drawstar (); <br/>}< br/> // draw nine stars <br/> function drawstar () {<br/> var S = "<div> O </div>"; <br/> $("D16 "). innerhtml = s; <br/> $("D10 "). innerhtml = s; <br/> $("D4 "). innerhtml = s; <br/> $("k16 "). innerhtml = s; <br/> $ ("K10" ). Innerhtml = s; <br/> $("K4 "). innerhtml = s; <br/> $("q16 "). innerhtml = s; <br/> $("Q10 "). innerhtml = s; <br/> $("Q4 "). innerhtml = s; <br/>}< br/> // register and click an event for each subpoint. <br/> function Adde () {<br/> var o = $ ("Grid "). childnodes; <br/> for (VAR I = 0; I <O. length; I ++) {<br/> O [I]. onclick = function () {<br/> If (this. innerhtml = ball) return; <br/> This. innerhtml = ball; <br/> This. style. color = black? "#000": "white"; <br/> black =! Black; <br/> step ++; <br/> cacu (this ); <br/>}< br/> function cacu (o) {<br/> // alert (O. ID); <br/>}< br/> // --> </MCE: SCRIPT> <br/> <MCE: style type = "text/CSS"> <! -- <Br/> body {margin: 0; padding: 0; Background: white;} <br/>/* outermost edge line */<br/> # go {position: absolute; margin: 50px; width: 640px; Height: 640px; Border: solid 5px green; Background-color: # a0a0a0 ;} <br/>/**/<br/> # Line {position: absolute; width: 540px; left: 50px; top: 50px; Border: solid 2px #000 ;} <br/>/* The checker is composed of 19*19 divs with edges. Therefore, the place where the divs intersect is a double line, the side is a single line <br/> 28*18 = 560-56 = 504 is the DIV width, 18*2 = 36 is the width, the total width is 540 <br/> */<br/> # Line Div {float: Left; width: 28px; Height: 28px; Border: solid 1px #000; color: white; Background-color: # fdcb6b} <br/>/* use a hidden DIV at the intersection position. The width and height of the DIV at the intersection are 30, and the distance between the DIV and the intersection is 15, then subtract line width 2 <br/> that is, 50-(15-2) <br/> */<br/> # grid {position: absolute; width: 590px; left: 37px; top: 37px; }< br/>/* it seems that the width here is not very good if it is greater than line */<br/> # grid Div {float: Left; width: 30px; Height: 30px; line-Height: 30px; text-align: center; color: #000; cursor: pointer; font-size: 30px ;} </P> <p> --> </MCE: style> <style type = "text/CSS" mce_bogus = "1"> body {margin: 0; padding: 0; background: white ;}< br/>/* outermost edge line */<br/> # go {position: absolute; margin: 50px; width: 640px; Height: 640px; border: solid 5px green; Background-color: # a0a0a0 ;}< br/>/**/<br/> # Line {position: absolute; width: 540px; left: 50px; top: 50px; Border: solid 2px #000 ;}< br/>/* The board is composed of 19*19 divs with edges, so the place where the DIV overlaps is a double line, and the side is a single line <br/> 28*18 = 560-56 = 504 is the DIV width, 18*2 = 36 is the width, the total width is 540 <br/> */<br/> # Line Div {float: Left; width: 28px; Height: 28px; Border: solid 1px #000; color: white; Background-color: # fdcb6b} <br/>/* use a hidden DIV at the intersection position. The width and height of the DIV at the intersection are 30, and the distance between the DIV and the intersection is 15, then subtract line width 2 <br/> that is, 50-(15-2) <br/> */<br/> # grid {position: absolute; width: 590px; left: 37px; top: 37px; }< br/>/* it seems that the width here is not very good if it is greater than line */<br/> # grid Div {float: Left; width: 30px; Height: 30px; line-Height: 30px; text-align: center; color: #000; cursor: pointer; font-size: 30px ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "go"> <br/> <div id = "line"> </div> <br/> <Div id = "Grid"> </div> <br/> </body> <br/> </ptml> <br/>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
