整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、遇問題：
產品說：“最近需要弄個活動發到朋友圈中，我把設計圖發給你”
產品說：“有6張設計圖，我要上下滑動翻頁，都要放在一個頁面中啊，還有里面圖片要能動！要炫酷！，在加一個背景音樂哦”
我（吊炸天，炫酷的，真是折磨人）：“好”
產品：“加油！”
經理：“+1”
老板：“+1”
二、解決思路：
1.要炫酷，要花里胡哨，自己寫估計要耗電時間，算了，找插件吧
2.滑動翻頁：為了保證用戶體驗，不會再去加載下一頁，自己放到一個頁面，所以每個頁面放到一個DIV中，通過滑動來顯示指定DIV
2.動畫效果:自己使用CSS插件：animate
三、偽代碼
HTML
<div class="swiper-container" id="swiper-container-v"> <section class="poster_wrap load" id="load"> <div class="p_loading"> <div class="p_loading_logo"></div> <p class="p_loading_tip">加載頁</p> </div> </section> <div class="swiper-wrapper"> <!-------------slide1-----------------> <section class="swiper-slide swiper-slide1 swiper-slide-v"> <div class="index-top ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s"> <h1>這是第一頁</h1> </div> </section> <!-------------slide2-----------------> <section class="swiper-slide swiper-slide2 swiper-slide-v"> <h1 class="posit_tit"><i class="about_us_tit_ico"></i>這是第二頁</h1> <div class="swiper-container ani" id="swiper-container-h" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s"> <div class="swiper-wrapper"> <div class="swiper-slide slide1"> <div class="posit_details_head"> <h3 class="posit_details_tit">第二頁中的第1頁</h3> </div> <div class="job_details"> <span class="job_address">page1</span> </div> </div> <div class="swiper-slide slide2"> <div class="posit_details_head"> <h3 class="posit_details_tit">第二頁中的第2頁</h3> </div> <div class="job_details"> <span class="job_address">page2</span> </div> </div> <div class="swiper-slide slide3"> <div class="posit_details_head"> <h3 class="posit_details_tit">第二頁中的第3頁</h3> </div> <div class="job_details"> <span class="job_address">page3</span> </div> </div> </div> </div> </section> </div> <!--向上箭頭--> <div class="arrow-box"> <img src="images/arrow.png" id="array"> </div> </div>
四、解析
使用到的是swiper插件做滑動翻頁，一般做活動廣告宣傳發到朋友圈，簡單上手，有炫酷。
五、地址
[演示地址](http://47.105.36.188:3030/toutiao/Swiper上下滑動翻頁面帶背景音樂/index.html)
[源代碼下載](https://github.com/harryluo163/toutiao/tree/master/Swiper上下滑動翻頁面帶背景音樂)
般商業網站都有一個語言的需求，就是為了照顧使用正體中文的國人，會特地提供一個切換到正體中文的選項（或曰“繁體中文”）。傳統做法是在服務端完成的，即通過某些控件或者過濾器轉換文本語言。這里筆者介紹一種簡單可行的方法，不是在服務端而是利用前端的 JavaScript 就可以切換正體中文。
由于頁面假設設定均使用 Unicode 字符集，于是一般不用考慮 GB2312/BIG5 字符集問題，偉大的 Unicode 字符集已經涵蓋了繁體字的字符了（UTF-8 編碼）。
怎么在頁面調用這個功能呢？很簡單，首先引入下面 Js（注意還依賴 Function.prototype.delegate()， 下面會提及）：
;(function(){
var 簡化中文 = '啊阿埃挨哎唉哀皚癌藹矮艾礙愛隘鞍氨安俺按暗岸胺案骯昂盎凹敖熬翱襖傲奧懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙壩霸罷爸白柏百擺佰敗拜稗斑班搬扳般頒板版扮拌伴瓣半辦絆邦幫梆榜膀綁棒磅蚌鎊傍謗苞胞包褒剝薄雹保堡飽寶抱報暴豹鮑爆杯碑悲卑北輩背貝鋇倍狽備憊焙被奔苯本笨崩繃甭泵蹦迸逼鼻比鄙筆彼碧蓖蔽畢斃毖幣庇痹閉敝弊必辟壁臂避陛鞭邊編貶扁便變卞辨辯辮遍標彪膘表鱉憋別癟彬斌瀕濱賓擯兵冰柄丙秉餅炳病并玻菠播撥缽波博勃搏鉑箔伯帛舶脖膊渤泊駁捕卜哺補埠不布步簿部怖擦猜裁材才財睬踩采彩菜蔡餐參蠶殘慚慘燦蒼艙倉滄藏操糙槽曹草廁策側冊測層蹭插叉茬茶查碴搽察岔差詫拆柴豺攙摻蟬饞讒纏鏟產闡顫昌猖場嘗常長償腸廠敞暢唱倡超抄鈔朝嘲潮巢吵炒車扯撤掣徹澈郴臣辰塵晨忱沉陳趁襯撐稱城橙成呈乘程懲澄誠承逞騁秤吃癡持匙池遲弛馳恥齒侈尺赤翅斥熾充沖沖蟲崇寵抽酬疇躊稠愁籌仇綢瞅丑臭初出櫥廚躇鋤雛滁除楚礎儲矗搐觸處揣川穿椽傳船喘串瘡窗幢床闖創吹炊捶錘垂春椿醇唇淳純蠢戳綽疵茨磁雌辭慈瓷詞此刺賜次聰蔥囪匆從叢湊粗醋簇促躥篡竄摧崔催脆瘁粹淬翠村存寸磋撮搓措挫錯搭達答瘩打大呆歹傣戴帶殆代貸袋待逮怠耽擔丹單鄲撣膽旦氮但憚淡誕彈蛋當擋黨蕩檔刀搗蹈倒島禱導到稻悼道盜德得的蹬燈登等瞪凳鄧堤低滴迪敵笛狄滌翟嫡抵底地蒂第帝弟遞締顛掂滇碘點典靛墊電佃甸店惦奠淀殿碉叼雕凋刁掉吊釣調跌爹碟蝶迭諜疊丁盯叮釘頂鼎錠定訂丟東冬董懂動棟侗恫凍洞兜抖斗陡豆逗痘都督毒犢獨讀堵睹賭杜鍍肚度渡妒端短鍛段斷緞堆兌隊對墩噸蹲敦頓囤鈍盾遁掇哆多奪垛躲朵跺舵剁惰墮蛾峨鵝俄額訛娥惡厄扼遏鄂餓恩而兒耳爾餌洱二貳發罰筏伐乏閥法琺藩帆番翻樊礬釩繁凡煩反返范販犯飯泛坊芳方肪房防妨仿訪紡放菲非啡飛肥匪誹吠肺廢沸費芬酚吩氛分紛墳焚汾粉奮份忿憤糞豐封楓蜂峰鋒風瘋烽逢馮縫諷奉鳳佛否夫敷膚孵扶拂輻幅氟符伏俘服浮涪福袱弗甫撫輔俯釜斧脯腑府腐赴副覆賦復傅付阜父腹負富訃附婦縛咐噶嘎該改概鈣蓋溉干甘桿柑竿肝趕感稈敢贛岡剛鋼缸肛綱崗港杠篙皋高膏羔糕搞鎬稿告哥歌擱戈鴿胳疙割革葛格蛤閣隔鉻個各給根跟耕更庚羹埂耿梗工攻功恭龔供躬公宮弓鞏汞拱貢共鉤勾溝茍狗垢構購夠辜菇咕箍估沽孤姑鼓古蠱骨谷股故顧固雇刮瓜剮寡掛褂乖拐怪棺關官冠觀管館罐慣灌貫光廣逛瑰規圭硅歸龜閨軌鬼詭癸桂柜跪貴劊輥滾棍鍋郭國果裹過哈骸孩海氦亥害駭酣憨邯韓含涵寒函喊罕翰撼捍旱憾悍焊汗漢夯杭航壕嚎豪毫郝好耗號浩呵喝荷菏核禾和何合盒貉閡河涸赫褐鶴賀嘿黑痕很狠恨哼亨橫衡恒轟哄烘虹鴻洪宏弘紅喉侯猴吼厚候后呼乎忽瑚壺葫胡蝴狐糊湖弧虎唬護互滬戶花嘩華猾滑畫劃化話槐徊懷淮壞歡環桓還緩換患喚瘓豢煥渙宦幻荒慌黃磺蝗簧皇凰惶煌晃幌恍謊灰揮輝徽恢蛔回毀悔慧卉惠晦賄穢會燴匯諱誨繪葷昏婚魂渾混豁活伙火獲或惑霍貨禍擊圾基機畸稽積箕肌饑跡激譏雞姬績緝吉極棘輯籍集及急疾汲即嫉級擠幾脊己薊技冀季伎祭劑悸濟寄寂計記既忌際妓繼紀嘉枷夾佳家加莢頰賈甲鉀假稼價架駕嫁殲監堅尖箋間煎兼肩艱奸緘繭檢柬堿鹼揀撿簡儉剪減薦檻鑒踐賤見鍵箭件健艦劍餞漸濺澗建僵姜將漿江疆蔣槳獎講匠醬降蕉椒礁焦膠交郊澆驕嬌嚼攪鉸矯僥腳狡角餃繳絞剿教酵轎較叫窖揭接皆秸街階截劫節莖睛晶鯨京驚精粳經井警景頸靜境敬鏡徑痙靖竟競凈炯窘揪究糾玖韭久灸九酒廄救舊臼舅咎就疚鞠拘狙疽居駒菊局咀矩舉沮聚拒據巨具距踞鋸俱句懼炬劇捐鵑娟倦眷卷絹撅攫抉掘倔爵桔杰捷睫竭潔結解姐戒藉芥界借介疥誡屆巾筋斤金今津襟緊錦僅謹進靳晉禁近燼浸盡勁荊兢覺決訣絕均菌鈞軍君峻俊竣浚郡駿喀咖卡咯開揩楷凱慨刊堪勘坎砍看康慷糠扛抗亢炕考拷烤靠坷苛柯棵磕顆科殼咳可渴克刻客課肯啃墾懇坑吭空恐孔控摳口扣寇枯哭窟苦酷庫褲夸垮挎跨胯塊筷儈快寬款匡筐狂框礦眶曠況虧盔巋窺葵奎魁傀饋愧潰坤昆捆困括擴廓闊垃拉喇蠟臘辣啦萊來賴藍婪欄攔籃闌蘭瀾讕攬覽懶纜爛濫瑯榔狼廊郎朗浪撈勞牢老佬姥酪烙澇勒樂雷鐳蕾磊累儡壘擂肋類淚棱楞冷厘梨犁黎籬貍離漓理李里鯉禮莉荔吏栗麗厲勵礫歷利傈例俐痢立粒瀝隸力璃哩倆聯蓮連鐮廉憐漣簾斂臉鏈戀煉練糧涼梁粱良兩輛量晾亮諒撩聊僚療燎寥遼潦了撂鐐廖料列裂烈劣獵琳林磷霖臨鄰鱗淋凜賃吝拎玲菱零齡鈴伶羚凌靈陵嶺領另令溜琉榴硫餾留劉瘤流柳六龍聾嚨籠窿隆壟攏隴樓婁摟簍漏陋蘆盧顱廬爐擄鹵虜魯麓碌露路賂鹿潞祿錄陸戮驢呂鋁侶旅履屢縷慮氯律率濾綠巒攣孿灤卵亂掠略掄輪倫侖淪綸論蘿螺羅邏鑼籮騾裸落洛駱絡媽麻瑪碼螞馬罵嘛嗎埋買麥賣邁脈瞞饅蠻滿蔓曼慢漫謾芒茫盲氓忙莽貓茅錨毛矛鉚卯茂冒帽貌貿么玫枚梅酶霉煤沒眉媒鎂每美昧寐妹媚門悶們萌蒙檬盟錳猛夢孟瞇醚靡糜迷謎彌米秘覓泌蜜密冪棉眠綿冕免勉娩緬面苗描瞄藐秒渺廟妙蔑滅民抿皿敏憫閩明螟鳴銘名命謬摸摹蘑模膜磨摩魔抹末莫墨默沫漠寞陌謀牟某拇牡畝姆母墓暮幕募慕木目睦牧穆拿哪吶鈉那娜納氖乃奶耐奈南男難囊撓腦惱鬧淖呢餒內嫩能妮霓倪泥尼擬你匿膩逆溺蔫拈年碾攆捻念娘釀鳥尿捏聶孽嚙鑷鎳涅您檸獰凝寧擰濘牛扭鈕紐膿濃農弄奴努怒女暖虐瘧挪懦糯諾哦歐鷗毆藕嘔偶漚啪趴爬帕怕琶拍排牌徘湃派攀潘盤磐盼畔判叛乓龐旁耪胖拋咆刨炮袍跑泡呸胚培裴賠陪配佩沛噴盆砰抨烹澎彭蓬棚硼篷膨朋鵬捧碰坯砒霹批披劈琵毗啤脾疲皮匹痞僻屁譬篇偏片騙飄漂瓢票撇瞥拼頻貧品聘乒坪蘋萍平憑瓶評屏坡潑頗婆破魄迫粕剖撲鋪仆莆葡菩蒲埔樸圃普浦譜曝瀑期欺棲戚妻七凄漆柒沏其棋奇歧畦崎臍齊旗祈祁騎起豈乞企啟契砌器氣迄棄汽泣訖掐洽牽扦釬鉛千遷簽仟謙乾黔錢鉗前潛遣淺譴塹嵌欠歉槍嗆腔羌墻薔強搶橇鍬敲悄橋瞧喬僑巧鞘撬翹峭俏竅切茄且怯竊欽侵親秦琴勤芹擒禽寢沁青輕氫傾卿清擎晴氰情頃請慶瓊窮秋丘邱球求囚酋泅趨區蛆曲軀屈驅渠取娶齲趣去圈顴權醛泉全痊拳犬券勸缺炔瘸卻鵲榷確雀裙群然燃冉染瓤壤攘嚷讓饒擾繞惹熱壬仁人忍韌任認刃妊紉扔仍日戎茸蓉榮融熔溶容絨冗揉柔肉茹蠕儒孺如辱乳汝入褥軟阮蕊瑞銳閏潤若弱撒灑薩腮鰓塞賽三叁傘散桑嗓喪搔騷掃嫂瑟色澀森僧莎砂殺剎沙紗傻啥煞篩曬珊苫杉山刪煽衫閃陜擅贍膳善汕扇繕墑傷商賞晌上尚裳梢捎稍燒芍勺韶少哨邵紹奢賒蛇舌舍赦攝射懾涉社設砷申呻伸身深娠紳神沈審嬸甚腎慎滲聲生甥牲升繩省盛剩勝圣師失獅施濕詩尸虱十石拾時什食蝕實識史矢使屎駛始式示士世柿事拭誓逝勢是嗜噬適仕侍釋飾氏市恃室視試收手首守壽授售受瘦獸蔬樞梳殊抒輸叔舒淑疏書贖孰熟薯暑曙署蜀黍鼠屬術述樹束戍豎墅庶數漱恕刷耍摔衰甩帥栓拴霜雙爽誰水睡稅吮瞬順舜說碩朔爍斯撕嘶思私司絲死肆寺嗣四伺似飼巳松聳慫頌送宋訟誦搜艘擻嗽蘇酥俗素速粟僳塑溯宿訴肅酸蒜算雖隋隨綏髓碎歲穗遂隧祟孫損筍蓑梭唆縮瑣索鎖所塌他它她塔獺撻蹋踏胎苔抬臺泰酞太態汰坍攤貪癱灘壇檀痰潭譚談坦毯袒碳探嘆炭湯塘搪堂棠膛唐糖倘躺淌趟燙掏濤滔絳萄桃逃淘陶討套特藤騰疼謄梯剔踢銻提題蹄啼體替嚏惕涕剃屜天添填田甜恬舔腆挑條迢眺跳貼鐵帖廳聽烴汀廷停亭庭挺艇通桐酮瞳同銅彤童桶捅筒統痛偷投頭透凸禿突圖徒途涂屠土吐兔湍團推頹腿蛻褪退吞屯臀拖托脫鴕陀馱駝橢妥拓唾挖哇蛙洼娃瓦襪歪外豌彎灣玩頑丸烷完碗挽晚皖惋宛婉萬腕汪王亡枉網往旺望忘妄威巍微危韋違桅圍唯惟為濰維葦萎委偉偽尾緯未蔚味畏胃喂魏位渭謂尉慰衛瘟溫蚊文聞紋吻穩紊問嗡翁甕撾蝸渦窩我斡臥握沃巫嗚鎢烏污誣屋無蕪梧吾吳毋武五捂午舞伍侮塢戊霧晤物勿務悟誤昔熙析西硒矽晰嘻吸錫犧稀息希悉膝夕惜熄烯溪汐犀檄襲席習媳喜銑洗系隙戲細瞎蝦匣霞轄暇峽俠狹下廈夏嚇掀锨先仙鮮纖咸賢銜舷閑涎弦嫌顯險現獻縣腺餡羨憲陷限線相廂鑲香箱襄湘鄉翔祥詳想響享項巷橡像向象蕭硝霄削哮囂銷消宵淆曉小孝校肖嘯笑效楔些歇蝎鞋協挾攜邪斜脅諧寫械卸蟹懈泄瀉謝屑薪芯鋅欣辛新忻心信釁星腥猩惺興刑型形邢行醒幸杏性姓兄兇胸匈洶雄熊休修羞朽嗅銹秀袖繡墟戌需虛噓須徐許蓄酗敘旭序畜恤絮婿緒續軒喧宣懸旋玄選癬眩絢靴薛學穴雪血勛熏循旬詢尋馴巡殉汛訓訊遜迅壓押鴉鴨呀丫芽牙蚜崖衙涯雅啞亞訝焉咽閹煙淹鹽嚴研蜒巖延言顏閻炎沿奄掩眼衍演艷堰燕厭硯雁唁彥焰宴諺驗殃央鴦秧楊揚佯瘍羊洋陽氧仰癢養樣漾邀腰妖瑤搖堯遙窯謠姚咬舀藥要耀椰噎耶爺野冶也頁掖業葉曳腋夜液一壹醫揖銥依伊衣頤夷遺移儀胰疑沂宜姨彝椅蟻倚已乙矣以藝抑易邑屹億役臆逸肄疫亦裔意毅憶義益溢詣議誼譯異翼翌繹茵蔭因殷音陰姻吟銀淫寅飲尹引隱印英櫻嬰鷹應纓瑩螢營熒蠅迎贏盈影穎硬映喲擁傭臃癰庸雍踴蛹詠泳涌永恿勇用幽優悠憂尤由郵鈾猶油游酉有友右佑釉誘又幼迂淤于盂榆虞愚輿余俞逾魚愉渝漁隅予娛雨與嶼禹宇語羽玉域芋郁吁遇喻峪御愈欲獄育譽浴寓裕預豫馭鴛淵冤元垣袁原援轅園員圓猿源緣遠苑愿怨院曰約越躍鑰岳粵月悅閱耘云鄖勻隕允運蘊醞暈韻孕匝砸雜栽哉災宰載再在咱攢暫贊贓臟葬遭糟鑿藻棗早澡蚤躁噪造皂灶燥責擇則澤賊怎增憎曾贈扎喳渣札軋鍘閘眨柵榨咋乍炸詐摘齋宅窄債寨瞻氈詹粘沾盞斬輾嶄展蘸棧占戰站湛綻樟章彰漳張掌漲杖丈帳賬仗脹瘴障招昭找沼趙照罩兆肇召遮折哲蟄轍者鍺蔗這浙珍斟真甄砧臻貞針偵枕疹診震振鎮陣蒸掙睜征猙爭怔整拯正政幀癥鄭證芝枝支吱蜘知肢脂汁之織職直植殖執值侄址指止趾只旨紙志摯擲至致置幟峙制智秩稚質炙痔滯治窒中盅忠鐘衷終種腫重仲眾舟周州洲謅粥軸肘帚咒皺宙晝驟珠株蛛朱豬諸誅逐竹燭煮拄矚囑主著柱助蛀貯鑄筑住注祝駐抓爪拽專磚轉撰賺篆樁莊裝妝撞壯狀椎錐追贅墜綴諄準捉拙卓桌琢茁酌啄著灼濁茲咨資姿滋淄孜紫仔籽滓子自漬字鬃棕蹤宗綜總縱鄒走奏揍租足卒族祖詛阻組鉆纂嘴醉最罪尊遵昨左佐柞做作坐座';
var 正體中文 = '啊阿埃挨哎唉哀皚癌藹矮艾礙愛隘鞍氨安俺按暗岸胺案骯昂盎凹敖熬翺襖傲奧懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙壩霸罷爸白柏百擺佰敗拜稗斑班搬扳般頒板版扮拌伴瓣半辦絆邦幫梆榜膀綁棒磅蚌鎊傍謗苞胞包褒剝薄雹保堡飽寶抱報暴豹鮑爆杯碑悲卑北輩背貝鋇倍狽備憊焙被奔苯本笨崩繃甭泵蹦迸逼鼻比鄙筆彼碧蓖蔽畢斃毖幣庇痹閉敝弊必辟壁臂避陛鞭邊編貶扁便變卞辨辯辮遍標彪膘表鼈憋別癟彬斌瀕濱賓擯兵冰柄丙秉餅炳病並玻菠播撥缽波博勃搏鉑箔伯帛舶脖膊渤泊駁捕蔔哺補埠不布步簿部怖擦猜裁材才財睬踩采彩菜蔡餐參蠶殘慚慘燦蒼艙倉滄藏操糙槽曹草廁策側冊測層蹭插叉茬茶查碴搽察岔差詫拆柴豺攙摻蟬饞讒纏鏟産闡顫昌猖場嘗常長償腸廠敞暢唱倡超抄鈔朝嘲潮巢吵炒車扯撤掣徹澈郴臣辰塵晨忱沈陳趁襯撐稱城橙成呈乘程懲澄誠承逞騁秤吃癡持匙池遲弛馳恥齒侈尺赤翅斥熾充衝沖蟲崇寵抽酬疇躊稠愁籌仇綢瞅醜臭初出櫥廚躇鋤雛滁除楚礎儲矗搐觸處揣川穿椽傳船喘串瘡窗幢床闖創吹炊捶錘垂春椿醇唇淳純蠢戳綽疵茨磁雌辭慈瓷詞此刺賜次聰蔥囪匆從叢湊粗醋簇促躥篡竄摧崔催脆瘁粹淬翠村存寸磋撮搓措挫錯搭達答瘩打大呆歹傣戴帶殆代貸袋待逮怠耽擔丹單鄲撣膽旦氮但憚淡誕彈蛋當擋黨蕩檔刀搗蹈倒島禱導到稻悼道盜德得的蹬燈登等瞪凳鄧堤低滴迪敵笛狄滌翟嫡抵底地蒂第帝弟遞締顛掂滇碘點典靛墊電佃甸店惦奠澱殿碉叼雕凋刁掉吊釣調跌爹碟蝶疊諜疊丁盯叮釘頂鼎錠定訂丟東冬董懂動棟侗恫凍洞兜抖鬥陡豆逗痘都督毒犢獨讀堵睹賭杜鍍肚度渡妒端短鍛段斷緞堆兌隊對墩噸蹲敦頓囤鈍盾遁掇哆多奪垛躲朵跺舵剁惰墮蛾峨鵝俄額訛娥惡厄扼遏鄂餓恩而兒耳爾餌洱二貳發罰筏伐乏閥法琺藩帆番翻樊礬釩繁凡煩反返範販犯飯泛坊芳方肪房防妨仿訪紡放菲非啡飛肥匪誹吠肺廢沸費芬酚吩氛分紛墳焚汾粉奮份忿憤糞豐封楓蜂峰鋒風瘋烽逢馮縫諷奉鳳佛否夫敷膚孵扶拂輻幅氟符伏俘服浮涪福袱弗甫撫輔俯釜斧脯腑府腐赴副覆賦複傅付阜父腹負富訃附婦縛咐噶嘎該改概鈣蓋溉幹甘桿柑竿肝趕感稈敢贛岡剛鋼缸肛綱崗港杠篙臯高膏羔糕搞鎬稿告哥歌擱戈鴿胳疙割革葛格蛤閣隔鉻個各給根跟耕更庚羹埂耿梗工攻功恭龔供躬公宮弓鞏汞拱貢共鈎勾溝茍狗垢構購夠辜菇咕箍估沽孤姑鼓古蠱骨谷股故顧固雇刮瓜剮寡掛褂乖拐怪棺關官冠觀管館罐慣灌貫光廣逛瑰規圭矽歸龜閨軌鬼詭癸桂櫃跪貴劊輥滾棍鍋郭國果裹過哈骸孩海氦亥害駭酣憨邯韓含涵寒函喊罕翰撼捍旱憾悍焊汗漢夯杭航壕嚎豪毫郝好耗號浩呵喝荷菏核禾和何合盒貉閡河涸赫褐鶴賀嘿黑痕很狠恨哼亨橫衡恒轟哄烘虹鴻洪宏弘紅喉侯猴吼厚候後呼乎忽瑚壺葫胡蝴狐糊湖弧虎唬護互滬戶花嘩華猾滑畫劃化話槐徊懷淮壞歡環桓還緩換患喚瘓豢煥渙宦幻荒慌黃磺蝗簧皇凰惶煌晃幌恍謊灰揮輝徽恢蛔回毀悔慧卉惠晦賄穢會燴彙諱誨繪葷昏婚魂渾混豁活夥火獲或惑霍貨禍擊圾基機畸稽積箕肌饑跡激譏雞姬績緝吉極棘輯籍集及急疾汲即嫉級擠幾脊己薊技冀季伎祭劑悸濟寄寂計記既忌際妓繼紀嘉枷夾佳家加莢頰賈甲鉀假稼價架駕嫁殲監堅尖箋間煎兼肩艱奸緘繭檢柬堿鹼揀撿簡儉剪減薦檻鑒踐賤見鍵箭件健艦劍餞漸濺澗建僵姜將漿江疆蔣槳獎講匠醬降蕉椒礁焦膠交郊澆驕嬌嚼攪鉸矯僥腳狡角餃繳絞剿教酵轎較叫窖揭接皆稭街階截劫節莖睛晶鯨京驚精粳經井警景頸靜境敬鏡徑痙靖竟競淨炯窘揪究糾玖韭久灸九酒廄救舊臼舅咎就疚鞠拘狙疽居駒菊局咀矩舉沮聚拒據巨具距踞鋸俱句懼炬劇捐鵑娟倦眷卷絹撅攫抉掘倔爵桔傑捷睫竭潔結解姐戒藉芥界借介疥誡屆巾筋斤金今津襟緊錦僅謹進靳晉禁近燼浸盡勁荊兢覺決訣絕均菌鈞軍君峻俊竣浚郡駿喀咖卡咯開揩楷凱慨刊堪勘坎砍看康慷糠扛抗亢炕考拷烤靠坷苛柯棵磕顆科殼咳可渴克刻客課肯啃墾懇坑吭空恐孔控摳口扣寇枯哭窟苦酷庫褲誇垮挎跨胯塊筷儈快寬款匡筐狂框礦眶曠況虧盔巋窺葵奎魁傀饋愧潰坤昆捆困括擴廓闊垃拉喇蠟臘辣啦萊來賴藍婪欄攔籃闌蘭瀾讕攬覽懶纜爛濫瑯榔狼廊郎朗浪撈勞牢老佬姥酪烙澇勒樂雷鐳蕾磊累儡壘擂肋類淚棱楞冷厘梨犁黎籬貍離漓理李裏鯉禮莉荔吏栗麗厲勵礫曆利傈例俐痢立粒瀝隸力璃哩倆聯蓮連鐮廉憐漣簾斂臉鏈戀煉練糧涼梁粱良兩輛量晾亮諒撩聊僚療燎寥遼潦了撂鐐廖料列裂烈劣獵琳林磷霖臨鄰鱗淋凜賃吝拎玲菱零齡鈴伶羚淩靈陵嶺領另令溜琉榴硫餾留劉瘤流柳六龍聾嚨籠窿隆壟攏隴樓婁摟簍漏陋蘆盧顱廬爐擄鹵虜魯麓碌露路賂鹿潞祿錄陸戮驢呂鋁侶旅履屢縷慮氯律率濾綠巒攣孿灤卵亂掠略掄輪倫侖淪綸論蘿螺羅邏鑼籮騾裸落洛駱絡媽麻瑪碼螞馬罵嘛嗎埋買麥賣邁脈瞞饅蠻滿蔓曼慢漫謾芒茫盲氓忙莽貓茅錨毛矛鉚卯茂冒帽貌貿麼玫枚梅酶黴煤沒眉媒鎂每美昧寐妹媚門悶們萌蒙檬盟錳猛夢孟瞇醚靡糜迷謎彌米秘覓泌蜜密冪棉眠綿冕免勉娩緬面苗描瞄藐秒渺廟妙蔑滅民抿皿敏憫閩明螟鳴銘名命謬摸摹蘑模膜磨摩魔抹末莫墨默沫漠寞陌謀牟某拇牡畝姆母墓暮幕募慕木目睦牧穆拿哪吶鈉那娜納氖乃奶耐奈南男難囊撓腦惱鬧淖呢餒內嫩能妮霓倪泥尼擬你匿膩逆溺蔫拈年碾攆撚念娘釀鳥尿捏聶孽齧鑷鎳涅您檸獰凝甯擰濘牛扭鈕紐膿濃農弄奴努怒女暖虐瘧挪懦糯諾哦歐鷗毆藕嘔偶漚啪趴爬帕怕琶拍排牌徘湃派攀潘盤磐盼畔判叛乓龐旁耪胖拋咆刨炮袍跑泡呸胚培裴賠陪配佩沛噴盆砰抨烹澎彭蓬棚硼篷膨朋鵬捧碰坯砒霹批披劈琵毗啤脾疲皮匹痞僻屁譬篇偏片騙飄漂瓢票撇瞥拼頻貧品聘乒坪蘋萍平憑瓶評屏坡潑頗婆破魄迫粕剖撲鋪仆莆葡菩蒲埔樸圃普浦譜曝瀑期欺棲戚妻七淒漆柒沏其棋奇歧畦崎臍齊旗祈祁騎起豈乞企啓契砌器氣迄棄汽泣訖掐洽牽扡釺鉛千遷簽仟謙乾黔錢鉗前潛遣淺譴塹嵌欠歉槍嗆腔羌牆薔強搶橇鍬敲悄橋瞧喬僑巧鞘撬翹峭俏竅切茄且怯竊欽侵親秦琴勤芹擒禽寢沁青輕氫傾卿清擎晴氰情頃請慶瓊窮秋丘邱球求囚酋泅趨區蛆曲軀屈驅渠取娶齲趣去圈顴權醛泉全痊拳犬券勸缺炔瘸卻鵲榷確雀裙群然燃冉染瓤壤攘嚷讓饒擾繞惹熱壬仁人忍韌任認刃妊紉扔仍日戎茸蓉榮融熔溶容絨冗揉柔肉茹蠕儒孺如辱乳汝入褥軟阮蕊瑞銳閏潤若弱撒灑薩腮鰓塞賽三三傘散桑嗓喪搔騷掃嫂瑟色澀森僧莎砂殺剎沙紗傻啥煞篩曬珊苫杉山刪煽衫閃陝擅贍膳善汕扇繕墑傷商賞晌上尚裳梢捎稍燒芍勺韶少哨邵紹奢賒蛇舌舍赦攝射懾涉社設砷申呻伸身深娠紳神沈審嬸甚腎慎滲聲生甥牲升繩省盛剩勝聖師失獅施濕詩屍虱十石拾時什食蝕實識史矢使屎駛始式示士世柿事拭誓逝勢是嗜噬適仕侍釋飾氏市恃室視試收手首守壽授售受瘦獸蔬樞梳殊抒輸叔舒淑疏書贖孰熟薯暑曙署蜀黍鼠屬術述樹束戍豎墅庶數漱恕刷耍摔衰甩帥栓拴霜雙爽誰水睡稅吮瞬順舜說碩朔爍斯撕嘶思私司絲死肆寺嗣四伺似飼巳松聳慫頌送宋訟誦搜艘擻嗽蘇酥俗素速粟僳塑溯宿訴肅酸蒜算雖隋隨綏髓碎歲穗遂隧祟孫損筍蓑梭唆縮瑣索鎖所塌他它她塔獺撻蹋踏胎苔擡臺泰酞太態汰坍攤貪癱灘壇檀痰潭譚談坦毯袒碳探歎炭湯塘搪堂棠膛唐糖倘躺淌趟燙掏濤滔縧萄桃逃淘陶討套特藤騰疼謄梯剔踢銻提題蹄啼體替嚏惕涕剃屜天添填田甜恬舔腆挑條迢眺跳貼鐵帖廳聽烴汀廷停亭庭挺艇通桐酮瞳同銅彤童桶捅筒統痛偷投頭透凸禿突圖徒途塗屠土吐兔湍團推頹腿蛻褪退吞屯臀拖托脫鴕陀馱駝橢妥拓唾挖哇蛙窪娃瓦襪歪外豌彎灣玩頑丸烷完碗挽晚皖惋宛婉萬腕汪王亡枉網往旺望忘妄威巍微危韋違桅圍唯惟爲濰維葦萎委偉僞尾緯未蔚味畏胃餵魏位渭謂尉慰衛瘟溫蚊文聞紋吻穩紊問嗡翁甕撾蝸渦窩我斡臥握沃巫嗚鎢烏汙誣屋無蕪梧吾吳毋武五捂午舞伍侮塢戊霧晤物勿務悟誤昔熙析西硒矽晰嘻吸錫犧稀息希悉膝夕惜熄烯溪汐犀檄襲席習媳喜銑洗系隙戲細瞎蝦匣霞轄暇峽俠狹下廈夏嚇掀鍁先仙鮮纖鹹賢銜舷閑涎弦嫌顯險現獻縣腺餡羨憲陷限線相廂鑲香箱襄湘鄉翔祥詳想響享項巷橡像向象蕭硝霄削哮囂銷消宵淆曉小孝校肖嘯笑效楔些歇蠍鞋協挾攜邪斜脅諧寫械卸蟹懈泄瀉謝屑薪芯鋅欣辛新忻心信釁星腥猩惺興刑型形邢行醒幸杏性姓兄兇胸匈洶雄熊休修羞朽嗅鏽秀袖繡墟戌需虛噓須徐許蓄酗敘旭序畜恤絮婿緒續軒喧宣懸旋玄選癬眩絢靴薛學穴雪血勳熏循旬詢尋馴巡殉汛訓訊遜迅壓押鴉鴨呀丫芽牙蚜崖衙涯雅啞亞訝焉咽閹煙淹鹽嚴研蜒巖延言顔閻炎沿奄掩眼衍演豔堰燕厭硯雁唁彥焰宴諺驗殃央鴦秧楊揚佯瘍羊洋陽氧仰癢養樣漾邀腰妖瑤搖堯遙窯謠姚咬舀藥要耀椰噎耶爺野冶也頁掖業葉曳腋夜液一壹醫揖銥依伊衣頤夷遺移儀胰疑沂宜姨彜椅蟻倚已乙矣以藝抑易邑屹億役臆逸肄疫亦裔意毅憶義益溢詣議誼譯異翼翌繹茵蔭因殷音陰姻吟銀淫寅飲尹引隱印英櫻嬰鷹應纓瑩螢營熒蠅迎贏盈影穎硬映喲擁傭臃癰庸雍踴蛹詠泳湧永恿勇用幽優悠憂尤由郵鈾猶油遊酉有友右佑釉誘又幼迂淤于盂榆虞愚輿余俞逾魚愉渝漁隅予娛雨與嶼禹宇語羽玉域芋郁籲遇喻峪禦愈欲獄育譽浴寓裕預豫馭鴛淵冤元垣袁原援轅園員圓猿源緣遠苑願怨院曰約越躍鑰嶽粵月悅閱耘雲鄖勻隕允運蘊醞暈韻孕匝砸雜栽哉災宰載再在咱攢暫贊贓髒葬遭糟鑿藻棗早澡蚤躁噪造皂竈燥責擇則澤賊怎增憎曾贈紮喳渣劄軋鍘閘眨柵榨咋乍炸詐摘齋宅窄債寨瞻氈詹粘沾盞斬輾嶄展蘸棧占戰站湛綻樟章彰漳張掌漲杖丈帳賬仗脹瘴障招昭找沼趙照罩兆肇召遮折哲蟄轍者鍺蔗這浙珍斟真甄砧臻貞針偵枕疹診震振鎮陣蒸掙睜征猙爭怔整拯正政幀癥鄭證芝枝支吱蜘知肢脂汁之織職直植殖執值侄址指止趾只旨紙志摯擲至致置幟峙制智秩稚質炙痔滯治窒中盅忠鍾衷終種腫重仲衆舟周州洲謅粥軸肘帚咒皺宙晝驟珠株蛛朱豬諸誅逐竹燭煮拄矚囑主著柱助蛀貯鑄築住注祝駐抓爪拽專磚轉撰賺篆樁莊裝妝撞壯狀椎錐追贅墜綴諄準捉拙卓桌琢茁酌啄著灼濁茲咨資姿滋淄孜紫仔籽滓子自漬字鬃棕蹤宗綜總縱鄒走奏揍租足卒族祖詛阻組鑽纂嘴醉最罪尊遵昨左佐柞做作坐座';
/**
* 默認是否正體中文：true為正體；false簡體。 HTTP
* 頭讀取：Request.ServerVariables("http_accept_language")
*
* @return {Boolean}
*/
function getClientLanguage() {
var s = navigator.userLanguage || navigator.language;
switch (s.toLowerCase()) {
case 'zh-cn':
return false;
case 'zh-tw':
return true;
default:
return null;
}
}
/**
* 轉換對象，使用遞歸，逐層剝到文本
* @param {HTMLElement} obj 從document.body開始，
*/
function translate(el, coverntFn){
el = el.childNodes;
var node;
for (var i = 0, j = el.length; i < j; i++) {
node = el.item(i);
// || (node == $$.big5.el)
if (("||BR|HR|TEXTAREA|".indexOf("|" + node.tagName + "|")) > 0)continue;
if(node.title){
node.title = coverntFn(node.title);
}else if(node.alt){
node.alt = coverntFn(node.alt);
}else if(node.tagName == "INPUT" && node.value != "" && node.type != "text" && node.type != "hidden"){
node.value = coverntFn(node.value);
}else if(node.nodeType == 3){
node.data = coverntFn(node.data);
}else{
arguments.callee(node, coverntFn);
}
}
}
function translateText(text, isBig5) {
var str = [], _char, charIndex, result;
for (var i = 0, j = text.length; i < j; i++) {
_char = text.charAt(i);
charIndex = isBig5 ? 簡化中文.indexOf(_char) : 正體中文.indexOf(_char);
result = isBig5 ? 正體中文.charAt(charIndex) : 簡化中文.charAt(charIndex);
str.push(charIndex != -1 ? result : _char);
}
return str.join('');
}
var traditionalized = translateText.delegate(null, true), simplized = translateText.delegate(null, false);
var cookieName = 'ChineseType';
// 轉換為正體中文（繁體中文）
window.toChinese = function(el) {
el.addCls('selected');
document.querySelector(".simpleChinese").removeCls('selected');
translate(document.body, traditionalized)
Cookie.set(cookieName, true);
}
// 轉換為簡體中文
window.toSimpleChinese = function(el) {
el.addCls('selected');
document.querySelector(".Chinese").removeCls('selected');
translate(document.body, simplized);
Cookie.set(cookieName, false);
}
var Cookie = {
set: function (name, val) {
var exp = new Date();
exp.setDate(exp.getDate() + 600 * 1000);
document.cookie = name + "=" + escape(val) + ";expires=" + exp.toGMTString();
}, del: function (name) {
document.cookie = name + "=;expires=" + (new Date(0)).toGMTString();
}, get: function (name) {
var cookieArray = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (cookieArray != null) return unescape(cookieArray[2]);
else return null;
}
};
var value = Cookie.get(cookieName);
if( value == null && getClientLanguage() || value == 'true') {
// 沒有檢查出 cookie 則為第一次運行。
// cookie保留了用戶選擇的正體，將原來的簡化字轉換為默認的正體！
window.toChinese(document.querySelector(".Chinese"));
} else if(value == null && !getClientLanguage() || value == 'false') {
// 雖然第一次運行，但對方正是簡體中文，不用轉。
// 原來已經是簡體，無須轉換。
}
})();
然后綁定按鈕事件，我們簡單地使用 onclick 綁定來全局函數 window.toChinese(el)、window.toSimpleChinese(el)。el 是按鈕元素。
// 轉換為正體中文（繁體中文）
window.toChinese = function(el) {
el.addCls('selected');
document.querySelector(".simpleChinese").removeCls('selected');
translate(document.body, traditionalized)
Cookie.set(cookieName, true);
}
// 轉換為簡體中文
window.toSimpleChinese = function(el) {
el.addCls('selected');
document.querySelector(".Chinese").removeCls('selected');
translate(document.body, simplized);
Cookie.set(cookieName, false);
}
js 代碼中比較長的兩個字符串變量分別是簡體中文和繁體中文，他們之間的切換沒有什么神奇之處，只是所有文本經過這些變量一一對應即可。當然這里只是常用的繁簡對應，而且是機械的，有些特殊的翻譯需要聯系上下文的，那種高級轉換不在此討論之列。
首先我們看看變量函數 translate，執行它會通過遞歸遍歷完整個 DOM（可以說比較笨的方法）
/**
* 轉換對象，使用遞歸，逐層剝到文本
* @param {HTMLElement} obj 從document.body開始，
*/
function translate(el, coverntFn){
el = el.childNodes;
var node;
for (var i = 0, j = el.length; i < j; i++) {
node = el.item(i);
// || (node == $$.big5.el)
if (("||BR|HR|TEXTAREA|".indexOf("|" + node.tagName + "|")) > 0)continue;
if(node.title){
node.title = coverntFn(node.title);
}else if(node.alt){
node.alt = coverntFn(node.alt);
}else if(node.tagName == "INPUT" && node.value != "" && node.type != "text" && node.type != "hidden"){
node.value = coverntFn(node.value);
}else if(node.nodeType == 3){
node.data = coverntFn(node.data);
}else{
arguments.callee(node, coverntFn);
}
}
}
轉換 DOM 內容，我們第一時間想到的可能是 el.innerHTML，但其實大可不必，而且遞歸的時候 innerHTML 不太方便。不妨再想想看，我們其實只需要對文本轉換即可，DOM API 能夠判斷 文本節點（node.nodeType == 3），然后可讀可寫的 data 屬性就是設置文本的（textNode.data)，由此我們就可以完成到繁體的切換。節點其他屬性 title、alt、value 亦是同樣原理。另外，if (("||BR|HR|TEXTAREA|".indexOf("|" + node.tagName + "|")) > 0)continue; 是排除某些節點的方法，其思路比較特別，可以多觀摩下。
至于 coverntFn 是一函數參數。通過根函數 translateText(text, isBig5) 新生成兩個函數 ：var traditionalized = translateText.delegate(null, true), simplized = translateText.delegate(null, false);
function translateText(text, isBig5) {
var str = [], _char, charIndex, result;
for (var i = 0, j = text.length; i < j; i++) {
_char = text.charAt(i);
charIndex = isBig5 ? 簡化中文.indexOf(_char) : 正體中文.indexOf(_char);
result = isBig5 ? 正體中文.charAt(charIndex) : 簡化中文.charAt(charIndex);
str.push(charIndex != -1 ? result : _char);
}
return str.join('');
}
var traditionalized = translateText.delegate(null, true), simplized = translateText.delegate(null, false);
Function.prototype.delegate() 方法如下。
/**
* 函數委托 參見 http://blog.csdn.net/zhangxin09/article/details/8508128
* @return {Function}
*/
Function.prototype.delegate = function () {
var self = this, scope = this.scope, args = arguments, aLength = arguments.length, fnToken = 'function';
return function(){
var bLength = arguments.length, Length = (aLength > bLength) ? aLength : bLength;
// mission one:
for (var i = 0; i < Length; i++)
if (arguments[i])args[i] = arguments[i]; // 拷貝參數
args.length = Length; // 在 MS jscript下面，arguments作為數字來使用還是有問題，就是length不能自動更新。修正如左:
// mission two:
for (var i = 0, j = args.length; i < j; i++) {
var _arg = args[i];
if (_arg && typeof _arg == fnToken && _arg.late == true)
args[i] = _arg.apply(scope || this, args);
}
return self.apply(scope || this, args);
};
};
繁簡的轉換基本如此了。值得一提的是，瀏覽器其實替我們識別語言環境的變量，主要是 navigator.userLanguage || navigator.language。這個變量在服務端也可以獲取，頭讀取：Request.ServerVariables("http_accept_language")。
/**
* 默認是否正體中文：true為正體；false簡體。 HTTP
* 頭讀取：Request.ServerVariables("http_accept_language")
*
* @return {Boolean}
*/
function getClientLanguage() {
var s = navigator.userLanguage || navigator.language;
switch (s.toLowerCase()) {
case 'zh-cn':
return false;
case 'zh-tw':
return true;
default:
return null;
}
}
最后我們還通過 cookie 來保存語言狀態。
累點滴，匯成江海。咱們從最最基礎的PHP知識開始學習，一步一個腳印的開啟PHP的學習旅途吧。
請點擊右上角“關注”按鈕關注我們喲：跟著木辛老師學習PHP編程知識，變身快樂的編程達人吧~
同學們好呀！木辛老師又來了。
咱們在開始PHP的學習之前，需要先準備一個可以提供PHP服務的Web服務器。我們就復用木辛老師專欄中的一個教程，使用Homestead本地開發環境進行學習唄。
傳送門：《Laravel第一課：搭建Laravel開發環境》
也可以關注木辛老師的Laravel專欄喲：
大家配置好本地開發環境以后，還需要稍微設置一下，針對這個項目，在Homestead配置文件中作如下設置，
添加指向當前項目根目錄的配置：
sites: - map: learning_php.test to: /Code/zyoo/learning_php to: /Code/zyoo/learning_php
另外還需要在本機hosts文件中添加一個域名指向：
sudo vim /etc/hosts
并添加如下記錄：
192.168.10.10 learning_php.test
最后，添加一個測試文件：
php代碼
然后，打開瀏覽器，訪問域名查看頁面結果
執行效果
大家可以看到，我們已經可以成功的訪問到測試用的PHP文件了。
好了，萬事俱備，只需要學習了。那么，咱們開始吧~
幾乎絕大部分服務器端的腳本語言最初設計的應用場景之一就是處理HTML表單。木辛老師要翻出家底，將自己最心愛的在線圖書商城，用來作為學習PHP基礎知識的場景吧。
通過這個表單頁面，我們可以知道顧客訂購的商品，訂單的金額以及其他一些附屬信息。HTML代碼請看下方：
<html> <head> <title>木辛老師的PHP基礎入門教程</title> </head> <body> <form action="processorder.php" method="POST"> <table style="border: 0px;"> <tr style="background: #cccccc"> <td style="width: 150px;text-align:center;">圖書名稱</td> <td style="width: 50px;text-align:center;">數量</td> </tr> <tr> <td>PHP入門指南</td> <td><input type="text" name=“book_name_01" size="3" maxlength="3"/></td> </tr> <tr> <td>PHP和MySQL開發</td> <td><input type="text" name="book_name_02" size="3" maxlength="3"/></td> </tr> <tr> <td>Laravel入門</td> <td><input type="text" name="book_name_03" size="3" maxlength="3"/></td> </tr> <tr> <td colspan="2" style="text-align: center;"> <input type="submit" value="提交訂單"/> </td> </tr> </table> </form> </body> </html>
咱么直接通過瀏覽器訪問這個HTML頁面，看看效果：
頁面顯示
哈，簡單的頁面，我們已經開啟Web開發神秘旅程了。繼續加油！
大家可能注意到了一個細節：在html代碼的form表單部分，action屬性我們指向了一個php腳本：
<form action="processorder.php" method="POST”>
具體的PHP腳本的學習我們很快就能看到。這里只是稍微提一下，這個action屬性值就是用戶點擊“提交訂單”按鈕時將要請求的URL。
用戶在表單中輸入的數據，會以POST的方式，發送給URL指向的PHP文件進行處理。
那如何處理這個表單呢？又如何讓PHP代碼起作用的？
要處理這個表單，我們需要創建一個php文件，它的名字需要和form中action屬性的值保持一致。
那么，我們就創建一個名字叫做processorder.php的文件吧。
代碼可以先這么寫，看看是否能起作用哈：
<html> <head> <title>訂單處理結果</title> </head> <body> <h1> 木辛老師的在線圖書館</h1> <h2> 訂單處理結果通知</h2> <?php echo '<p>訂單已處理完成</p>'; // 這里是PHP的代碼 ?> </body> </html>
保持文件，并刷新頁面。這個時候我們點擊“提交訂單”按鈕，效果如下：
php執行結果
大家可以看到，紅框部分就是通過PHP代碼輸出的結果。這樣，我們就實現了通過Web方式執行了PHP代碼的需求，這么一看PHP還是非常簡單的吧。
我們順便在看看這個頁面的源代碼吧，看一下PHP代碼如何在HTML頁面中完成任務的吧：
源代碼
通過頁面源碼，我們發現剛才寫的PHP代碼已經不見了，取而代之的是
<p>訂單已處理完成</p>
這是怎么回事呢？
這是因為PHP解釋器在腳本運行的時候，將該腳本的輸出替代了腳本自身的代碼，通過這種方式，就可以生成可以在任何瀏覽器上運行的HTML頁面了。也就是說，瀏覽器是不需要學會PHP的。
通過這段代碼，我們可以學習一些PHP的基礎知識：
第一種情況：在HTML中混寫PHP和HTML代碼，需要為php添加標記。PHP代碼會以“<?php”作為開始，以“?>”作為結束。這些符號就叫做PHP標記，它們主要用來告訴服務器PHP代碼的開始和截止，在這兩個起止符號之間的任何代碼，服務器都會以PHP語法來解析。
另一種情況：之后，我們寫純PHP的時候，每個文件也需要添加PHP標記。不過呢，結束標記可以省略，這也是很大一部分PHPer默認遵守的規則。
在PHP的開始和截止標記之間，就是PHP語句了，通過這些內容可以告訴PHP解釋器應該進行如何的操作，在我們這個例子里，通過：
echo '<p>訂單已處理完成</p>’;
使用echo語句完成了一個非常簡單的操作，僅是將echo后邊的字符串原樣打印到瀏覽器中。這里需要特別注意的一點就是每個PHP語句后邊都需要添加英文的分號作為語句的結束符，否則會出現錯誤，但是在這個html頁面中，因為只有一句代碼，忽略掉分號也是不會報錯的。
但是還是強烈建議大家養成習慣：每句PHP代碼結束都要以分號結尾喲！
一般情況下，為了讓代碼更加清晰和整潔，在編碼的過程中會添加一些空格，這些空格包括：回車換行、空格、制表符等都被認為是空格。
當然了，瀏覽器并不會在意你是否輸入了空格，同樣的PHP服務器端解析器也會忽略這些，這些空格僅是給編寫代碼的人看的。
但是，木辛老師還是再次強烈建議，在代碼的適當位置添加空格或者空行，這樣做可以很有效的提升代碼的可閱讀性，方便后期的維護工作。
最后在講講注釋，理論上在編程中出現頻率非常高的一個知識點。
為什么說理論上呢，因為這么重要的一個要點，在實際開發中很容易被廣大開發者忽略呢！
由于種種原因吧，開發者很不習慣在開發過程中寫非常詳盡的注釋，而且有時候在Git提交時也是草草的一筆帶過。這樣做的后果就是，若干時間后，當你再次拿到這段代碼，可能會花費更多的時間梳理它。
所以，善于寫注釋，也是提高生產效率的一種有效手段。
PHP解釋器同樣會在執行的時候忽略掉注釋，也就是說就好比像空格一樣，PHP解析器會跳過注釋，它只負責執行PHP代碼！
PHP腳本中的注釋比較豐富，有很多類似C語言的風格，比如：
多行注釋：
/* 這是 一個 多行 注釋 /*
可以看出來，多行注釋以 /*開始，以*/結束。同樣的和C語言是一樣的，多行注釋是不能嵌套的。
當然了，除了多行注釋之外，也支持單行注釋：
echo '<p>訂單已處理完成</p>'; // 這里是PHP的代碼
或者這種：
echo '<p>訂單已處理完成</p>’; #這里是PHP的代碼
不論采取哪種風格的注釋，在注釋符號之后的所有內容，PHP解釋器都會認識不需要處理的，這一點一定要注意呀！
好了，今天的課程咱就先講到這里。
小朋友們不要忘記關注我們喲 ，下期課程更精彩，請大家一起期待吧~
快樂編程，快樂成長，拜拜！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
