JS筆記之第二天

来源:https://www.cnblogs.com/haohaogan/archive/2020/02/07/12274509.html
-Advertisement-
Play Games

一元運算符:++ -- 分為前++和後++ and 前--和後-- 如果++在後面,如:num++ +10參與運算,先參與運算,自身再加1 如果++在前面,如:++num+10參與運算,先自身加1,然後再參與運算 如果--在後面,如:num-- +10參與運算,先參與運算,自身再減1 如果--在前面 ...


一元運算符:++  --

分為前++和後++ and 前--和後--

如果++在後面,如:num++ +10參與運算,先參與運算,自身再加1

如果++在前面,如:++num+10參與運算,先自身加1,然後再參與運算

如果--在後面,如:num-- +10參與運算,先參與運算,自身再減1

如果--在前面,如:--num+10參與運算,先自身減1,然後再參與運算

 

例子:

代碼是從上到下,一行一行執行的。

++在後面:

var num1=10;
var sum1=num1++ +10;
//sum1=num1++ +10=10+10=20
//num1++=10+1=11
console.log(sum1);//20

 

++在前面

var num2=10;
var sum2=++num2+10;
//++num2=10+1=11
//sum2=++num2+10=11+10=21
console.log(sum2);//21

 

- -在後面

var num3=10;
var sum3=num3-- +10;
//sum3=num3-- +10=10+10=20;
//num3--=10-1=9
console.log(sum3);//20

 

 

- -在前面

var num4=10;
var sum4=--num4+10;
//--num4=10-1=9
//sum4=--num4+10=9+10=19
console.log(sum4);//19

 

 

調試

調試:調試代碼--->成為中高級工程師必備的技能之一

調試的方法有很多種,這裡暫時只講一種:斷點調試

 

調試的作用:查看每一步執行的狀態,便於瞭解程式的運行情況,找出bug;代碼正常執行,語法沒有錯誤,但是結果不是自己想要的;觀察這行代碼的變數或者函數的值是多少;這行代碼執行的效果如何。

斷點調試是指自己在程式的某一行設置一個斷點,調試時,程式運行到這一行就會停住,然後可以一步一步往下調試,調試過程中可以看各個變數當前的值,如果調試到出錯的代碼行,即顯示錯誤,停下。

 

調試步驟:

寫代碼----->打開瀏覽器----->按F12(開發人員工具)----->點擊Sources----->找到需要調試的文件,雙擊文件----->出現的代碼前面的行號點擊一下就是添加一個斷點(可以添加多個斷點)

 

調試中的相關操作:

Watch: 監視,通過watch可以監視變數的值的變化,非常的常用。

F10: 程式單步執行,讓程式一行一行的執行,這個時候,觀察watch中變數的值的變化。

F8:跳到下一個斷點處,如果後面沒有斷點了,則程式直接執行結束。

 

 

 

 

流程式控制制

流程式控制制:代碼的執行過程

流程式控制有三種方式:

1.順序結構:從上到下,從左到右執行的順序,就叫做順序結構(不是很嚴謹)

2.分支結構:if語句、if-else語句、if-else if-else if...語句、swith-case語句、三元表達式語句

3.迴圈結構:while迴圈、do-while迴圈、for迴圈、for-in迴圈(後期)

 

分支語句:

if語句

if-->如果

if語句主要是判斷

 

語法:

if(表達式){

   代碼塊(代碼)

}

註意:大括弧不能另起一行,否則就是另一行代碼

 

執行過程:

先判斷表達式的結果是true還是false,如果是true則執行代碼塊,如果是false,大括弧中的代碼是不執行的

 

例如:

1.如果8大於6,請輸出8

if (8>6){
    console.log(8);
}

 

 

2.如果一個數字大於另一個數字則輸出大的數字

var num1=10;
var num2=20;
if (num1>num2){//結果是false,不執行下麵的代碼
    console.log(num1); 
}

 

 

3. 問:小明的年齡是否大於18歲,如果是成年了,則提示可以看電

var age=21;
if (age>=18){
    console.log("可以看電影了");
}

 

