HTML與JS與Jquery

1、HTML浮云原理 （飄浮，釋放空間）盒模型Margin:外邊距Border:邊框Padding:內(nèi)邊距在定義盒子的寬度時(shí)，要考慮到內(nèi)填充，邊框，外邊距浮動(dòng)原理解析 float對(duì)象浮動(dòng)后，它就脫離了當(dāng)前的文檔流，可以理解為漂起來(lái)了，它原來(lái)的地方就空出來(lái)了，它后的內(nèi)容就會(huì)占用它原來(lái)的地方。清除浮動(dòng)當(dāng)元素有浮動(dòng)屬性時(shí)，會(huì)對(duì)其父元素或后面的元素產(chǎn)生影響，會(huì)出現(xiàn)一個(gè)布局錯(cuò)亂現(xiàn)象，可以通過(guò)清除浮動(dòng)的方法來(lái)解決，浮動(dòng)元素的影響。Clear:None:默認(rèn)值，允許兩邊都可以有浮動(dòng)Left:不允許左邊有浮動(dòng)對(duì)象Right:不允許右邊有浮動(dòng)對(duì)象Both:左右兩側(cè)不允許有浮動(dòng)對(duì)象例：定位定位布局，就是可以通過(guò)元素p

2、osition屬性控制元素的位置。當(dāng)我們使用絕對(duì)定位時(shí)，必須要有兩個(gè)條件1必須給父元素加定位屬性，一般建議使用position:relative;2給子元素，加絕對(duì)定位position:absolute；同時(shí)要加方向?qū)傩?。相?duì)定位與絕對(duì)定位的區(qū)別絕對(duì)定位是根據(jù)父元素為基準(zhǔn)點(diǎn)，進(jìn)行定位，-會(huì)脫離文檔離相對(duì)定位是根據(jù)其自身為基準(zhǔn)點(diǎn)，進(jìn)行定位。離開(kāi)原位置，但還點(diǎn)著原來(lái)的位置position屬性( absolute | relative | static | fixed )詳解 什么是文檔流？      將窗體自上而下分成一行行, 并在每行中按從左至右

3、的順序排放元素,即為文檔流。      只有三種情況會(huì)使得元素脫離文檔流，分別是：浮動(dòng)、絕對(duì)定位和相對(duì)定位。靜態(tài)定位(static) ：      static，無(wú)特殊定位，它是html元素默認(rèn)的定位方式，即我們不設(shè)定元素的position屬性時(shí)默認(rèn)的position值就是static，它遵循正常的文檔流對(duì)象，對(duì)象占用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無(wú)效的。相對(duì)定位(relative) ：    &

4、#160; relative定位，又稱為相對(duì)定位，相對(duì)于自身在文檔流的位置發(fā)生偏移。絕對(duì)定位(absoulte) ：       absoulte定位，也稱為絕對(duì)定位，雖然它的名字號(hào)曰“絕對(duì)”，但是它的功能卻更接近于"相對(duì)"一詞，為什么這么講呢？原來(lái)，使用absoult定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進(jìn)行定位，而這個(gè)祖先類還必須是以postion非static方式定位的z-index 跟具體數(shù)字如：divz-index:100注意：z-index的數(shù)值不跟單位。z-index的數(shù)字越高越靠前，并且值必須為整數(shù)和

5、正數(shù)（正數(shù)的整數(shù)）。二、z-index使用條件   -   TOPZ-index在使用絕對(duì)定位 position:absolute屬性條件下使用才能使用。通常我們讓不同的對(duì)象盒子以不同順序重疊排列，我們就是要z-index樣式屬性。三、z-index應(yīng)用案例   -   TOP為了方便觀察z-index樣式屬性，我們?cè)O(shè)置3個(gè)DIV盒子，分別設(shè)置不同css背景顏色，設(shè)置相同CSS高度、CSS寬度。分別設(shè)置背景顏色為黑色、紅色、藍(lán)色。CSS width為100px，css height為50px3、z-index案例截圖CSSCSS概述：css指層疊樣式表C

