循化和数组排序
html部分：
<html>
<head>
<meta charset="UTF-8">
<title>乘法表，冒泡</title>
</head>
<body>
<div>
<button onclick="multiplicationTable()">乘法表</button>
<button id="ascending">升序</button>
<button id="descending">降序</button>
<button id="rightAngle">直角三角形</button>
<button id="isosceles">等腰三角形</button>
</div>
<div id="content"></div>
<table id="tb"></table>
<script type="text/javascript" src="lib/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/for.js"></script>
</body>
</html>
js部分—乘法表
function multiplicationTable(){
var cfbhtml="";
cfbhtml="<table>";
for(var i=1;i<9;i++)
{
cfbhtml+="<tr>";
for(var j=1;j<=i;j++)
{
cfbhtml+="<td>"+i+"*"+j+"="+i*j+"</td>";
}
cfbhtml+="</tr>";
}
cfbhtml+="</table>";
// document.write(cfbhtml);//js，将乘法表写到 HTML 文档中
document.getElementById("content").innerHTML=cfbhtml;//js，将乘法表写入到，id为content的元素内
// var con=document.getElementById('tb');//appendChild添加类型必须是node
// con.innerHTML=cfbhtml;
// document.getElementById('content').appendChild(con);
}
升序
var arr=[2,8,5,10,3,9,5,6];
//$是jQuery的，要用必须先在html里面引用jQuery的类
//onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么 ，click()方法的主要作用是触发调用click方法元素onclick事件,实际上是模拟了鼠标的点击动作
$('#ascending').click(function(){
// $("#content").remove();//jq,删除被选元素
$('#content').empty();//jq,删除被选元素的子元素
var num;
for(var n=0;n<=arr.length-1 ;n++)
{
for(var m=0;m<arr.length-1;m++)
{
if(arr[n]<arr[m])//把小于号，改成>则是降序
{
num=arr[n];
arr[n]=arr[m];
arr[m]=num;
}
}
}
$('#content').append(arr.toString());
});
直角三角形
document.getElementById("rightAngle").addEventListener("click", showRightAngle);
function showRightAngle() {
var shtml = "";
shtml = "<table>";
for(var i = 1; i < 10; i++) {
shtml += "<tr>";
for(var j = 0; j < 9 - i; j++) {
shtml += "<td>";
shtml += " ";
shtml += "</td>";
}
for(var j = 0; j < i; j++) {
shtml += "<td>";
shtml += i;
shtml += "</td>";
}
shtml += "</tr>";
}
shtml += "</table>";
document.getElementById("content").innerHTML = shtml;
}
等腰三角形
$("#isosceles").click(function() {
var h=window.prompt("请输入h");
var shtml = "";
shtml = "<table>";
for(var i = 1; i < h; i++) {
shtml += "<tr>";
for(var j = 1; j <= h - i; j++) {
shtml += "<td>";
shtml += " ";
shtml += "</td>";
}
for(var k = 1; k <= i * 2 - 1; k++) {
shtml += "<td>";
shtml += "*";
shtml += "</td>";
}
shtml += "</tr>";
}
shtml += "</table>";
$('#content').append(shtml.toString());
});
浙公网安备 33010602011771号