4. 問:小明帥不帥,帥則顯示:是真的帥

var str="帥";
if (str=="帥"){
    console.log("是真的帥");
}

 

 

 

if-else語句

這是由兩個分支組成的,只執行一個分支。中間的“-”起到分割作用,寫代碼是沒有“-”的。

 

if-else語句的語法:

if(表達式){

   代碼1(這裡並不是只能寫一行代碼,而是能寫多行代碼)

}else{

   代碼2

}

 

執行過程:

如果表達式的結果是true則執行代碼1;如果是false,則執行代碼2

 

例子:

問:小蘇的年齡是否是成年人,如果是成年人則提示,可以看電影,否則;回家寫作業

var age=10;
if (age>=18){
    console.log("可以看電影");
}else{
    console.log("回家寫作業");
}

 

 

根據描述來分析,成年人是18歲。

如果age大於等於18,那麼執行console.log("可以看電影");

如果age小於18,那麼執行console.log("回家寫作業");

由於age=10,代入到if條件里,10>=18,10小於18,所以執行console.log("回家寫作業");

 

 

 

年齡一般都是用戶自己輸入的,不是已經在變數中固定寫好的,所以需要修改如下:

prompt(“”);這是一個彈窗,可以輸入值,輸入的值在變數中,最終的結果是字元串類型。

prompt(“”);括弧裡面的雙引號裡面可以自由寫文字,由我們自定義寫的;比如:prompt(“請您輸入您的年齡”);prompt(“請您輸入一個數字”);

 

提示用戶輸入年齡:

var age=prompt("請您輸入您的年齡");
//由於字元串類型不能用於比較,所以需要轉換成數字類型
var age=parseInt(prompt("請您輸入您的年齡"));
if (age>=18){
    console.log("可以看電影");
}else{
    console.log("回家寫作業");
}

 

 如果用戶輸入的不是數字,而是其他的文字之類的,那麼結果會變成NaN,先不要糾結怎麼去掉NaN,後面會學習。

(if語句只有一個分支;if-else語句有兩個分支,最終執行一個分支;if-else if-else if-else if-else if-else if......else---多分支,最終也是執行一個)

 

if-else的練習

練習1.找出兩個數字中的最大值

練習2.判斷這個數字是奇數還是偶數

練習3.將練習2改為用戶自己輸入

 

三元表達式

運算符號: ?  :

 

語法:

var  變數=表達式1?表達式2:表達式3

 

執行過程:

表達式1的結果是true還是false,如果表達式1的結果是true則執行表達式2,然後把結果給變數;如果表達式1的結果是false,則執行表達式3,把結果給變數。

總結:大多數情況下,使用if-else的語句可以用三元表達式的方式來表示

 

例子:

1.判斷兩個數字中的最大值

var x=10;
var y=20;
var result=x>y?x:y;
console.log(result);

執行過程,問x是否大於y,如果x大於y,則把x這個結果給result,如果x小於y,則把y這個結果給result

 

2.判斷一個人是否是成年人      

var age=20;
var result=age>=18?"成年人":"未成年";
console.log(result);

 

 執行過程,先判斷age是否大於18,如果大於18,,則把成年人這三個字賦值給result這個變數;如果小於18,則把未成年這三個字賦值給result這個變數

 

if-else if 語句...

這是由多個分支組成的,最後只執行一個分支。

 

語法:

if(表達式1){

   代碼1

}else if(表達式2){

   代碼2

}else if(表達式3){

   代碼3

}else{

   代碼4

}

else if---這種結構可以寫多個,具體多少個看需求;

else---結構可以不用寫的,具體也看需求。

 

執行過程:

先判斷表達式1的結果,

如果為true則執行代碼1;

如果為false,則判斷表達式2;

如果表達式2為true則執行代碼2;

如果為false,則判斷表達式3;

如果表達式3為true,則執行代碼3;否則執行代碼4。

 

例子:

成績的結果是在90到100(包含)之間,則顯示A級

如果成績的結果是在80到90(包含)之間,則顯示B級

如果成績的結果是在70到80(包含)之間,則顯示C級

