整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
第一節課的時候，我們學過：
var a=1; //聲明變量
if(a%2==0){
console.log(a);
}
a=2;
if(a%2==0){
console.log(a);
}
a=3;
if(a%2==0){
console.log(a);
}
a=4;
if(a%2==0){
console.log(a);
}
。。
a=10
if(a%2==0){
console.log(a);
}
這是打印10以內的偶數。
在這個例子的下面，還有幾行語句可以達到相同的效果，但是要精簡很多。
for(var i=1;i<=10;i++)
{
if(i%2==0)
{
console.log(i);
}
}
這個for語句就是Javascript的循環語句。
for語句的語法是這樣的：
for(初始化語句;條件語句;迭代操作)
{
//語句
}
在上面的例子中，就是：
var i=1 這是初始化語句，聲明了一個i的變量，數值是1
i<=10 條件是i小于等于10
i++ 就是每次執行循環，i的值自動加1，進行迭代操作。
下面是例子1：
var count;
for(count=0;count<=10;count=count+1)
{
console.log("Count的值是"+count);
}
另外，還有幾種循環語句，這里也一并介紹一下
1、while語句
他的語法是：
while(條件)
{
//執行語句
}
同樣是執行打印1到10的值，while是這樣的（例子2）：
var count=0;
while(count<=10)
{
console.log("Count的值是"+count);
count=count+1; //這個地方是必須的，否則count一直為0，就會進入死循環
}
2、do..while語句
它的語法是：
do {
//執行語句
}while(條件)
同樣打印1到10的值（例子3）：
var count=0;
do {
console.log("Count的值是"+count);
count=count+1; //這個地方是必須的，否則count一直為0，就會進入死循環
}while(count<=10);
最后一個例子是綜合第三節的if語句，來一個稍微復雜的應用。
我們來求一下所有的“水仙花”數。
在百度百科里面，水仙花數的定義是這樣的：
水仙花數（Narcissistic number）也被稱為超完全數字不變數（pluperfect digital invariant, PPDI）、自戀數、自冪數、阿姆斯壯數或阿姆斯特朗數（Armstrong number），
水仙花數是指一個 3 位數，它的每個位上的數字的 3次冪之和等于它本身（例如：1^3 + 5^3+ 3^3 = 153）。
下面是具體的例子（例子4）：
var i;
var j;
var k;
for(var i=1;i<=9;i++){
for(j=1;j<9;j++){
for(k=1;k<9;k++){
var real_number=i*100+j*10+k;
if(i*i*i+j*j*j+k*K*k==real_number){
console("發現水仙花數："+real_number);
}
}
}}
今天就到這里。
avaScript入門教程之循環語句
循環語句從字面意思理解就是重復執行，能夠讓計算機按照程序員要求重復執行某種操作的能力是所有程序設計語言所必須具備的基本能力。在JavaScript程序設計語言中同樣具有循環語句，實現程序代碼段的重復執行，本文主要從while語句與for語句兩種循環類型方面對循環語句進行說明。
JavaScript為前端程序設計人員提供了三類基本循環控制語句，分別為while語句、do-while 語句與for語句。通過這三種語句程序設計人員可以控制程序重復執行某一操作或者操作的組合。JavaScript基本循環語句執行流程描述如下圖所示：
JavaScript基本循環流程圖
通過上圖我們可知，作為循環控制語句需要提供循環執行的入口、循環體與執行大的出口三部分。其中出口至關重要，出口為結束循環的條件，如果設置不好，程序將一直重復執行，并進入死循環狀態。入口我們可以理解為初始條件。出口主要通過判斷條件控制，在上圖中當判斷條件返回值為F時，結束并退出循環。以下我們將分別介紹前文提出的三種類型循環。
在很多程序設計語言基礎教程中一般沒有把do...while放到整個循環語句最前面進行介紹，主要原因在于與while相比較使用的頻率相對較低，而且過多介紹可能讓初學者對兩者學習記憶產生混淆。此處我們首先介紹do...while 循環，首先我們給出其工作的流程及原理說明。
do...while執行流程
do...while 循環執行過程描述如上圖所示，當開始執行循環控制時，首先執行一次循環體，執行完成進行條件判斷，成立繼續進入循環體執行，否則結束循環。因此可知無論如何都會執行循環體一次。這也是do..while與while語句最大的區別。do...while 語法結構與應用實例如下：
語法說明及示例
基本語法與測試案例如上所示，執行完之后可以得到1-100之間奇數的和，其和為2500。chrome瀏覽器測試結果如下：
求和計算結果
理解了do...while循環結構之后，再去理解while相對容易，while語句程序執行流程描述如下圖所示：
while語句執行流程
while語句執行流程與循環控制基本流程完全一致，首先判斷條件，條件成立進入循環體，執行完再判斷，直到條件不成立結束循環。while循環語法與示例說明如下：
語法說明及示例
for循環同樣可以完成循環流程控制功能，其工作過程與原理基本與while一致，只是其語法相對其他兩種較為復雜一點。需要通過三個表達式控制循環，三個表達式分別為初始值、判斷表達式、增長值。for循環基本語法與應用示例如下所示：
語法說明及示例
以上針對JavaScript程序設計語言流程控制中的循環操作功能進行了分析與說明，三種控制語句異同也做了解釋，并通過示例編寫了簡單程序進行測試。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。更多程序設計相關教程及實例分享，期待大家關注與閱讀！JavaScript基礎教程系列教程鏈接如下：
JavaScript基礎教程（五）流程控制之條件語句
JavaScript基礎教程（四）二進制位運算
JavaScript基礎教程（三）64位浮點數加法運算
JavaScript基礎教程（二）變量、常量與運算符
前端開發來說，通過動畫來提升交互效果是很常見的。在很早以前，做web動畫主要通過javascript或者jquery或者flash這樣的手段，非常麻煩，自打有了ccs3，做動畫就太方便了，只需幾行css代碼就可以搞定。
這里我們就演示一個常見的循環滾動效果，任務是這樣：先準備一個圖片，平鋪到頁面上充滿整個屏幕，然后就讓畫面一直向上循環滾動，形成無邊無際的感覺。
雖然可以從網上搜到一些類似的代碼，但是魚龍混雜，無關緊要的代碼非常多，不夠純粹。如果要弄明白動畫的原理，只有自己動手做一遍才能真正消化吃透。所以我們來一步步原創這個代碼，排除所有不必要的基礎樣式，只說要點，3個步驟你就可以完全掌握其精髓！
第一步：布局
首先，滾動的圖片需要放在一個容器里，一行html代碼即可完成：
第二步：把圖片放進容器
css中body的邊界設為0，把容器設高度100%以充滿屏幕，再調用背景圖pic.png
第三部：讓畫面動起來
咱不做標題黨，循環滾動靠的就是3行css動起來的。
先是1行 -webkit-animation屬性：4個參數分別表示：動畫名稱scroll，1秒時長，移動速度為線性的，無限循環。
然后是對應的關鍵幀 @-webkit-keyframes 屬性，這是自己定義的動畫規則，只需寫2行規則即可：
原理：動畫就是畫從一個地方動到另一個地方。對普通滾動效果來說，有起點和終點這兩個節點的位置就夠了。所以我們用0%和100%分別表示起點和終點，指定2個背景圖的xy位置坐標即可。圖片會在規定時間內從起點移動到終點，并循環下去，數值是負表示是向上移動。320px正好是圖片的高度，這樣循環的時候是無縫銜接的。
好了，最終完整的代碼如下，是不是很精練呢？保存成 index.html 即可
代碼寫完了，還要記得在當前目錄要有pic.png這個圖片哦，我隨便畫了幾筆，絕無觀賞性，建議自己找個好看點的圖片來代替。
現在用瀏覽器打開index.html即可看到效果，比較魔性的地方在于，如果你盯著看久了，關閉窗口以后會出現幻覺，仿佛整個顯示器都在向上飛，哈哈！
最后我們來說說瀏覽器兼容性問題：
大家可能注意到了，前面那2個古怪的 -webkit-animation, @-webkit-keyframes 這里的-webkit-其實是一個前綴，animation和@keyframes才是CSS的標準屬性。
當加上-webkit-后，就形成了一個針對特殊瀏覽器的專有屬性，表示用在谷歌的chrome和蘋果的safari瀏覽器上。此外還有-moz前綴代表針對firefox瀏覽器的私有屬性。
所以我們在用到css3的一些特性的時候，經常使用一大堆的重復性的代碼，比如我們今天的這個代碼，有人會寫成這個樣子：
一個簡單的動畫就要寫這么多冗余的代碼，為的只是支持一些舊的瀏覽器，有必要嗎？為什么在這個例子中我們僅僅采用了-webkit-而沒有使用其它專有屬性呢？
因為現在已經是2019年了！谷歌蘋果的瀏覽器是主流，占據了絕大部分，而其它小眾瀏覽器也大多能夠兼容他們，在版本上，大部分人安裝瀏覽器是直接下載新版本安裝使用，而非找出家里陳年的老軟盤、老光盤去安裝，家中的老電腦也早已升級不知多少回了，所以也幾乎沒有機會使用低版本的瀏覽器了！
至于微軟的IE，就更別提了，IE9以前不支持動畫的，只能用js或者jquery來寫動畫，直到IE10才支持css動畫，隨后IE被放棄，主推Edge，搞了幾天越來越頭大干脆也放棄，現在直接使用chrome內核了，所以針對ie的兼容性除非有特殊要求已經無需考慮。
你在網上能看到的范例代碼，如果有寫成那么復雜臃腫的，估計也都是3-5年前發的老文，或者抄來抄去不做思考的搬磚工留下的“初學者”筆記。
我們不仿測試一下幾款主流瀏覽器的情況看看，結論：
測試結果表明，-webkit-的寫法在4款不同內核的瀏覽器上都能正常使用，所以我們的代碼因此能得以簡化。
當然，這個例子也有局限性，比如你看，只有蘋果safari不支持標準寫法，萬一將來他改邪歸正了呢？畢竟標準寫法才是眾望所歸不是？使用針對個別瀏覽器的私有屬性寫法，雖可用但畢竟有些怪怪的，將來怎么樣還很難說呢。這樣看來，如果使用古老的處理辦法，重復N次為每個專屬瀏覽器各寫一份代碼，除了辣眼睛也真沒什么錯。
瀏覽器的兼容問題涉及面實在是非常廣，三言兩語還真說不完，以后會專門來講。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