6、SS樣式表極大地提高了工作效率CSS基礎(chǔ)語(yǔ)法：1 selectorproperty:value例：h1color:red; font-size:14px;屬性大于1個(gè)之后，屬性之間用分號(hào)隔開(kāi)如果值大于1個(gè)單詞，則需要加上引號(hào)：Pfont-family:”sans serif”;1選擇器分組： H1,h2,h3,h4,h5,h6color:red;通配符：* color:red;2繼承：(子標(biāo)簽可繼承父標(biāo)簽的樣式) Bodycolor:green;3派生類選擇器li strongcolor:red;4 id選擇器 1） Id選擇器可以為標(biāo)有id的HTML元素指定特定的樣式Id選擇器以“#”來(lái)定義

7、2）ID選擇器和派生選擇器目前比較常用的方式是ID選擇器常常用于建立派生選擇器。5類選擇器：以一個(gè)點(diǎn)顯示也可以與派生類一起使用。6屬性選擇器對(duì)帶有指定屬性的HTML元素設(shè)置樣式CSS3選擇器1在 CSS3 中，追加了三個(gè)屬性選擇器分別為：att*=val、att=val和att$=val，使得屬性選擇器有了通配符的概念。att*=val：表示包含屬性包含val字符串的都加樣式att=val：表示首字符包含val字符串的加樣式。att$=val：表示結(jié)束字符包含val字符串的加樣式。例css3-1.html2 結(jié)構(gòu)性偽類選擇器p:first-line color:red; /表示p元素的第一行加

8、樣式p:first-lettercolor:blue; /表示p元素的第一字加樣式li:beforecontent:"-" /表示li 元素前加樣式li:aftercontent:"對(duì)列表做一個(gè)解釋" /表示li元素后加樣式 font-size:10px; color:gray; 例css3-2.htmlRoot、empty、notroot 選擇器是綁定到頁(yè)面的根元素中，如果想對(duì)某個(gè)結(jié)構(gòu)元素使用樣式，但是想排除這個(gè)結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，可以使用 not，使用 empty 選擇器來(lái)指定當(dāng)元素中內(nèi)容為空白時(shí)使用的樣式。<style>:root

9、background-color:gray; bodybackground-color:green; /*如果有root樣式時(shí)，body的樣式只對(duì)有內(nèi)容的區(qū)域設(shè)置樣式，如果去掉root,再看效果。*/ div *:not(h2)color:red;:emptybackground-color:blue;/*目標(biāo)元素是div的話*/:targetbackground-color:black;</style>例css3-3.html1選擇器：first-child、last-child、nth-child和nth-last-childfirst-child、last-child、nth

10、-child 和 nth-last-child，利用這幾個(gè)選擇器能夠針對(duì)一個(gè)父元素中的第一個(gè)子元素、最后一個(gè)子元素、指定序號(hào)的子元素，甚至第偶數(shù)個(gè)或第奇數(shù)個(gè)子元素進(jìn)行樣式的指定。li:first-childbackground-color:yellowli:last-childbackground-color:blue; li:nth-child(3)background-color:red; li:nth-last-child(2)background-color:green;li:nth-child(odd)background-color:green; li:nth-last-child

11、(odd)background-color:green; li:nth-child(even)background-color:green;li:nth-last-child(even)background-color:green; 例 1.html;2選擇器：nth-of-type 和 nth-last-of-typenth-of-type 和 nth-last-of-type，使用這兩個(gè)選擇器，可以避免一些問(wèn)題的發(fā)生。使用這兩個(gè)選擇器時(shí)，CSS3在計(jì)算子元素是第奇數(shù)個(gè)子元素還是第偶數(shù)個(gè)子元素時(shí)，就只針對(duì)同類型的子元素進(jìn)行計(jì)算了。h2:nth-child(odd)background-col

12、or:green;h2:nth-of-type(odd)background-color:green; h2:nth-of-type(even)background-color:gray; h2:nth-last-of-type(odd)background-color:green; h2:nth-last-of-type(even)background-color:gray;例2.html3nth-child(n) a*n+b; 其中a表示幾種樣式，b表示元素的位置。例3.html4 Only-child選擇器Only-child選擇器來(lái)代替nth-child和nth-last-child的

