javascript和jquery分别实现的九九乘法表代码
作者:bea
javascript实现的九九乘法表代码 <!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
javascript实现的九九乘法表代码
<!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>99乘法表</title>
<script language="javascript">
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++)
{
document.write(i+"×"+j+"="+i*j+" ");
}
document.write("<br>");
}
</script></head>
<body>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
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./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口诀打出来。
有用 | 无用
<!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>99乘法表</title>
<script language="javascript">
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++)
{
document.write(i+"×"+j+"="+i*j+" ");
}
document.write("<br>");
}
</script></head>
<body>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
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./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口诀打出来。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- input 输入框内的输入事件详细分析
- js replace() 文本替换你所不知的
- javascript 新闻标题静态分页代码 (无刷新)
- Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
- javascript中的undefined 与 null 的区别 补充篇
- javascript+iframe 实现无刷新载入整页的代码
- js select常用操作控制代码
- js实现的日期操作类DateTime函数代码
- js 翻转颜色实现代码
- javascript json2 使用方法
- jQuery 选择器理解
- jQuery 学习入门篇附实例代码
- Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
- Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
- javascript 二维数组的实现与应用
- JavaScript 中文转拼音实现代码 有些bug
- Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
- jQuery MD5加密实现代码
- javascript将ip地址第四段用星号代替的两种方法