js,h5,css的简单综合应用

最新推荐文章于 2022-07-09 11:37:28 发布

Rabbit_Sir

最新推荐文章于 2022-07-09 11:37:28 发布

阅读量245

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_45062721/article/details/98845231

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

国际象棋棋盘

我们在这里做一个简单的应用，我们将之前学过的JavaScript，HTML5，CSS进行简单应用。
首先，我们知道，国际象棋棋盘是由8*8 64个格子组成的。所以我们要用表格画出64个方块。

<!DOCTYPE html>
<html>
 	<head>
  	<meta charset="UTF-8">
  	<title></title>
  		<style>
   			table{
   				 border: 1px solid #000000;/*边框大小和颜色*/
    				border-collapse: collapse;/*边框样式*/
   				}
  			 td{
    				border: 1px solid #000000;
  			   }
  		</style>
 	</head>
 	<body>
  		<script type="text/javascript">
  		 document.write("<table cellpadding='0' width='200' height='200'>");
   		for(var i=0;i<8;i++){
    			document.write("<tr>");
   			 for (var j=0;j<8;j++) {
     			document.write("<td>");
     			document.write("</td>");
   			 }
    			document.write("</tr>")
   		}
   		document.write("</table>")
  	</script>
	 </body>
</html>

在这里插入图片描述
因为棋盘是黑白相间的。
所以我们用js语句控制

for(var i=0;i<8;i++){
    document.write("<tr>");
    if(i%2==0){
      for (var j=0;j<8;j++) {
       if(j%2==0){
       document.write("<td bgcolor='#FFFFFF'>");
       document.write("</td>");
      }else{
       document.write("<td bgcolor='#000000'>");
       document.write("</td>");
       }
      } 
    }else
      for (var j=0;j<8;j++) {
       if(j%2==0){
       document.write("<td bgcolor='#000000'>");
       document.write("</td>");
      }else{
       document.write("<td bgcolor='#FFFFFF'>");
       document.write("</td>");
       }
      } 
    document.write("</tr>")
  }

在这里插入图片描述

Rabbit_Sir

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js,h5,css的简单综合应用

国际象棋棋盘我们在这里做一个简单的应用，我们将之前学过的JavaScript，HTML5，CSS进行简单应用。首先，我们知道，国际象棋棋盘是由8*8 64个格子组成的。所以我们要用表格画出64个方块。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&gt...
复制链接

扫一扫