13、實(shí)現(xiàn)方法。例4.htmlUI元素狀態(tài)偽類選擇器11CSS3 選擇器 hover、focus、active 和 checked在 CSS3 的選擇器中，除了結(jié)構(gòu)性偽類選擇器外，還有一種UI元素狀態(tài)偽類選擇器，例如 hover、focus、active 和 checked 等<style>inputtype="text":hover /*鼠標(biāo)經(jīng)過(guò)的顏色*/background-color:red;inputtype="text":focus /*獲取焦點(diǎn)的顏色*/background-color:gray;inputtype="text

14、":active /*鼠標(biāo)按下的顏色*/background-color:green;</style>例1.html和2.html2enabled和disabled例3.htmlDisplaydisplay: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ 作者：一絲鏈接：來(lái)源：知乎著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。box例：<!doctype html><html><

15、head><style>.containerwidth:60%;height:600px;background:blue;margin:0 auto;.headerwidth:100%;height:100px;background:gray;.contentwidth:100%;height:400px;background:yellow;display:box;display:-moz-box;/*兼容火狐瀏覽器*/display:-webkit-box;/*兼容谷歌瀏覽器*/.layout_leftwidth:50%;height:100%;background:gre

16、en;.layout_rightwidth:50%;height:100%;background:red;.footerwidth:100%;height:100px;background:#f0f0f0;</style></head><body><div class="container"><div class="header"></div><div class="content"><div class="layout_left&qu

17、ot;>左右兩個(gè)布局的父元素是content，對(duì)父元素使用display:box</div><div class="layout_right">左右兩個(gè)布局的父元素是content，對(duì)父元素使用display:box</div></div><div class="footer"></div></div></body></html>以display:box為基礎(chǔ)的樣式,也就是說(shuō)如果div設(shè)置了display:box，才能使用以下CSS樣式box

18、-flex 使用box-flex的CSS，其父元素必須使用display:box;的樣式     兼容性檢查display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/1

19、7/18, Android 4.4+ */屬性規(guī)定框的子元素是否可伸縮其尺寸。它的值必須大于或等于1，盒子才具有彈性。提示：可伸縮元素能夠隨著框的縮小或擴(kuò)大而縮寫(xiě)或放大。只要框中有多余的空間，可伸縮元素就會(huì)擴(kuò)展來(lái)填充這些空間。例：-moz-box-flex:1; -webkit-box-flex:1;默認(rèn)值：0.0（指示該元素不可伸縮）多個(gè)子元素的彈性空間當(dāng)盒元素內(nèi)部多個(gè) 子元素都定義box-flex屬性時(shí)，子元素的空間彈性是相對(duì)的。瀏覽器將會(huì)把各個(gè)子元素的box-flex屬性值相加得到一個(gè)總值，然后根據(jù)各自的值點(diǎn)總值的比例來(lái)分配盒元素的剩余空間。定義列顯示的順序box-direction&#

20、160;            box 方向 box-flex-group          屬性規(guī)定框中子元素的顯示次序。值更低的元素會(huì)顯示在值更高的元素前面顯示。注釋：分組值相同的元素，它們的顯示次序取決于其源次序。box-lines           box-ordinal-group

21、60;     以組為單位的子元素排列方向box-orient              改變盒子的布局方向Vertical:表示垂直方向排列；Horizontal：表示水平方向排列；使用盒布局時(shí)，元素的大小(包括寬和高)具有自適應(yīng)性，即元素的寬度與高度可以根據(jù)排列方向 改變而改變。對(duì)齊box-align            

22、   box-pack元素的對(duì)齊方式box-pack和box-aign屬性Box-pack和box-align不僅可以使子盒子居中，還可以使子盒子中的元素也居中。需要注意的是要使這個(gè)盒子的屬性設(shè)為display:box例如：box-pack,box-align對(duì)齊.html文件例：（對(duì)齊在左下角）<!doctype html><html><head><style>*margin:0px;padding:0px;border:0px;.containerwidth:800px;height:600px;margin:0