如果成績的結果是在60到70(包含)之間,則顯示D級

如果成績的結果是在0到60(不包含)之間,則顯示E級

 

var score=Number(prompt("請您輸入您的成績"));//這樣寫有bug,如果用戶輸入的是文字或者字母,那麼會顯示成E級。
//需要加個條件:if
//if (isNaN(score)){ } 如果為ture,則說明不是數字
if (!isNaN(score)){// !取相反的結果。如果為ture,則說明是數字
    if (score>90&&score<=100){
        console.log("A");
    }else if (score>80){
        console.log("B");
    }else if (score>70){
        console.log("C");
    }else if (score>60){
        console.log("D");
    }else{
        console.log("E");
    }
}else{
    console.log("您輸入的有誤")
}

 

這樣寫是有缺陷的,原因:打開頁面就直接出現彈窗。(我們在打開網頁是不會直接出現彈窗的)這是用來測試用的,後期會取消彈窗。

考慮到實際運用,需要把score=parseInt(prompt("請您輸入您的成績"))改為score==Number(prompt("請您輸入您的成績")); 分數可以允許有小數,用parseInt()的話,小數直接就沒有了;Number在轉換的時候比前兩個更加嚴格

如果用戶輸入的是文字或者字母等其他,那麼就不會顯示出什麼,這樣體驗不怎麼好,可以在後面加個else{console.log("您輸入的有誤")}

 

練習4.判斷一個年份是不是閏年

 

swith-case語句---多分支語句

 

語法:

switch(表達式(也可以是值)){

  case值1:代碼1;break(為了方便所以放在同一行);

  case值2:代碼2;break;

  case值3:代碼3;break;

  case值4:代碼4;break;

  ...可以寫多個case

  default:代碼5;(最後的break可以省略不寫)

}

 

執行過程:

獲取表達式的值,和值1比較,如果一樣,則執行代碼1,遇到braek則跳出整個語句,後面代碼不執行;

 

如果表達式的值和值1不一樣,則和值2比較,如果相同則執行代碼2,遇到break則跳出;否則和值3比較,相同則執行代碼3,遇到break則跳出,否則和值4比較,相同則執行代碼4,遇到break則跳出,否則直接執行代碼5.

 

註意問題:

1.default後面的break是可以省略的

2.default也可以省略

3.switch-case語句中和case後面的值比較的時候使用的是嚴格的模式。

var num=“10”;switch(num){case“10”...} ;switch裡面的num===case“10”。

4.break是可以省略的,但是它會一直執行下去,直到碰到break才停止。

 

例子:

1.獲取一個人的成績的級別,如果是A級則顯示90到100直接的分數

如果是B級則顯示80到90之間的分數

如果是C級則顯示70到80之間的分數

如果是D級則顯示60到70之間的分數

否則顯示0到59之間

 

var level = "C";
        switch (level) {
            case "A":
                console.log("90到100之間");
                break;
            case "B":
                console.log("80到90之間");
                break;
            case "C":
                console.log("70到80之間");
                break;
            case "D":
                console.log("60到70之間");
                break;
            default:console.log("0到59之間");
        }

 

 

2.根據數字顯示對應的星期

var num = parseInt(prompt("請您輸入一個星期的數字"));
        switch (num) {
            case 1:
                console.log("星期一");
                break;
            case 2:
                console.log("星期二");
                break;
            case 3:
                console.log("星期三");
                break;
            case 4:
                console.log("星期四");
                break;
            case 5:
                console.log("星期五");
                break;
            case 6:
                console.log("星期六");
                break;
            case 7:
                console.log("星期日");
                break;
            default:
                console.log("輸入有誤")
        }

 

 

3.根據月份顯示對應的天數

