2. 程式人生 > >JavaScript前端實現九九乘法表

JavaScript前端實現九九乘法表

阿新 • • 發佈：2018-11-07

JavaScript前端實現九九乘法表

1.通過點選網頁上的按鈕呼叫f1()函式來顯示;

	<html>
	<head>
	</head>
	<body>
		<div id="d1"></div>
		<input type="button" value="生成九九乘法表" onclick="f1()"/>
	</body>
	</html>

2.編寫script裡面的內容：

	<script>
	function f1(){
		var str="";
 

		for(var i = 1;i <= 9;i++){//外層迴圈
			str += "<div id='d2'>";//內層迴圈完後執行換行
			for(j = 1;j <= i;j++){//內層迴圈
				str += "<div>";
				str += i+"X"+j+"="+i*j;
				str += "</div>";
			}
			str += "<br/></div><br/>";//實現換行
		}
		document.getElementById("d1").innerHTML=str;
	}
 

	</script>

3.最後編寫css樣式：

	<style>
		#d2 div{width: 50px;height: 30px;border: 1px solid black;float:left;text-align: center;line-height: 30px;};
	</style>

那麼到這裡整個程式碼編寫完成；
所有原始碼：

<html>
<head>
	<style>
		#d2 div{width: 50px;height: 30px;border: 1px solid black;float
 
:left;text-align: center;line-height: 30px;};
	</style>
	<script>
	function f1(){
		var str="";
		for(var i = 1;i <= 9;i++){//外層迴圈
			str += "<div id='d2'>";//內層迴圈完後執行換行
			for(j = 1;j <= i;j++){//內層迴圈
				str += "<div>";
				str += i+"X"+j+"="+i*j;
				str += "</div>";
			}
			str += "<br/></div><br/>";
		}
		document.getElementById("d1").innerHTML=str;
	}
	</script>
</head>
<body>
<div id="d1">
</div>
<input type="button" onclick="f1()" value="生成乘法表" />
</body>
</html>

最後執行結果：
在瀏覽器中執行結果如上圖所示。

PS：新手一枚；有什麼問題還請大佬多多批評指正。

相關推薦

JavaScript前端實現九九乘法表

JavaScript前端實現九九乘法表 1.通過點選網頁上的按鈕呼叫f1()函式來顯示; <html> <head> </head> <body> <div id="d1"></div> <

JavaScript實現九九乘法表

<!DOCTYPE html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   <title>JavaSc

用JavaScript實現九九乘法表

window.onload = function(){ for(var i = 1;i<10;i++){ var oUl = document.createElement('ul'); oUl.se

Java實驗項目二——二維數組實現九九乘法表

logs [] for 工具類 div 返回 static span dem Program：打印乘法口訣表 　　　　（1）編寫一個方法，參數（二維數組），完成將二維數組中的數據按照行列顯示的工作。 　　　　（2）編寫一個測試方法，給出99乘法表，放入到二維數組中，調用（1

（js）使用for循環實現九九乘法表數字顏色不同

word log i++ function -c pac bsp num number <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

C語言for 循環 9*9 實現九九乘法表

printf sha pre tdi c語言 for循環 clu ret blog #include <stdio.h> int main(void) { //for循環實現9*9乘法表 /* 1*1=1 1*2=2 2*2=4 1*3=3 2*3

用python實現九九乘法表

python每天進步一點點學到了print 竟然還有end功能。 i = 0while (i < 10):j = 1print()while (j <= i):print(str(i) + " x " + str(j) + " = ", i * j, end

shell腳本實現九九乘法表

AR 九九 bash a* 嵌套for循環 string until 9*9 amp #!/bin/bash #for嵌套for循環 #9*9乘法口訣 echo "for的九九乘法表" for(( i=1 ;i<=9;i++ )) do

用js實現九九乘法表

實現 換行 pre script 九九 for 代碼 scrip ++ 全程用js代碼實現,只需幾行代碼即可,歡迎收藏完整代碼如下:<script>for(var i=1;i<=9;i++){//外層循環決定行的數量 for(var j=1;j<

Java實現九九乘法表

public class Demo {     public static void main(String[] args) {         //外迴圈-------行數     &nbs

用for迴圈實現九九乘法表

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">

JAVA實現-使用for迴圈 實現九九乘法表/列印矩形-三角形-菱形

package com.company; public class Main { /** * 列印九九乘法表 * @param args */ public static void main(String[] args) { for

用while，和for分別實現九九乘法表

package ex; public class chengfabia { public static void main(String[] args) { // TODO Auto-generated method stub int i,j;

實現九九乘法表並水平垂直居中

1.html&js: 2.css: html,body{ margin:0; padding:0; } .box{ display:flex; align-items: center; justify-content: center; posi

Python實現九九乘法表的列印

row=1 while row<=9: # 列印一行式子 # 表示列號 col = 1 # 列印row列就是row個式子 while col <= row: # 列印第row行中的第col個式子 print("%d * %d = %d" % (col

Python實現九九乘法表

1 * 1 = 1    1 * 2 = 2   2 * 2 = 4    1 * 3 = 3   2 * 3 = 6   3 * 3 = 9    1 * 4 = 4   2 * 4 = 8   3 * 4 = 12   4 * 4 = 16    1 * 5 = 5   2 * 5 = 10   3 *

Python用while迴圈實現九九乘法表

# while迴圈實現九九乘法表 i = 1 while i<=9: j = 1 while j<=i: print("{}*{}={:<2}".format(i,j,i * j),end = " ") j += 1 i += 1 print

python實現九九乘法表 （ver3.6）

菜鳥新手，大家多多指導.print("下面列印九九乘法表".center(60, "=")) for j in range(10): for i in range(j+1): print("%d

JS實現九九乘法表和時間問候語

編碼 小練習，練習使用迴圈實現一個九九乘法表 第一步，最低要求：在Console中按行輸出 n * m = t 然後，嘗試在網頁中，使用table來實現一個九九乘法表 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5

用PHP實現九九乘法表

1.九九乘法表 for 實現：for($i=1;$i<10;$i++){    for($j=1;$j<=$i;$j++){        echo $i.'*'.$j.'='.$i*$j.'&nbsp;&nbsp;&nbsp;';