前端 -- js制作九九乘法表

js写九九乘法表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nearth</title>
		<script type="text/javascript">
			document.write("<table>");
			for(var i=1;i<=9;i++){
				document.write("</br>");
				document.write("<tr>");
				for(j=1;j<=i;j++){
					document.write("<td>"+i+"*"+j+"="+i*j+"&nbsp&nbsp&nbsp"+"</td>");
				}
				document.write("</tr>");	
			}
			document.write("</table>");
		</script>
	</head>
	<body>
		
	</body>
</html>

我之前练习的js所有列子分享

百度网盘

链接:https://pan.baidu.com/s/1RZOZwt4CBlvuf7Pmurkp2Q 
提取码:v5cv

js小例子

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>js循环测试</title>
		<style>
			#dom2 {
				width: 10px;
				height: 10px;
				background-color: #CADEFF;
				margin-left: 10px;
				position: relative;
				margin-top: 50px;
			}
			button{
				width: 145px;
				border-radius:7px; 
				height: 40px;
				background-color: #E2F2FF;
			}
		</style>
	</head>

	<body>
		<!--1、编写一个函数,计算任意两个数字之间所能组成的奇数个数数字必须是个位数,两个数字不能重复。比如:计算1-2之间能组成的奇数是21.
			2、编写一个函数,调用时可以传入任意两个参数,输出所用参数的和。
			3、编写一个函数,调用时可以改变页面中某个元素的颜色、大小位置等。
			4、将10000元存入银行,年利率是千分之三。每过一年将利息加入本金再生利(复利),计算多少年后,本金加利息超过18000元。
			5、1-100之间不能被3整除的和,从2000及以上开始打印出来。
			6、将数组中重复项清除
			7、初始的二维数组是一个,3行4列的数组[[2,3,6,8],[5,7,0,9],[1,3,5,7] ]。将其转换为4行3列的二维数组-->
		<div>

		</div>
		<script type="text/javascript">
			function cs(x, c) {
				return (x + c);
			}
			//alert(cs("8","1"));
		</script>

		<!--===============================================================================-->

		<button onclick="cd()">测试</button>
		<div id="dom"></div><br />
		<script type="text/javascript">
			/*
			 * 首先声明一个数字,我们设置1-10然后计算他们之间谁的和为奇数。
			 * 我们要用到的循环为for因为我们知道循环多少次
			 */
			function cd() {
				var all = "";
				for (var i = 1; i <= 3; i++) { //这里我们循环一次1,里面循环一圈,
					for (var z = 3; z > 0; z--) { //这里我们循环一周3,2,1.如果上面在循环为2我们内部在循环一周.
						all += "这个数字的和为" + z + i + "<br>";
					}
				}
				document.getElementById("dom").innerHTML = all;
			}
		</script>

		<!--===============================================================================-->

		<button onclick="cf(5,6)">测试1</button>
		<div id="dom1"></div><br />
		<script type="text/javascript">
			function cf(x, z) {
				var all = x + z;
				document.getElementById("dom1").innerHTML = all;
			}
		</script>

		<!--===============================================================================-->

		<button onclick="colour()">更换颜色</button>
		<button onclick="locatio()">更换位置/右</button>
		<button onclick="locatios()">更换位置/左</button>
		<button onclick="size()" id="big">更换大小/变大</button>
		<button onclick="little()" id="little">更换大小/变小</button>
		<div id="dom2"></div><br />
		<script type="text/javascript">
			var sizs = 0;
			var divs = document.getElementById("dom2");

			function colour() {
				divs.style.background = "red";
			}

			function locatio() {
				sizs = sizs + 50;
				divs.style.left = sizs + "px";
			}

			function locatios() {
				sizs = sizs - 50;
				divs.style.left = sizs + "px";
			}

			function size() {
				sizs = sizs + 40;
				divs.style.width = sizs + 'px';
				divs.style.height = sizs + 'px';
			}

			function little() {
				var widths = document.getElementById("dom2").offsetWidth;
				if (widths < 10) {
					alert("已经最小不可点击!!");
					document.getElementById("little").disabled = ture;
					// disabled="true"
				} else {
					sizs = sizs - 40;
					divs.style.width = sizs + 'px';
					divs.style.height = sizs + 'px';
				}

			}
		</script>

		<!--=================================================================================-->
		<!--4、将10000元存入银行,年利率是千分之三。每过一年将利息加入本金再生利(复利),计算多少年后,本金加利息超过18000元。-->
		<button onclick="interest()">测试4</button>
		<div id="dom4"></div><br />
		<script type="text/javascript">
			function interest() {
				var all = "";
				var yearly = 0.003;
				var accrual = 10000;
				var i = 0;
				while (accrual < 18000) {
					accrual += accrual * 0.003;
					i++;
				}
				all += "要需要" + i + "年,本金加利息超过18000元";
				document.getElementById("dom4").innerHTML = all;
			}
		</script>

		<!--===============================================================================-->
		<!--1-100之间不能被3整除的和,从2000及以上开始打印出来。-->
		<button onclick="integer()">测试5</button>
		<div id="dom5"></div><br />
		<script type="text/javascript">
			function integer() {
				var all = new Array();
				for (var i = 0; i <= 100; i++) {
					if (i % 2) { //判断余数为3的不输出,
						//all += "这个数字为" + i + "<br>";
						for (var x = i; x > 0; x--) {
							//all += "这个数字为"+ x + i +"<br>";
							all += "这个数字为" + x + i + "<br>";
						}
					}
				}
				document.getElementById("dom5").innerHTML = all;
			}
		</script>

		<!--=============================================================================-->
		<!--将数组中重复项清除。-->
		<button onclick="repetition()">测试6</button>
		<div id="dom6"></div><br />
		<script type="text/javascript">
			function repetition() {
				var numb = [1, 5, 6, 4, 5, 8, 9, 7, 8, 2, 1, 3, 5, 4, 6, 1];
				var arr = []; //定义一个临时数组 
				for (var i = 0; i < numb.length; i++) {
					//					声明我们的数组循环输出
					if (arr.indexOf(numb[i]) == -1) {
						//这个是我们的数组查询如果下标为-1也就是没有查询到的内容,然后将内容进行输出到我们数组的后面。
						arr.push(numb[i]);
					}
				}
				document.getElementById("dom6").innerHTML = arr;
			}
		</script>

		<!--==================================================================================-->
		<!--7、初始的二维数组是一个,3行4列的数组[[2,3,6,8],[5,7,0,9],[1,3,5,7] ]。将其转换为4行3列的二维数组-->

		<!--<button onclick="dimension()">测试7</button>
		<div id="dom7"></div><br />
		<script type="text/javascript">
			function dimension() {
				var numbe = [
					[2, 3, 6, 8],
					[5, 7, 0, 9],
					[1, 3, 5, 7]
				];
				var ss = [];
				for(var i = 0; i < numbe.length; i++) {
					for(var x = 0; x < numbe[i].length; x++) {
						ss[i][x] = numbe[i][x];
					}
				}
				//console.log(ss); 
				document.getElementById("dom7").innerHTML = ss;
			}
		</script>-->

		<!--=============================================================================-->
		<p>例子七在控制台</p>
		<script type="text/javascript">
			var arr = [
				[2, 3, 6, 8],
				[5, 7, 0, 9],
				[1, 3, 5, 7]
			];
			var str = [];

			for (var i = 0; i < arr[0].length; i++) {
				str[i] = [];
			}
			console.log(str)
			for (var j = 0; j < arr.length; j++) {
				for (var k = 0; k < arr[j].length; k++) {
					str[k][j] = arr[j][k];
				}
			}
			console.log(str);
		</script>

		<!-- ========================================================================================== -->

		<script>
			document.write(1 + 2 + "" + 4 + 5 + "<br />");
			document.write("" + 1 + 2 + 4 + 5 + "<br />");
			document.write(1 + 2 + " " + 4 * 5 + "<br />");
		</script>

		<!-- ======================================================================================== -->

		<button onclick="measurement()">测试8</button>
		<div id="dom8"></div><br />
		<script type="text/javascript">
			function measurement() {
				var xf = 0;
				for (var i = 1; i <= 10; i++) {
					xf += i;
				}
				document.getElementById("dom8").innerHTML = xf;
			}
		</script>

		<!-- ========================================================================================-->

		<button onclick="measurements()">测试9</button>
		<div id="dom9"></div><br />
		<script type="text/javascript">
			function measurements() {
				var ag = "";
				for (var i = 1; i <= 10; i++) { //这里循环一次里面循环全部外边循环1
					for (var x = 10; x > 0; x--) { //这里我们循环的就为10,9,8,7,6,5,4,3,2,1,0这样去循环的
						ag += i + x + "<br>";
					}
				}
				document.getElementById("dom9").innerHTML = ag;
			}
		</script>

		<!-- ======================================================================================== -->

		<button type="button" onclick="tests()">测试10</button>
		<div id="dom10"></div><br />
		<script type="text/javascript">
			function tests() {
				var cons = ""; //声明空的字符串,
				for (var i = 0; i < 10; i++) { //我们的循环这里就直接尽心执行
					cons += "这个数字为" + i + "<br>"; //将内容进行输出赋值到我们空的字符串里面
				}
				document.getElementById("dom10").innerHTML = cons; //输出
			}
		</script>

		<!-- ======================================================================================= -->

		<button type="button" onclick="testr()">循环数字拼接</button>
		<button type="button" onclick="testu()">循环的数字相加</button>
		<button type="button" onclick="testd()">测试外圈内容</button>
		<button type="button" onclick="testg()">测试内圈内容</button>
		<div id="outer">外圈内容</div><br />
		<div id="within">内圈内容</div><br />
		<div id="dom11">循环数字拼接</div><br />
		<div id="doms11">循环的数字相加</div><br />
		<script type="text/javascript">
			function testd() {
				var outer = ""; //声明空的字符串,输出内圈内容
				var within = ""; //声明空的字符串,输出外圈内容
				for (var i = 0; i < 10; i++) {
					outer += "外圈数字为" + i + "<br>";
					document.getElementById("outer").innerHTML = outer;
					for (var x = 10; x > 0; x--) {}
				}
			}

			function testg() {
				var outer = ""; //声明空的字符串,输出内圈内容
				var within = ""; //声明空的字符串,输出外圈内容
				for (var i = 0; i < 10; i++) {
					for (var x = 10; x > 0; x--) {
						within += "内圈内容为" + x + "<br>";
					}
				}
				document.getElementById("within").innerHTML = within;
			}

			function testr() {
				var outer = ""; //声明空的字符串,输出内圈内容
				var within = ""; //声明空的字符串,输出外圈内容
				var conc = ""; //声明空的字符串,
				for (var i = 0; i < 10; i++) {
					for (var x = 10; x > 0; x--) {
						conc += "数字循环拼接为" + x + i + "<br>";
					}
				}
				document.getElementById("dom11").innerHTML = conc;
			}
			function testu() {
				var outer = ""; //声明空的字符串,输出内圈内容
				var within = ""; //声明空的字符串,输出外圈内容
				var adding = ""; //声明空的字符串,
				for (var i = 0; i < 10; i++) {//我们外边循环1
					for (var x = 10; x > 0; x--) {//里面循环9,8,7,6,5,4,3,2,1
						adding +=  x + i + "数字循环增加为" + "<br>";
					   /*
						*  然后将内容进行增加1+9,1+8,1+7.....
						*   如果外面循环第二次内部为2+9,2+8,2+7......
						* 	 后面套路一样
						*  --注意
						*     这个和上面的是一样的我们的字符串位置改然后它的值就进行了更改。
						*      如果数组相加前面有字符串那么我们数字就为拼接,如果在数字后面这个不影响
						*/
					}
				}
				document.getElementById("doms11").innerHTML = adding;
			}
		</script>

	</body>
</html>
发布了105 篇原创文章 · 获赞 17 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_44944193/article/details/105378763
今日推荐