23、 auto;display:box;display:-moz-box;display:-webkit-box;border:1px solid yellow;/水平方向上：對(duì)齊開(kāi)頭;以display:box為基礎(chǔ)box-pack:start;-moz-box-pack:start;-webkit-box-pack:start;/垂直方向上：對(duì)齊結(jié)尾 以display:box為基礎(chǔ)box-align:end;-moz-box-align:end;-webkit-box-align:end;.container imgwidth:196px;height:146px;.container divw

24、idth:196px;height:146px;border:1px solid #DFDFDF;padding:5px;margin:2px;</style></head><body><div class="container"><div class="box1"><img src="image/11.jpg"/></div><div class="box2"><img src="image/33.jp

25、g"/></div><div class="box3"><img src="image/44.jpg"/></div></div></body></html>增強(qiáng)的盒模型1盒子陰影-box-shadow屬性box-shadow 屬性向框添加一個(gè)或多個(gè)陰影。語(yǔ)法box-shadow: h-shadow v-shadow blur spread color inset;注釋：box-shadow 向框添加一個(gè)或多個(gè)陰影。該屬性是由逗號(hào)分隔的陰影列表，每個(gè)陰影由

26、 2-4 個(gè)長(zhǎng)度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來(lái)規(guī)定。省略長(zhǎng)度的值是 0。值描述測(cè)試h-shadow必需。水平陰影的位置。允許負(fù)值。測(cè)試v-shadow必需。垂直陰影的位置。允許負(fù)值。測(cè)試blur可選。模糊距離。測(cè)試spread可選。陰影的尺寸。測(cè)試color可選。陰影的顏色。請(qǐng)參閱 CSS 顏色值。測(cè)試inset可選。將外部陰影 (outset) 改為內(nèi)部陰影。測(cè)試?yán)?.html2）盒子的描邊效果實(shí)現(xiàn)描邊的方法是把水平偏移值和垂直偏移值設(shè)置為0，僅設(shè)置模糊半徑、陰影大小和陰影顏色。如果不設(shè)置模糊半徑，則描邊效果就等同于邊框效果了。例2.html3）盒子的內(nèi)陰影例3.html2

27、盒子尺寸的計(jì)算方法-box-sizing屬性box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。例如，假如您需要并排放置兩個(gè)帶邊框的框，可通過(guò)將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。默認(rèn)值：content-box繼承性：no版本：CSS3JavaScript 語(yǔ)法：object.style.boxSizing="border-box"box-sizing語(yǔ)法box-sizing: content-box|border-box|inherit;值描述

28、content-box這是由 CSS2.1 規(guī)定的寬度高度行為。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。border-box為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。inherit規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。例4.html3盒子溢出內(nèi)容處理-overflow-x和overflow-y屬性Css3新增的overflow-x和overflow-y屬性，是對(duì)overflow屬性的補(bǔ)充，分別表示水平方向上

29、的溢出和垂直方向上的溢出處理。Overflow語(yǔ)法overflow-x: visible|hidden|scroll|auto|no-display|no-content;overflow-y: visible|hidden|scroll|auto|no-display|no-content;值描述測(cè)試visible不裁剪內(nèi)容，可能會(huì)顯示在內(nèi)容框之外。測(cè)試hidden裁剪內(nèi)容 - 不提供滾動(dòng)機(jī)制。測(cè)試scroll裁剪內(nèi)容 - 提供滾動(dòng)機(jī)制。測(cè)試auto如果溢出框，則應(yīng)該提供滾動(dòng)機(jī)制。測(cè)試no-display如果內(nèi)容不適合內(nèi)容框，則刪除整個(gè)框。測(cè)試no-content如果內(nèi)容不適合內(nèi)容框，則隱藏

