原生原生js实现五子棋游戏实现五子棋游戏
本文实例为大家分享了js实现五子棋游戏的具体代码，供大家参考，具体内容如下
html:
<body>
<h2>五子棋游戏</h2>
<div id="box">
<div id="box01"></div>
<div id="box02">haha</div>
</div>
</body>
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/*overflow: hidden;*/
margin-top: 10px;
text-align: center;
background-color: #C7C7C7;
}
#box{
position: relative;
border: 1px solid;
margin: 20px auto;
width: 546px;
height: 546px;
background-color: #C7C7C7;
}
#box .squre{
width: 40px;
height: 40px;
border: 1px solid;
float: left;
}
#box01 .squre:hover{
background-color: pink;
}
#box01{
position: absolute;
/*border: 1px solid;*/
margin: 0 auto;
width: 588px;
height: 588px;
/*background-color: pink;*/
/*opacity: 0.5;*/
top: -20px;
left: -20px;
}
#box01 .qz{
width: 30px;
height: 30px;
border: 1px solid #C7C7C7;
float: left;
border-radius: 50%;
margin: 5px;
}
#box01 .qz:hover{
background-color: pink;
}
#box02{
position: absolute;
line-height: 546px;
font-size: 50px;
color: black;
width: 100%;
background-color: pink;
display: none;
opacity: 0.6;
}
</style>
资源评论
weixin_38650629
- 粉丝: 4
- 资源: 897
最新资源
- java毕设项目之ssm基于Java的共享客栈管理系统+jsp(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于java的健身房管理系统的设计与实现+vue(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于java和mysql的多角色学生管理系统+jsp(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于Java的图书管理系统+jsp(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于java的少儿编程网上报名系统+vue(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于Java语言校园快递代取系统的设计与实现+jsp(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于jsp的精品酒销售管理系统+jsp(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于JSP的乡镇自来水收费系统+jsp(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于SSM的高校共享单车管理系统的设计与实现+vue(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于ssm的人才招聘网站+jsp(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于SSM框架的购物商城系统+jsp(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于SSM框架的个人博客网站的设计与实现+vue(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于ssm的新能源汽车在线租赁管理系统+vue(完整前后端+说明文档+mysql+lw).zip
- 小目标尺寸下的地表信息图像分类数据集【已标注，约30,000张数据】
- java毕设项目之ssm家政服务网站设计+jsp(完整前后端+说明文档+mysql+lw).zip
- java毕设项目之ssm基于Web的智慧城市实验室主页系统设计与实现+vue(完整前后端+说明文档+mysql+lw).zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
