主頁 > 企業開發 > JS筆記之第二天

JS筆記之第二天

2020-10-03 04:32:57 企業開發

一元運算子:++  --

分為前++和后++ 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>") ;//表格的結束標簽

 

 

 

 

 

代碼不是用來看的,拿起手盡情的敲吧!

(大佬們,有錯的話請指出來方便我改進)

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/150286.html

標籤:JavaScript

上一篇:JS DOM屬性,包括固有屬性和自定義屬性,以及屬性獲取、移除和設定

下一篇:JS事件系結的三種方式比較

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了!

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下面,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實作代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中,有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子: 1、可選鏈運算子(optional chaining operator) ?.是可選鏈運算子(optional chaining operator)。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位,它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思,中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px,即默認情況下: 1rem = 16px rem布局原理:根據CSS媒體查詢功能,更改根標簽的字體尺寸,實作rem單位隨螢屏尺寸的變化,如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標:計算屬性是如何實作的?計算屬性快取原理以及洋蔥模型的應用?在初始化Vue實體時,我們會給每個計算屬性都創建一個對應watcher,我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more