30、整個(gè)內(nèi)容。測(cè)試一多列布局（用于多文字排版）瀏覽器支持只有 Opera 支持 column-count 屬性。Firefox 支持替代的 -moz-column-count 屬性。Safari 和 Chrome 支持替代的 -webkit-column-count 屬性。1設(shè)計(jì)多列布局Columns:<column-width>|<column-count>說(shuō)明：在網(wǎng)頁(yè)中顯示大量正文文字時(shí)，建議分列顯示，以方便瀏覽器閱讀。2定義列寬column-width 屬性規(guī)定列的寬度3定義列數(shù)column-count 屬性規(guī)定元素應(yīng)該被劃分的列數(shù)。4規(guī)定列之間的間隔column-g

31、ap5 規(guī)定列之間的寬度、樣式和顏色規(guī)則：語(yǔ)法column-rule: column-rule-width column-rule-style column-rule-color;6 column-span：規(guī)定元素橫跨的列語(yǔ)法column-span: 1|all;值描述測(cè)試1元素應(yīng)橫跨一列。測(cè)試all元素應(yīng)橫跨所有列。測(cè)試二：設(shè)計(jì)盒布局盒布局與多列布局的區(qū)別在于使用多列布局時(shí)，各列寬度必須相等的，在指定每列寬度時(shí)，也只能為所有列指定一個(gè)統(tǒng)一的寬度。列與列之間的寬度不可能是不一樣的。另外，使用多列布局時(shí)，也不可能具體指定什么列中顯示什么內(nèi)容，因此 比較適用于顯示文章內(nèi)容時(shí)，不適合于安排整個(gè)網(wǎng)頁(yè)

32、中由各元素組成的網(wǎng)頁(yè)結(jié)構(gòu)。表單驗(yàn)證Form取消所有驗(yàn)證novalidate="trueInputrequired="required"必填的inputAutofocus第一次進(jìn)入頁(yè)面時(shí)，自動(dòng)獲取焦點(diǎn)<input type="text" autofocus="autofocus" >Pattern Country code: <input type="text" name="country_code" pattern="A-z3" title=&qu

33、ot;Three letter country code" />多媒體技術(shù)Video<video src="1.mp4"><video>（兼容性）針對(duì)多種瀏覽器對(duì)不同視頻格式的支持<video width="450" height="450" controls="controls" ><!-自動(dòng)檢測(cè)-> <source src="1.mp4" type="video/mp4"> <source

34、src="1.webm" type="video/webm"> <source src="1.ogg" type="video/ogg"> Your browser does not support the video tag.</video>Poster(在視頻開(kāi)始播放前，放置啟始圖片)<body> <video width="450" height="450" controls="controls" po

35、ster="PLMM.jpg"> <!-自動(dòng)檢測(cè)-> <source src="1.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </vi

36、deo> <video src="1.mp4"><video></body>Play屬性、paused屬性、ended屬性playbackRate（播放速率）addEventListener（對(duì)視頻的播放進(jìn)行時(shí)實(shí)監(jiān)聽(tīng)）調(diào)用方式 audio|video.addEventListener("canplay", function() /SomeJavaScriptCode ,false);事件類型loadstart當(dāng)瀏覽器開(kāi)始尋找指定的音頻/視頻時(shí)，會(huì)發(fā)生 loadstart 事件。即當(dāng)加載過(guò)程開(kāi)始時(shí)。duration

37、change當(dāng)指定音頻/視頻的時(shí)長(zhǎng)數(shù)據(jù)發(fā)生變化時(shí)，發(fā)生 durationchange 事件。當(dāng)音頻/視頻加載后，時(shí)長(zhǎng)將由 "NaN" 變?yōu)橐纛l/視頻的實(shí)際時(shí)長(zhǎng)。·loadedmetadata當(dāng)指定的音頻/視頻的元數(shù)據(jù)已加載時(shí)，會(huì)發(fā)生 loadedmetadata 事件。音頻/視頻的元數(shù)據(jù)包括：時(shí)長(zhǎng)、尺寸（僅視頻）以及文本軌道。·loadeddata當(dāng)當(dāng)前幀的數(shù)據(jù)已加載，但沒(méi)有足夠的數(shù)據(jù)來(lái)播放指定音頻/視頻的下一幀時(shí)，會(huì)發(fā)生 loadeddata 事件。progress當(dāng)瀏覽器正在下載指定的音頻/視頻時(shí)，會(huì)發(fā)生 progress 事件。canplay當(dāng)瀏覽

