当前位置:编程学习 > JS >>

jquery 九九乘法表代码

$(document).ready(function(){    
  $("<div>").data('RowNum',9).css('margin','10px')
            .appendTo(document.body)
            .bind('Rows',function(){            
              $(this).parent().find("div:lt("+ ($(this).data('RowNum')) +")").eq(0)
                                         .css('margin',10 + $(this).data('RowNum')*2 + 'px')
                                     .css('opacity','0.1').animate({opacity:'0.99'},200,function(){
                       $(this).before($(this).clone(true).data('RowNum',$(this).data('RowNum') - 1))
                       .unbind('Rows')
                       .append(
                         $("<p>").data('ColumnNum',$(this).data('RowNum')).width(20).height(20)
                           .css('display','inline')
                           .appendTo($(this))
                           .bind('Columns',function(){
                              $(this).text(($(this).data('ColumnNum')) +
                                            "x" +
                                            ($(this).parent().data('RowNum')) +
                                            "=" +
                                            ($(this).data('ColumnNum'))*($(this).parent().data('RowNum'))
                                          ).css('color',
                                                                                            'RGB('+ $(this).data('ColumnNum') * $(this).data('ColumnNum') * 3 + ','
                                                                                                            + ($(this).parent().data('RowNum') + $(this).data('ColumnNum')) * 10 + ','
                                                                                                          + $(this).parent().data('RowNum') * $(this).parent().data('RowNum') * 2 + ')')
                                                                                     .css('margin-left',
                                                                                              $(this).data('ColumnNum')*$(this).parent().data('RowNum') + 'px')
                                           .parent().find("p:lt("+ ($(this).data('ColumnNum')-1) +")").eq(0)
                                                                               .css('opacity','0.1')
                                                                               .animate({opacity:'1.00'},
                                                                                                 $(this).data('ColumnNum')*$(this).parent().data('RowNum')*40,
                                                                                                 function(){
                                                                                               $(this).before($(this).clone(true).data('ColumnNum',$(this).data('ColumnNum') - 1))
                                                                                                                .unbind('Columns')
                                                                                                                .parent().find("p").eq(0).triggerHandler('Columns')
                                                                                                        })
                                                                                                }).triggerHandler('Columns')
                                                                             ).parent().find("div").eq(0).triggerHandler('Rows')
                                                                        })
                                                         }).triggerHandler('Rows');
});

上面是jquery写的一段九九乘法表代码程序了,下面

 var table = "<table>"
    for(var i = 1;i <= 9;i++){
        table += "<tr>";
        for(var j = 1;j <= 9;j++){
            var data = (j <= i ? "" + i + " * " + j + " = " + i*j : "");
            table += "<td>" + data + "</td>";
        }
        table += "</tr>";
    }
    table += "</table>";
    $("body").append(table);

下面是一段简单的写法

补充:网页制作,jquery
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,