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