38、器能夠開(kāi)始播放指定的音頻/視頻時(shí)，發(fā)生 canplay 事件。canplaythrough當(dāng)瀏覽器預(yù)計(jì)能夠在不停下來(lái)進(jìn)行緩沖的情況下持續(xù)播放指定的音頻/視頻時(shí)，會(huì)發(fā)生 canplaythrough 事件。networkState 屬性返回音頻/視頻的當(dāng)前網(wǎng)絡(luò)狀態(tài)（activity）。· 0 = NETWORK_EMPTY - 音頻/視頻尚未初始化· 1 = NETWORK_IDLE - 音頻/視頻是活動(dòng)的且已選取資源，但并未使用網(wǎng)絡(luò)· 2 = NETWORK_LOADING - 瀏覽器正在下載數(shù)據(jù)· 3 = NETWORK_NO_SOURCE - 未找到

39、音頻/視頻來(lái)源實(shí)例/ 屬性返回音頻/視頻的當(dāng)前網(wǎng)絡(luò)狀態(tài)（activity）。function checkNetworkSate()var myVideo=document.getElementById("myVideo");var medioMsg=document.getElementById("medioMsg");var error=myVworkState;switch(error)case 0:medioMsg.innerHTML="音頻/視頻尚未初始化"break;case 1:medioMsg.innerHTML=&qu

40、ot;音頻/視頻是活動(dòng)的且已選取資源，但并未使用網(wǎng)絡(luò)"break;case 2:medioMsg.innerHTML="瀏覽器正在下載數(shù)據(jù)"break;case 3:medioMsg.innerHTML="未找到音頻/視頻來(lái)源"break; 。error 屬性返回一個(gè) MediaError 對(duì)象。MediaError 對(duì)象的 code 屬性包含了音頻/視頻的錯(cuò)誤狀態(tài)MediaError 對(duì)象的 code 屬性返回一個(gè)數(shù)字值，它表示音頻/視頻的錯(cuò)誤狀態(tài)：· 1 = MEDIA_ERR_ABORTED - 取回過(guò)程被用戶中止·

41、2 = MEDIA_ERR_NETWORK - 當(dāng)下載時(shí)發(fā)生錯(cuò)誤· 3 = MEDIA_ERR_DECODE - 當(dāng)解碼時(shí)發(fā)生錯(cuò)誤· 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音頻/視頻實(shí)例function checkError()var myVideo=document.getElementById("myVideo");var error=myVideo.error.code;switch(error)case 1:alert("取回過(guò)程被用戶中止");break;case 2:alert(&quo

42、t;當(dāng)下載時(shí)發(fā)生錯(cuò)誤");break;case 3:alert("當(dāng)解碼時(shí)發(fā)生錯(cuò)誤");break;case 4:alert("不支持音頻/視頻");break;JAVASCRIPTWindow.onloadCanvas畫(huà)布示例（繪制時(shí)鐘）<!DOCTYPE HTML><html><head><script>var mycanvas,ctx;window.onload=function() mycanvas=document.getElementById("mycanvas")

43、; ctx=mycanvas.getContext("2d"); drawClock();setInterval("drawClock()",1000);function drawClock()ctx.clearRect(0,0,mycanvas.width,mycanvas.height);/獲取時(shí)間var date=new Date();var sec=date.getSeconds();var min=date.getMinutes();var hour=date.getHours();hour=hour>=12?hour-12:hour;c

44、tx.beginPath();ctx.lineWidth=5;ctx.arc(500,300,150,0,2*Math.PI,false);ctx.strokeStyle="blue"/描廓ctx.stroke();/在位移之前，保存canvas，所以后面restore需要重新translate();ctx.save();/設(shè)置中心點(diǎn)ctx.translate(500,300);/重新開(kāi)始路徑，繪制中心點(diǎn)ctx.beginPath();ctx.arc(0,0,3,0,2*Math.PI,false);ctx.fill();/刻度f(wàn)or(i=0;i<60;i+)if(i

45、%5=0)ctx.fillRect(120,0,30,5);elsectx.strokeStyle="black"ctx.fillRect(140,0,10,2);ctx.rotate(6*Math.PI/180);ctx.restore();ctx.save();/畫(huà)秒針ctx.beginPath();ctx.fillStyle="red"ctx.translate(500,300);ctx.rotate(-Math.PI/2);ctx.rotate(Math.PI/30*sec);ctx.fillRect(-10,-1,140,2);ctx.rest

46、ore();ctx.save();/畫(huà)分針ctx.beginPath();ctx.fillStyle="black"ctx.translate(500,300);ctx.rotate(-Math.PI/2);ctx.rotate(min+sec/60)*Math.PI/30);ctx.fillRect(-10,-1,120,5);ctx.restore();ctx.save();/時(shí)針ctx.beginPath();ctx.fillStyle="black"ctx.translate(500,300);ctx.rotate(-Math.PI/2);ctx