var month = 3;
        switch (month) {
            case 1:
                console.log("31天");
                break;
            case 3:
                console.log("31天");
                break;
            case 5:
                console.log("31天");
                break;
            case 7:
                console.log("31天");
                break;
            case 8:
                console.log("31天");
                break;
            case 10:
                console.log("31天");
                break;
            case 12:
                console.log("31天");
                break;
            case 4:
                console.log("30天");
                break;
            case 6:
                console.log("30天");
                break;
            case 9:
                console.log("30天");
                break;
            case 11:
                console.log("30天");
                break;
            case 2:
                console.log("29天");
                break;
            default:
                console.log("請輸入月份的數字");
                break;
        }

 

 

 由於天數是一樣的,可以省略如下

var month = parseInt(prompt("請輸入月份"));
        switch (month) {
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                console.log("31天");
                break;//break要加上去,否則代碼會一直執行下去,直到遇到break才會停止
            case 4:
            case 6:
            case 9:
            case 11:
                console.log("30天");
                break;
            case 2:
                console.log("29天");
                break;
            default:
                console.log("請輸入月份的數字");
                break;
        }

 

分支總結:

if語句:一個分支

if-else語句:兩個分支,最終只執行一個

if-else if-else if...語句:多個分支,最終只執行一個

switch-case語句:多分支語句,最終只執行一個(必須要有break)

三元表達式:和if-else語句是一樣的

什麼時候使用if-else if...語句:一般是對範圍的判斷

什麼時候使用switch-case語句:一般是對具體的值得判斷

如果有多個發支,是針對範圍的判斷。一般選擇if-else if語句

如果有多個分支,是針對具體的值判斷,一般選擇用switch-case語句

 

迴圈:一件事不停的或者重覆的做

迴圈要有結束的條件,迴圈還應該有計數器(記錄迴圈的次數)

 

while迴圈

while迴圈語法:

(程式代碼是從0開始算起的,不是從1開始算起。0~9一共是10個數字。)

 

var  變數=0;(計數器)

while(迴圈的條件){

   迴圈體;

   計數器++; 

}

 

執行過程:

先判斷條件是否成立,(條件的結果是true還是false),如果是false,那麼迴圈的代碼(while的大括弧中的代碼都不執行),如果是true,那麼先執行迴圈體,然後執行計數器,然後,直接去--->迴圈條件,再次判斷是否成立,成立則繼續執行迴圈體,否則跳出迴圈,執行完迴圈體之後,計數器加1,然後再次去迴圈的條件,判斷,成立則迴圈,否則跳出迴圈體.....

(在迴圈當中,我們一般用i、j、k比較多一點的)(while迴圈不一定要計數器,變數可以重新賦值)

 

例子:

1.請輸出10次:過年了

var i=0;//計數器,不可缺少
while (i<10){
    console.log("過年了");
    i++;//記錄次數,不可缺少
}

 

 

2.請輸出10次  哈哈我又變帥了

var i=0;//計數器
   while (i<10){//要小於10,不能大於10,等於10的話就多了一次了
      console.log("哈哈,我又變帥了");
      i++;//記錄次數,這個是一定要加上的,否則上面就會一直迴圈直到瀏覽器記憶體不夠才停止、奔潰
     }
var j=0;//計數器
   while (j<10){//要小於10,不能大於10,等於10的話就多了一次了
       console.log("哈哈,我又變帥了"+j);//加上j就可以顯示多少次,從零開始數起,一共10次
       j++;//記錄次數,這個是一定要加上的,否則上面就會一直迴圈直到瀏覽器記憶體不夠才停止
     }

 

var k=0;//計數器
   while (k<10){//要小於10,不能大於10,等於10的話就多了一次了
      console.log("哈哈,我又變帥了"+(k+1));//括弧裡面的k+1顯示的是從1開始數起,一共10次
      k++;//記錄次數,這個是一定要加上的,否則上面就會一直迴圈知道瀏覽器記憶體不夠才停止
        }//這個(k+1 )不會改變k++的值,k+1=1,k++=0要從下一次算起才是1,k+1和k++是沒有關係的

 

 不要光看,要多敲,在瀏覽器上面對比下才能清晰的看到區別。

       

do-while迴圈

語法:

do{

  迴圈體

}while(條件);

 

執行過程:

先執行一次迴圈體,然後判斷條件是否成立,不成立,則跳出迴圈,成立則執行迴圈體,然後再判斷條件是否成立,成立則繼續迴圈,否則跳出......

 

