应该画一个棋盘
1. Table + 背景
下棋过程
1. 要能点击(td)的时候,表格上有棋子出现
2. 在点击td的时候,要能够正确判断当前是下白棋还是黑棋.
3. 在点击td下棋的时候,要能判断当前td是否为空.
技术分析
1. DOM事件 onclick
2. Js操作DOM,及css
3. For循环
4.运用 If/else
5. Td对象加一个属性,标签是否有棋子
分析开发步骤
1. 首先画一个棋盘
2.1. 点击td的时候,击发一个函数,该函数只负责alert();
2.2 . 在2.1的基础上, 改进函数,使不alert,而是改变td的css ,style.background ,为黑棋
2.3. 在2.2 的基础上, 再改进,如果放了黑旗, 设一个变量,把下一步要下棋的颜色记录下来.
2.4. 在2.3 再判断,是否已经下过棋了.
五子棋的代码展示：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>五子棋</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript"> //1.用table先创建背景 //2.用当每一个单元格执行onclick事件的时候，给每一个td单元格加上棋子的背景 //2.1:用for循环把onclick当成一个对象,即td对象的一个属性给每个td加上onclick. function init(){ var tds=document.getElementsByTagName('td'); //获取单元格数组 for (var i=0,leng=tds.length;i<leng;i++){ //leng=tds.leng 求得这个数组的长度，即总的单元格的个数(255个) tds[i].onclick=xia;//把onclick看成单元格的一个属性，然后给这个属性赋值(注意赋的这个值是一个函数，只有函数名，没有后面的括号) tds[i].qi=false; //重新定义一个单元格的属性，用来判断是否是棋子存在。开始时初始为false. } } var curr='black'; //定义一个全局变量接收黑棋背景 function xia(){ if(this.qi){ alert('已经有棋子了'); return; } this.style.background='url(images/'+curr+'.gif) no-repeat'; //this 表示这个单元格，即哪个单元格调用这个函数就是哪个单元格 this.qi=true; //把这单元格的qi属性改为ture,表示这个onlick调用的这个单元格已经有棋子存在 curr= curr=='black'?'white':'black'; //如果单击了这个单元格，用三元运算符判断，如果是黑棋背景那么就变为白棋背景 } </script> <style type="text/css"> table,tr,td,div{ padding:0; margin:0; } #contaiter { 534px; height:533px; margin:0 auto; background:url(images/backgroup.gif) no-repeat; padding-top:7px; padding-left:7px; } table{ border-collapse:collapse; } td{ 35px; height:35px; } </style> </head> <body onload="init();"> <div id="contaiter"> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </body> </html>
注册表单验证
代码展示如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 3 <head> 4 <title>注册表的js验证</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 <script type="text/javascript"> 9 function check(){ 10 if (document.getElementsByName('xueli')[0].value==''){ 11 alert('请选择学历'); 12 return false; 13 } 14 if(document.getElementsByName('user')[0].value.length<2 || document.getElementsByName('user')[0].value.length>10){ 15 alert('用户名必须在2到10个字符之间'); 16 document.getElementsByName('user')[0].focus(); 17 return false; 18 } 19 var password2 = document.getElementsByName('password2')[0]; 20 var quer = document.getElementsByName('quer')[0]; 21 if(password2.value.length<6 || password2.value.length>20){ 22 alert('密码必须在6到18位之间！'); 23 password2.focus(); 24 return false; 25 } 26 if(password2.value.length != quer.value.length){ 27 alert('两次输入的密码不一致！\n请重新输入！'); 28 quer.focus(); 29 return false; 30 } 31 32 for(var i=0,res=false,sex=document.getElementsByName('sex'),leng=sex.length;i<leng;i++){ 33 res = sex[i].checked || res; //通过循环遍历sex里的每一个checked,如果有一个为真则返回true; 34 } 35 if(res==false){ 36 alert('请选择你的性别！'); 37 return false; 38 } 39 for(var i=0,res=0,hobby=document.getElementsByName('hobby'),leng=hobby.length;i<leng;i++){ 40 if(hobby[i].checked) 41 res+=1; 42 } 43 if(res<2){ 44 alert('兴趣爱好至少选择两项！'); 45 return false; 46 } 47 48 } 49 </script> 50 51 </head> 52 <body> 53 <form action="js.html" method="get"> 54 <p> 55 <select name="xueli"> 56 <option value="">请选择学历</option> 57 <option value="小学">小学</option> 58 <option value="初中">初中</option> 59 <option value="大学">大学</option> 60 </select> 61 </p> 62 63 <p>用户名：<input type="text" name="user"/></p> 64 <p>密码框：<input type="password" name="password2" /></p> 65 <p>确认密码：<input type="password" name="quer" /></p> 66 <p>性别：</p> 67 男：<input type="radio" name="sex" /> 68 女：<input type="radio" name="sex" /> 69 春哥：<input type="radio" name="sex" /> 70 71 <p>爱好：</p> 72 <p> 73 篮球：<input type="checkbox" name="hobby" value="篮球" /> 74 艺术：<input type="checkbox" name="hobby" value="艺术" /> 75 音乐：<input type="checkbox" name="hobby" value="音乐" /> 76 </p> 77 <p>上传头像：<input type="file" name="tou" /></p> 78 79 <p><textarea name="nose" cols="30" rows="10"></textarea></p> 80 81 <p> 82 <input type="submit" value="确认注册" onclick="return check();" /> 83 <input type="reset" value="提交填写" /> 84 85 </p> 86 </form> 87 </body> 88 </html>