五子棋的开发和js表单验证

应该画一个棋盘

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 {
width:534px;
height:533px;
margin:0 auto;
background:url(images/backgroup.gif) no-repeat;
padding-top:7px;
padding-left:7px;

}
 table{
border-collapse:collapse;
}
 td{
    width: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>

posted @ 2012-11-11 23:15 启红阅读(282) 评论(0) 编辑收藏举报

刷新页面返回顶部

启红

从未来有过的坚持……