例子:

問用戶:您覺得我帥嗎?提示用戶請輸入y/n,如果n就一直問,我帥不帥,如果用戶輸入y,則結束,並提示用戶,您真有眼光

do{
    var result=(prompt("您覺得我帥嗎?請輸入y/n"));
    i++;
}while (result!="y");
console.log("您真有眼光");

 

 

總結while和do-while迴圈:

while迴圈特點:先判斷,後迴圈,有可能一次迴圈體都不執行

do-while迴圈特點:先迴圈,後判斷,至少執行一次迴圈體

 

例子:

輸出:哈哈,我又變帥了

var i=0;
do{
    console.log("哈哈,我又變帥");
    i++;
}while (i<10);

 

 

 

for迴圈

語法: 

for(表達式1;表達式2;表達式3){

    迴圈體;

}

 

執行過程:

先執行一次表達式1,然後判斷表達式2;如果成立則直接跳出迴圈;如果表達式2成立,執行迴圈體的代碼,結束後,跳到表達式3執行,然後跳到表達式2,判斷表達式2是否成立,不成立,則跳出迴圈;如果表達式2成立,則執行迴圈體,然後再跳到表達式3,再跳到表達式2,判斷是否成立。一直如此迴圈下去...

 

for迴圈相當於while迴圈

 

例子:

輸出:哈哈,我又變帥了

for (var i=0;i<10;i++){
    console.log("哈哈,我又變帥了");
}

 

 

for的練習

練習1:求1~100之間的和

練習2:求1~100之間所有能被3整除的數字的和

練習3:求1~100之間所有能被7整除的數字的和

 

補充知識:

alert   彈窗

console.log  在控制台顯示

document .write(“ ”)   可以在網頁直接顯示出括弧裡面的內容;括弧裡面的內容可以是html標簽,可以是字元串等。例如:document.write("吃飯睡覺打豆豆,閑得慌");   document.write("<a href=''>鏈接</a>")  document.write("<br />");

 

例子:畫五角星☆

畫一個5行5列的星星,用document.write("☆")   document.write("<br />");和for迴圈做出來

for (var j=0;j<5;j++){//控制有多少行五角星
    for (var i=1;i<=5;i++){//控制一行有多少個五角星
         document.write("☆");
    }
         document.write("<br />");//換行。如果不換行,那所有的五角星都會在同一行顯示出來
}
for (var j=1;j<=5;j++){//控制有多少行五角星
    for (var i=1;i<=j;i++){//控制一行有多少個五角星,
        // 如果把i<=5改為i<=j,那麼在瀏覽器會顯示成第一行有一個五角星,第二行有兩個五角星,以此類推(就像乘法口訣表那樣)
        //註意:如果把i<=5改為i<=j,那麼上面控制行數的迴圈j要改為等於1(j=1),j要改為小於等於5(j<=5),j++不變
         document.write("☆");
    }
         document.write("<br />");//換行。如果不換行,那所有的五角星都會在同一行顯示出來
}

 

補充練習:寫出乘法口訣表

 

 

 

練習參考答案,此答案只做參考不是標準答案。

if-else練習

練習1.找出兩個數字中的最大值

var num1 = 10;
var num2 = 20;
if (num1 > num2) {
    console.log(num1);
} else {
    console.log(num2);
}

 

 

練習2.判斷這個數字是奇數還是偶數

能被2整除的數是偶數,這裡不能用“/”除號,要用“%”取餘。當一個數字能被2整除餘數為零,那麼這個數是偶數

var number = 21;
if (number % 2 == 0) {
    console.log("偶數");
} else {
    console.log("奇數");
}

 

 

練習3將練習2改為用戶自己輸入(這裡只能用parseInt,不能用 parseFloat,小數沒有分奇數和偶數的,奇數和偶數只針對整數來說的,用Number也不合適)

(這裡只能用parseInt,不能用 parseFloat,小數沒有分奇數和偶數的,奇數和偶數只針對整數來說的,用Number也不合適)

