Javascript复习第七天简陋的五子棋

最新推荐文章于 2024-04-18 17:52:13 发布

qq_28629495

最新推荐文章于 2024-04-18 17:52:13 发布

阅读量363

点赞数

分类专栏： Javascript/Jquery 文章标签： javascript 五子棋

本文链接：https://blog.csdn.net/qq_28629495/article/details/51442915

版权

Javascript/Jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这里写图片描述

尚未实现，根据td的四个角触发onclick事件，定位div到相应的位置，这只是个五子棋的思路，日后再来实现吧~：
这里写图片描述

代码区域：

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>

    <style>
        table{

            border-collapse: collapse;
            table-layout: fixed;        
        }
        td{
            border: 2px solid lightgrey;
            word-break : break-all;
            width:60px;
            height:60px;
        }
        .demo1{
            width:40px;
            height:40px;
            border-radius: 100%;
            background:black;
            border:2px solid white;             
            display: inline;
            position: relative;
            float:right;
            top:35px;
            left:20px;
        }

        .demo2{
            width:40px;
            height:40px;
            border-radius: 100%;
            background:white;
            border:2px solid black;             
            display: inline;
            position: relative;
            float:right;
            top:35px;
            left:20px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <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>
        </tr>
        <tr>
            <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>
        </tr>
        <tr>
            <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>
        </tr>
        <tr>
            <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>
        </tr>
        <tr>
            <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>
        </tr>
    </table>

    <h2>思路一/动态创建节点/定位添加棋子位置：</h2>
        <p>1.通过event target为table->td的onclick事件赋予方法.</p>
        <p>1-1.可以取消当前td绑定的onclick事件<p>
        <p>1-2.或者判断当前td是否有子元素</p>
        <p>1-3.或者判断当前td下的div节点的长度</p>
        <p>总之，是为了让td的onclick事件只执行一次</p>
        <p>2.绘制div用于显示圆形图案</p>
        <p>3.给td的onclick事件创建dom节点，添加子元素(div)</p>
        <p>4.调整div的显示位置(定位)</p>


    <h2>思路二/全局创建dom节点,根据用户触发onclick事件渲染棋子</h2>  
    <script>
        var i = 0;
        document.getElementsByTagName('table')[0].onclick = function(ev){
            ev = ev || event;//兼容IE
            var temp1 = ev.target || ev.srcElement//兼容IE

            //如果当前td内包含div则直接return，不再生成棋子
            if (temp1.getElementsByTagName("div").length>0) {
                return;
            }
            //判断当前节点是否为td
            if(temp1.nodeName.toUpperCase() =="TD"){    
                var temp = document.createElement('div');
                if(i%2==0){
                    temp.className="demo1";
                }else{
                    temp.className="demo2";
                }
                console.log(temp.style);
                temp2 = ev.target.appendChild(temp);//div节点
                i++;
            }

        };
    </script>
</body>
</html>

qq_28629495

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript复习第七天简陋的五子棋

尚未实现，根据td的四个角触发onclick事件，定位div到相应的位置，这只是个五子棋的思路，日后再来实现吧~：代码区域：<!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.
复制链接

扫一扫