47、.rotate(hour+min/60)*Math.PI/6);ctx.fillRect(-10,-1,80,7);ctx.restore();ctx.save();</script></head><body><canvas id="mycanvas" width="800" height="800" style="border:1px solid #000000;" ></canvas></body></html>拖拽preven

48、tDefault()定義和用法:阻止特定事件的默認(rèn)行為；默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。cloneNode() 定義和用法cloneNode() 方法創(chuàng)建節(jié)點(diǎn)的拷貝，并返回該副本。cloneNode() 方法克隆所有屬性以及它們的值。如果您需要克隆所有后代，請(qǐng)把 deep 參數(shù)設(shè)置 true，否則設(shè)置為 false。appendChild()定義和用法appendChild() 在指定元素節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)之后添加節(jié)點(diǎn)。提示：如果您需要?jiǎng)?chuàng)建包含文本的新段落，請(qǐng)記得添加到段落的文本的文本節(jié)點(diǎn)，然后向文檔添加該段落。您也可以使用

49、appendChild() 方法從一個(gè)元素向另一個(gè)元素中移動(dòng)元素。拖放的相關(guān)事件在拖放的過(guò)程中會(huì)觸發(fā)以下事件：· 在拖動(dòng)目標(biāo)上觸發(fā)事件 (源元素): o ondragstart - 用戶開(kāi)始拖動(dòng)元素時(shí)觸發(fā)o ondrag - 元素正在拖動(dòng)時(shí)觸發(fā)o ondragend - 用戶完成元素拖動(dòng)后觸發(fā)· 釋放目標(biāo)時(shí)觸發(fā)的事件: o ondragenter - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件o ondragover - 當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件o ondragleave - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開(kāi)其容器范圍內(nèi)時(shí)觸發(fā)此事件o ondrop -

50、 在一個(gè)拖動(dòng)過(guò)程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件對(duì)于被拖動(dòng)的元素來(lái)說(shuō)，它將依次觸發(fā)ondragstart和ondrag事件，并在拖放結(jié)束時(shí)觸發(fā)ondragend事件。 而對(duì)于拖放的目的地元素來(lái)說(shuō)，它將依次觸發(fā)ondragenter,ondragover,ondrop事件，與mouseover一類的類似。dataTransfer對(duì)象在HTML5中，dataTransfer對(duì)象專門(mén)用于處理拖拽過(guò)程中產(chǎn)生的數(shù)據(jù)信息，該對(duì)象的屬性及說(shuō)明如下表所示屬性名稱說(shuō)明effectAllowed用于設(shè)置或返回指定元素被拖拽時(shí)被允許的顯示效果，可以設(shè)定的值包括“none”、“copy”、“copyLink”、“