var number = parseInt(prompt("請您輸入一個數字"));
if (number % 2 == 0) {
    console.log("偶數");
} else {
    console.log("奇數");
}

 

 

練習4.判斷一個年份是不是閏年

閏年:能被4整除但不能被100整除,或能被400整除的年份即為閏年

var year = 2020;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    console.log("閏年");
} else {
    console.log("平年");
}

 

 

for 迴圈

練習1:求1~100之間的和

var num = 0;
for (var i = 0; i < 100; i++) {
    num += i;
}
console.log(num);

 

 

練習2:求1~100之間所有能被3整除的數字的和

var num1 = 0;
for (var i = 0; i < 100; i++) {
    if (i % 3 == 0) {
        num1 += i;
    }
}
console.log(num1);

 

練習3:求1~100之間所有能被7整除的數字的和

var num1 = 0;
for (var i = 0; i < 100; i++) {
    if (i % 7 == 0) {
        num1 += i;
    }
}
console.log(num1);

 

 

補充練習:寫出乘法口訣表(思路)

1.先寫出九行:9*9=81

document.write("9*9=81");//1
document.write("9*9=81");//2
document.write("9*9=81");//3
document.write("9*9=81");//4
document.write("9*9=81");//5
document.write("9*9=81");//6
document.write("9*9=81");//7
document.write("9*9=81");//8
document.write("9*9=81");//9

 

 

2.由於1寫出了九行相同的9*9=0;可以用for迴圈表示,寫成一條迴圈語句,用於控制每一行有幾個9*9=81

for (var i=0;i<9;i++){
document.write("9*9=81");
}

 

3.加入document.write("<br />");換行,用for加上換行,寫出九行九個9*9=81

for (var i=0;i<9;i++){
     document.write("9*9=81");
}//1
     document.write("<br />");

for (var i=0;i<9;i++){
     document.write("9*9=81");
}//2
     document.write("<br />");
        
for (var i=0;i<9;i++){
     document.write("9*9=81");
}//3
     document.write("<br />");
        
for (var i=0;i<9;i++){
     document.write("9*9=81");
}//4
     document.write("<br />");
        
for (var i=0;i<9;i++){
     document.write("9*9=81");
}//5
     document.write("<br />");
        
for (var i=0;i<9;i++){
     document.write("9*9=81");
}//6
     document.write("<br />");
        
for (var i=0;i<9;i++){
     document.write("9*9=81");
}//7
     document.write("<br />");

for (var i=0;i<9;i++){
     document.write("9*9=81");
}//8
     document.write("<br />");
        
for (var i=0;i<9;i++){
     document.write("9*9=81");
}//9
     document.write("<br />");
 

 

 

 

4.由於3寫出了九行相同的9*9=81的for迴圈,此時又可以再寫一個for迴圈,用於控制行數

for (var k=0;k<9;k++){//控制有多少行9*9=81
    for (var i=0;i<9;i++){//控制一行有多少個9*9=81
        document.write("9*9=81");
    }
    document.write("<br />");
}

 

 效果圖:

9*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=81

9*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=81

9*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=81

9*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=81

9*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=81

9*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=81

9*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=81

9*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=81

9*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=819*9=81

 

5. 改變 document.write("9*9=81");這一條的公式

 將document.write("9*9=81");變為document.write(i+"*"+k+"="+i*k);

 i   取自自身for的i,(取自控制每一行有幾個9*9=81這個for)

 k  取自上邊for的k,(取自用於控制行數的for)

 +  加號代表的是字元串的拼接

for (var k=0;k<9;k++){
   for (var i=0;i<9;i++){
         document.write(i+"*"+k+"="+i*k);
     }
         document.write("<br />");
 }

 效果圖:

 0*0=01*0=02*0=03*0=04*0=05*0=06*0=07*0=08*0=0

0*1=01*1=12*1=23*1=34*1=45*1=56*1=67*1=78*1=8

0*2=01*2=22*2=43*2=64*2=85*2=106*2=127*2=148*2=16

