javascript和jquery分別實現的九九乘法表代碼

2019-11-21 00:40:25

字體：大中小

來源：轉載

供稿：網友

javascript實現的九九乘法表代碼

jquery實現的九九乘法表代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery 九九乘法表</title> <script src="http://img.VeVB.COm/jslib/jquery/jquery.js"></script> </head> <body> <script language="javascript"> $(document).ready(function(){ $("<div>").data('fact',8).css('margin','10px') .appendTo(document.body) .bind('error',function(){ $(this).parent().find("div:lt("+ ($(this).data('fact')) +")").eq(0) .before($(this).clone(true).data('fact',$(this).data('fact') - 1)) .unbind('error') .append( $("<p>").data('fact',$(this).data('fact')).width(20).height(20) .css('display','inline').css('margin','10px') .appendTo($(this)) .bind('focus',function(){ $(this).text(($(this).data('fact') + 1) + "x" + ($(this).parent().data('fact') + 1) + "=" + ($(this).data('fact') + 1)*($(this).parent().data('fact') + 1) ) .parent().find("p:lt("+ ($(this).data('fact')) +")").eq(0) .before($(this).clone(true).data('fact',$(this).data('fact') - 1)) .unbind('focus') .parent().find("p").eq(0).triggerHandler('focus'); }).triggerHandler('focus') ).parent().find("div").eq(0).triggerHandler('error'); }).triggerHandler('error'); }); </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

用一行代碼打印九九乘法表
展示了jQuery的級聯語法，簡介且功能強大
這個程序的要求：不能用if,for,var xx =等常見js代碼。只能用jquery的鏈式代碼。

于是，要生成99表，必然要遞歸。可遞歸必然有終止的條件，那就得有if(n==0)return這樣的
代碼，又是不被允許的。那么jquery怎么才能終止呢？我想到了用find(‘p:lt(n)')，n<0的時候
是會終止的。

而bind的使用，純粹是為了遞歸循環。我們首先建立一個對象，綁定一個事件，無所謂了，比如error，然后在這個對象最后，triggerHandler一下，就能完成遞歸了。

這個程序有兩個遞歸循環，外層的是建立九個，內層的是建立9個，在創建p的時候，把99口訣打出來。

上一篇：javascript將ip地址第四段用星號代替的兩種方法

下一篇：js獲取數組任意個不重復的隨機數組元素原創