51、copyMove”，“l(fā)ink”，“l(fā)inkMove”，“move”，“all”、“uninitialized”dropEffect用于設(shè)置或返回指定被拖拽元素釋放拖拽的顯示效果，該屬性設(shè)置的值必須在effectAllowed設(shè)置范圍內(nèi)，否則無(wú)效。items用于返回DataTransferItemList對(duì)象types用于返回已保存的數(shù)據(jù)類型，如果是文件操作則返回文件型字符串files用于返回被拖拽的文件列表dataTransfer對(duì)象常用方法包括（1）setData(format, data)，該方法將指定類型的數(shù)據(jù)信息存入dataTransfer對(duì)象，參數(shù)format表示保存的數(shù)據(jù)類型，取

52、值為”text”或“URL”；參數(shù)data表示數(shù)據(jù)內(nèi)容。應(yīng)用實(shí)例如下src.ondragstart = function (e) /開(kāi)始拖拽元素時(shí)觸發(fā)e.dataTransfer.setData("Text", e.target.id); /使用dataTransfer保存拖拽元素IDmsg.innerHTML="開(kāi)始拖拽："+draggedID;（2）getData(format)，該方法用于從dataTransfer對(duì)象中讀取指定類型的數(shù)據(jù)信息，參數(shù)format表示讀取的數(shù)據(jù)類型。應(yīng)用實(shí)例如下target.ondrop = function (e)

53、/在目的元素內(nèi)釋放拖拽元素時(shí)觸發(fā) var droppedID = e.dataTransfer.getData("Text"); /從dataTransfer中獲取拖拽元素ID var newElem = document.getElementById(draggedID).cloneNode(false); target.innerHTML = "" target.appendChild(newElem); e.preventDefault();dataTransfer（示例：setData()和getData()）<!DOCTYPE HTML&

54、gt;<html><head><!-dataTransfer.getData()-><script>function onDrop(event)event.preventDefault();/getData(format)，該方法用于從dataTransfer對(duì)象中讀取指定類型的數(shù)據(jù)信息，參數(shù)format表示讀取的數(shù)據(jù)類型。var data=event.dataTransfer.getData("img");/var mydrag=document.getElementById("mydrag");even

55、t.target.appendChild(document.getElementById(data);function onDefault(event)event.preventDefault();function drag(event)/類似于鍵和值的關(guān)系/setData(format, data)，該方法將指定類型的數(shù)據(jù)信息存入dataTransfer對(duì)象，參數(shù)format表示保存的數(shù)據(jù)類型，取值為”text”或“URL”；參數(shù)data表示數(shù)據(jù)內(nèi)容。應(yīng)用實(shí)event.dataTransfer.setData("img",event.target.id);</scr

56、ipt></head><body><div id="mydrag2"style="border:1px solid #000000;width:1000px;height:300px" ondragenter="onDefault(event)" ondragover="onDefault(event)"ondrop="onDrop(event)" ><img id="b_img" src="b.jpg" d

57、raggable="true" ondragstart="drag(event)"/><img id="c_img" src="c.jpg" draggable="true" ondragstart="drag(event)"/><img id="d_img" src="d.jpg"draggable="true" ondragstart="drag(event)" /&g

58、t;<img id="e_img" src="e.jpg" draggable="true" ondragstart="drag(event)"/></div><div id="mydrag" style="border:1px solid #000000;width:1000px;height:300px" ondragenter="onDefault(event)" ondragover="onDefault(event)"ondrop="onDrop(event)" ></div></body></html>（3）setDragImage(image, x, y)這個(gè)函數(shù)用于設(shè)置鼠標(biāo)移動(dòng)過(guò)程中隨鼠標(biāo)一起移動(dòng)的效果圖，而不是鼠標(biāo)指針的顯示效果。x、y參數(shù)用于指定圖像相對(duì)于鼠標(biāo)指針的位置；image參數(shù)用于指定圖像元素，若是一個(gè)img元素，則顯示圖像元素，否則將給定的元素轉(zhuǎn)換成一張圖像并顯示。該函數(shù)只能在讀寫(xiě)模式(也就是dragstart事件)下有用，在其它事件中調(diào)用無(wú)效。若不調(diào)用此函數(shù)，則在拖拽時(shí)，被拖拽元素被轉(zhuǎn)換成一個(gè)圖處并當(dāng)