0*3=01*3=32*3=63*3=94*3=125*3=156*3=187*3=218*3=24

0*4=01*4=42*4=83*4=124*4=165*4=206*4=247*4=288*4=32

0*5=01*5=52*5=103*5=154*5=205*5=256*5=307*5=358*5=40

0*6=01*6=62*6=123*6=184*6=245*6=306*6=367*6=428*6=48

0*7=01*7=72*7=143*7=214*7=285*7=356*7=427*7=498*7=56

0*8=01*8=82*8=163*8=244*8=325*8=406*8=487*8=568*8=64

 

6.在頁面顯示出來的是從0開始算起,所以需要修改下i和k等於1;i和k<=9.

for (var k=1;k<=9;k++){
   for (var i=1;i<=9;i++){
        document.write(i+"*"+k+"="+i*k);
    }
        document.write("<br />");
 }

效果圖:

1*1=12*1=23*1=34*1=45*1=56*1=67*1=78*1=89*1=9

1*2=22*2=43*2=64*2=85*2=106*2=127*2=148*2=169*2=18

1*3=32*3=63*3=94*3=125*3=156*3=187*3=218*3=249*3=27

1*4=42*4=83*4=124*4=165*4=206*4=247*4=288*4=329*4=36

1*5=52*5=103*5=154*5=205*5=256*5=307*5=358*5=409*5=45

1*6=62*6=123*6=184*6=245*6=306*6=367*6=428*6=489*6=54

1*7=72*7=143*7=214*7=285*7=356*7=427*7=498*7=569*7=63

1*8=82*8=163*8=244*8=325*8=406*8=487*8=568*8=649*8=72

1*9=92*9=183*9=274*9=365*9=456*9=547*9=638*9=729*9=81

 

7.i與k對調位置的效果:

  for (var k=1;k<=9;k++){
     for (var i=1;i<=9;i++){
           document.write(k+"*"+i+"="+i*k);
     }
           document.write("<br />");
  }

效果圖:

1*1=11*2=21*3=31*4=41*5=51*6=61*7=71*8=81*9=9

2*1=22*2=42*3=62*4=82*5=102*6=122*7=142*8=162*9=18

3*1=33*2=63*3=93*4=123*5=153*6=183*7=213*8=243*9=27

4*1=44*2=84*3=124*4=164*5=204*6=244*7=284*8=324*9=36

5*1=55*2=105*3=155*4=205*5=255*6=305*7=355*8=405*9=45

6*1=66*2=126*3=186*4=246*5=306*6=366*7=426*8=486*9=54

7*1=77*2=147*3=217*4=287*5=357*6=427*7=497*8=567*9=63

8*1=88*2=168*3=248*4=328*5=408*6=488*7=568*8=648*9=72

9*1=99*2=189*3=279*4=369*5=459*6=549*7=639*8=729*9=81

 

 

8.由於需求是要乘法口訣表,而不是九行九列,所以需要修改下。將i<=9改為i<=k;使得

第一行顯示一個,第二行顯示二個,第三行顯示三個,以此類推到第九行顯示九個

 

for (var k=1;k<=9;k++){
            for (var i=1;i<=9;i++){
                document.write(k+"*"+i+"="+i*k);
            }
            document.write("<br />");
        }
  改為:for (var k=1;k<=9;k++){
            for (var i=1;i<=k;i++){
                document.write(k+"*"+i+"="+i*k);
            }
            document.write("<br />");
        }

 

效果圖:

1*1=1

2*1=22*2=4

3*1=33*2=63*3=9

4*1=44*2=84*3=124*4=16

5*1=55*2=105*3=155*4=205*5=25

6*1=66*2=126*3=186*4=246*5=306*6=36

7*1=77*2=147*3=217*4=287*5=357*6=427*7=49

8*1=88*2=168*3=248*4=328*5=408*6=488*7=568*8=64

9*1=99*2=189*3=279*4=369*5=459*6=549*7=639*8=729*9=81

 

 總結:

