zoukankan      html  css  js  c++  java
  • JS练习

    用JS实现如下效果

    代码1(用table标签实现):

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    
        <style type="text/css">
            
            .aa{background-color: pink;  50px; height: 50px; float: left; }
            .bb{clear: left;}
        </style>
    </head>
    
    <body>
    
    <script type="text/javascript">
    
    var count=1;
    document.write("<table>");
    for(var j=1;j<=6;j++){
        document.write("<tr>");
        for(var i=1;i<=6;i++){
            document.write("<td>");
            document.write("<div class=aa>"+count+"</div>");
            count++;
            document.write("</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
    
    </script>
    
    </body>
    
    </html>

    代码2(用div标签实现):

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    
        <style type="text/css">
            
            .aa{background-color: pink;  50px; height: 50px; float: left; margin-left: 5px; margin-top: 5px;}
            .bb{clear: left;}
        </style>
    </head>
    
    <body>
    
    <script type="text/javascript">
    
    var count=1;
    for(var j=1;j<=6;j++){
        for(var i=1;i<=6;i++){
            document.write("<div class=aa>"+count+"</div>");
            count++;
        }
        document.write("<br class=bb>");
    }
    
    
    </script>
    
    </body>
    
    </html>

    实现如下效果(99乘法表):

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    
        <style type="text/css">
            
            .aa{background-color: pink;  70px; height: 25px; float: left; margin-left: 5px; margin-top: 5px; text-align: center;}
            .bb{clear: left;}
        </style>
    </head>
    
    <body>
    
    <script type="text/javascript">
    
    var count=1;
    for(var j=1;j<=9;j++){
        for(var i=1;i<=j;i++){
            document.write("<div class=aa>"+i+"*"+j+"="+i*j+"</div>");
            count++;
        }
        document.write("<br class=bb>");
    }
    
    
    </script>
    
    </body>
    
    </html>
  • 相关阅读:
    Java/android下哈希sha1和MD5的实现
    ANDROID SOCKET 开发
    UML补充
    TCP协议中的三次握手和四次挥手(转)
    uva 658 最短路
    uva 11280 最短路
    uva 10246 最短路
    uva 11747,kruskal 并查集
    uva 544 dijkstra
    uva 1395 瓶颈树
  • 原文地址:https://www.cnblogs.com/FrankLiner/p/7603519.html
Copyright © 2011-2022 走看看