for (var k=1;k<=9;k++){

            //var k=1;定義變數並初始化,這個是用於控制行數的,從1開始算起

            //k<=9;當k小於9或者k=9時,將不再執行,這是給定一個條件,滿足這個條件就執行,不滿足則跳出迴圈

            //k++;計數器,用於迴圈

            //for(var k=1;k<=9;k++)的迴圈體是for (var i=1;i<=k;i++){for(var i=1;i<=9;i++){document.write(k+"*"+i+"="+i*k);}document.write("<br />");}

            for (var i=1;i<=k;i++){

                //var i=1;定義變數並初始化,這個是用與控制每一行有多少個,從1開始算起

                //將i<=9改為i<=k;使得第一行顯示一個,第二行顯示二個,第三行顯示三個,以此類推到第九行顯示九個

                //i++;計數器,用於迴圈條件

                document.write(k+"*"+i+"="+i*k);//迴圈體

                //當i<=9;i++;這個條件滿足才執行,否則跳出迴圈不再執行

                // i取自自身for的i,(取自控制每一行有幾個9*9=81這個for)

                // k取自上邊for的k,(取自用於控制行數的for)

                // + 加號代表的是字元串的拼接

                //如果需要將左邊的都顯示的是1*1=1,1*2=2這種的話,只需要將i*k改個位置,改為k*i就可以了

            }

            document.write("<br />");

        }

 

 

拓展:理解了乘法口訣表的思路之後,可以理解用表格寫出乘法口訣表

用document.write("<table border='1' cellpadding='0' cellspacing='0'>");

   document.write("<tr>");

     document.write("<td>");

     document.write("</td>");

  document.write("</tr>");

document.write("</table>") ;做出來

 

參考思路:

    //創建一個表格
        document.write("<table border='1' cellpadding='0' cellspacing='0'>");//表格的開始標簽
        for (var i=1;i<=9;i++){//控制行數
            document.write("<tr>");//表格有多少行(開始標簽)
            for (var j=1;j<=i;j++){//控制格數
                document.write("<td>");//表格有多少列
                document.write(j+"*"+i+"="+i*j);//這個步驟與乘法口訣表相似
                document.write("</td>");//結束標簽
            }
            document.write("</tr>");//結束標簽
        }
        document.write("</table>") ;//表格的結束標簽

 

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • website相當於map的名字 google相當於map website中的key,"www.google.com"是key google的value ...
  • select切換資料庫 dbsize查看當前資料庫的key數量 keys查看所有的key flushdb刪除當前庫所有的key flushall刪除所有庫所有的key redis索引都是從0開始 預設埠是6379 ...
  • 目錄 前言 1. Redis 資料庫結構 2. RDB 持久化 2.1. RDB 的創建和載入 2.1.1. 手動觸發保存 SAVE 命令 BGSAVE 命令 SAVE 和 BGSAVE 的比較 2.1.2. 自動觸發保存 2.1.3. 啟動自動載入 2.2. RDB 的文件結構 2.2.1. 存儲 ...
  • 1.備份 mysqldump -u root -h 127.0.0.1 -p --set-gtid-purged=OFF abc > /data/mysqlBak/abc_20200206.sql 2.恢復 將備份的資料庫恢復到新的資料庫abc-2 1)需要創建資料庫abc-2 mysql -u r ...
  • 錯誤1:* What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallExc ...
  • 一、過渡模塊的連寫 1.過渡連寫格式: 過渡屬性 過渡時長 運動速度 延遲時間; 2.過渡連寫註意點: (1)和分開寫一樣,如果想要多個屬性添加過渡效果,也是使用逗號來隔開即可。 (2)連寫的時候可以省略後面的兩個參數,因為只要編寫了前面的兩個參數就已經滿足了過渡的三要素。 (3)如果多個屬性運動的 ...
  • 1.HTML介紹 超文本標記語言(HyperText Markup Language,簡稱:HTML)是一種用於創建網頁的標準標記語言。 在Eclipse下則可以使用自帶的瀏覽器瀏覽html: 2.HTML常用元素標簽 <head> 標簽用於定義文檔的頭部 把 <head> 標簽放在文檔的開始處,緊 ...
  • js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: b ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...