เพื่อนหลายคนส่งข้อความถึงฉันเป็นการส่วนตัวและถามฉันเกี่ยวกับคุณสมบัติใหม่และการใช้งาน html5 ฉันจะให้ข้อมูลเบื้องต้นโดยละเอียดเกี่ยวกับคุณสมบัติใหม่ของ html5 ให้ฉันสรุปให้คุณ
1) ส่วนหัวส่วนท้ายของแท็กความหมายใหม่ ฯลฯ 2) แบบฟอร์มที่ได้รับการปรับปรุง 2.0 3) เสียงและวิดีโอ 4) การวาดภาพบนผ้าใบ 5) การวาดภาพ SVG 6) ตำแหน่งทางภูมิศาสตร์ 7) ลากและวาง API 8) ผู้ปฏิบัติงานบนเว็บเพื่อดำเนินงานที่ใช้เวลานาน 9 ) เว็บ พื้นที่เก็บข้อมูลเก็บข้อมูลจำนวนมากบนฝั่งเบราว์เซอร์ 10) เว็บซ็อกเก็ตเป็นการเชื่อมต่อแบบถาวร (โปรโตคอลที่ไม่ใช่ http)
(1) ฉันจะไม่พูดถึงแท็กความหมายใหม่
ตัวอย่างเช่น <footer></footer>
(2) แบบฟอร์มที่ได้รับการปรับปรุง แบบฟอร์ม 2.0
หนึ่ง,1) การเปรียบเทียบระหว่างอินพุตประเภทใหม่ h4 และ h5!
ประเภทอินพุตใน H4: ข้อความ /รหัสผ่าน /วิทยุ /ช่องทำเครื่องหมาย/ sybmit/ รีเซ็ต / ไฟล์ /ซ่อน / รูปภาพ/
ประเภทอินพุตใน H5: อีเมล/url/หมายเลข/โทรศัพท์/ค้นหา /ช่วง /สี/เดือน/สัปดาห์ /วันที่
2) องค์ประกอบแบบฟอร์มใหม่
องค์ประกอบแบบฟอร์มใน H4: อินพุต/พื้นที่ข้อความ/เลือก ตัวเลือก/ป้ายกำกับ
องค์ประกอบแบบฟอร์มใหม่ใน H5: รายการข้อมูล/ความคืบหน้า/เมตร/เอาต์พุต
2. องค์ประกอบแบบฟอร์มใหม่ใน h5 - รายการคำแนะนำดาตาลิสต์<datalist id=lunchList> <option>หมูหยองซอสปักกิ่ง</option> <option>หมูหยองเปา</option> <option>หมูหยองรสปลา</option> <option>หมูหยองพริกหยวก</option option> <option >ดิ ซานเซียน</option></datalist>
กรุณาระบุอาหารกลางวันที่คุณต้องการ ：<input type=text name=lunch list=lunchList/>
มีสองรูปแบบ:
มีรูปแบบปลั๊กอินความคืบหน้าใน bootstrap
<form> การเชื่อมต่อเครือข่าย<progress></progress> <br/> <!-- ระหว่าง 0-1--> ความคืบหน้าการดาวน์โหลด <progress id=p3 value=0></progress> <input type=number value =1 ></form><script type=text/javascript> /*ความแตกต่างระหว่าง settimeout และ setInterval คือ settimeout จะถูกดำเนินการหนึ่งครั้ง และ setInterval จะถูกดำเนินการทุกครั้ง*/ var t=setInterval(function(){ var v = p3.value; v += 0.1; p3.value = v; if(v>=1){ clearInterval(t); alert(ดาวน์โหลดเสร็จแล้ว); 5. องค์ประกอบแบบฟอร์มใหม่ใน h5-meter <body> ปริมาณน้ำมัน: <meter id=m1 min=0 max=100 low=30 high=70 optimum=40 value=50></meter> ค่า PM: <meter id=m2 min=0 max=500 low= 100 สูง=300 เหมาะสม=150 ค่า=750></เมตร></ตัว>
มิเตอร์: น้ำหนักและหน่วยวัด/มาตราส่วน/ ใช้เพื่อทำเครื่องหมายช่วง: ยอมรับไม่ได้ (สีแดง)/ยอมรับได้ (สีเหลือง)/ดีมาก (สีเขียว)
<meter min=可取的最小值max=可取的最大值low=合理的下限值high=合理的上限值optimum=最佳值value=当前值></meter>
3) คุณลักษณะใหม่ขององค์ประกอบแบบฟอร์ม
1. คุณสมบัติขององค์ประกอบแบบฟอร์มใน H4: <input>
id/คลาส/ชื่อ/ประเภท/ค่า/ชื่อ/สไตล์/อ่านอย่างเดียว/ปิดการใช้งาน/ตรวจสอบ/
คุณลักษณะใหม่ขององค์ประกอบแบบฟอร์มใน H5
1) ตัวยึดตำแหน่ง: ไม่สามารถส่งอักขระตัวยึดตำแหน่งเป็นพรอมต์ได้
<input value=tom placeholder=请输入用户名/>
2) โฟกัสอัตโนมัติ: รับอินพุตโฟกัสโดยอัตโนมัติ (คุณสามารถป้อนโดยไม่ต้องคลิก เฉพาะการตั้งค่าอินพุตแรกเท่านั้นที่ถูกต้อง)
<input autofocus>
3) หลายค่า: อนุญาตให้ค่าอินพุตหลายค่าปรากฏในช่องป้อนข้อมูลโดยคั่นด้วยเครื่องหมายจุลภาค [email protected], [email protected]
<input type=email name=emails multiple>
4) form: ใช้เพื่อวางช่องป้อนข้อมูลไว้นอก FORM
<form id=f5></from>
<input form=f5>
================= คุณสมบัติใหม่ที่เกี่ยวข้องกับการตรวจสอบอินพุต =========================== = =======
ตัวอย่างเช่น ดูแอตทริบิวต์ที่เกี่ยวข้องกับการตรวจสอบอินพุต/yz.html
5)จำเป็น: จำเป็น เนื้อหาต้องไม่ว่างเปล่า
6) ความยาวสูงสุด: ระบุความยาวสูงสุดของสตริง
7) minlength: ระบุความยาวขั้นต่ำของสตริง
8) สูงสุด: ค่าสูงสุดของหมายเลขที่ระบุ
9) นาที: ค่าต่ำสุดของหมายเลขที่ระบุ
10) รูปแบบ: ระบุนิพจน์ทั่วไปที่อินพุตต้องตรงกัน
คุณลักษณะการตรวจสอบข้างต้นจะส่งผลต่อคุณลักษณะความถูกต้องของวัตถุ js ที่สอดคล้องกับองค์ประกอบแบบฟอร์ม และคุณลักษณะความถูกต้องคือคุณลักษณะของการตรวจสอบ
(3) วิดีโอวิดีโอและเสียง
1. แฟลชแทนที่ด้วย H5 สะท้อนในด้านใดบ้างการวาดแบบแฟลช (AS/FLEX) =>Canvas/SVG
แอนิเมชั่นแฟลช => ตัวจับเวลา + แคนวาส
การเล่นวิดีโอและเสียง => วิดีโอ/เสียง
ที่เก็บข้อมูลไคลเอ็นต์แฟลช => WebStorage
2.H5 คุณสมบัติใหม่ - เครื่องเล่นวิดีโอ (เป็นองค์ประกอบบล็อกอินไลน์ คุณสามารถกำหนดความกว้างและความสูงได้)H5 มีแท็บใหม่สำหรับการเล่นวิดีโอ:
<video src=></video> <video src=> <source src=res/birds.mp4></source> <source src=res/birds.ogg></source> <source src=res/birds. เว็บเอ็ม></ซอร์ส>
เบราว์เซอร์ของคุณไม่รองรับการเล่นวิดีโอ!
</video> โดยตัวมันเองเป็นองค์ประกอบบล็อกอินไลน์ขนาด 300*150 หมายเหตุ: แหล่งที่มาหลายบรรทัดถูกเขียนขึ้นเพื่อให้เข้ากันได้กับเบราว์เซอร์ต่างๆ เนื่องจากเบราว์เซอร์ไม่รองรับรูปแบบวิดีโออย่างสม่ำเสมอ เช่น เบราว์เซอร์บางตัว รองรับรูปแบบ MP4 จากนั้นจะเล่นวิดีโอแรกในรูปแบบ MP4 หากไม่รองรับ ให้ตรวจสอบว่ารองรับวิดีโอ ogg ต่อไปนี้หรือไม่ รองรับแล้วมันจะเล่นหากไม่รองรับให้ดำเนินการต่อลง ไม่มีแหล่งที่มาด้านล่างแสดงว่าเบราว์เซอร์ของคุณไม่รองรับการเล่นวิดีโอ! -
สมาชิกของแท็ก/อ็อบเจ็กต์วิดีโอที่ใช้กันทั่วไป:
คุณสมบัติสมาชิก:
<video id=v2 src= autoplay controls loop muted poster=2.jpg preload=auto></video>
เล่นอัตโนมัติ: เท็จ ไม่ว่าจะเล่นโดยอัตโนมัติ ค่าเริ่มต้นการควบคุมที่ผิดพลาด: เท็จ ไม่ว่าจะแสดงการควบคุมการเล่นหรือไม่ ค่าเริ่มต้นคือลูปเท็จ: เท็จ ไม่ว่าจะเล่นแบบวนซ้ำหรือไม่ ค่าเริ่มต้นคือการปิดเสียงเท็จ: เท็จ ไม่ว่าจะปิดเสียงการเล่นก็ตาม ค่าเริ่มต้นคือ โปสเตอร์เท็จ: '' กำลังเล่น โปสเตอร์ที่แสดงก่อนเฟรมแรกซึ่งอาจเป็นรูปภาพได้ ค่าเริ่มต้นว่างเปล่าและไม่มีการโหลดล่วงหน้า: กลยุทธ์การโหลดวิดีโอล่วงหน้า, ค่าที่เป็นไปได้: อัตโนมัติ: โหลดข้อมูลเมตาของวิดีโอล่วงหน้าและเวลาบัฟเฟอร์ที่แน่นอนจะต้องไม่ใช้บนโทรศัพท์มือถือ (ขนาด/ระยะเวลา เนื้อหาเฟรมแรก เวลาบัฟเฟอร์) ข้อมูลเมตา (ปริมาณการใช้ข้อมูลเสียก่อนการโหลด): โหลดเฉพาะข้อมูลเมตาของวิดีโอล่วงหน้าเท่านั้น (ขนาด/ระยะเวลา เนื้อหาเฟรมแรก) ไม่มีระยะเวลาบัฟเฟอร์ เหมาะสำหรับโทรศัพท์มือถือ ไม่มี: ไม่โหลดข้อมูลใด ๆ ล่วงหน้า
-------------------------------------------------- -------------------------------------------------- --------------- การใช้แอตทริบิวต์ของ id v2 เป็นตัวอย่าง:
v2.อัตราการเล่น=3;
เวลาปัจจุบัน: ระยะเวลาการเล่นปัจจุบัน ระยะเวลา: ระยะเวลารวมที่หยุดชั่วคราว: จริง ไม่ว่าวิดีโอปัจจุบันจะอยู่ในสถานะหยุดชั่วคราวหรือไม่ จริงหมายถึงหยุดชั่วคราว เท็จ หมายถึงระดับเสียงที่เล่น: 1 ค่าเริ่มต้นคือ 1 ระดับเสียงการเล่นปัจจุบัน: 1 อัตราการเล่นมากกว่า 1 หมายถึงการเล่นเร็ว น้อยกว่า 1 หมายถึงการเล่นช้า
วิธีรหัส v2:
play(): เล่นวิดีโอ Pause(): หยุดเหตุการณ์สมาชิกการเล่นชั่วคราว: onplay: เหตุการณ์ที่ทริกเกอร์เมื่อวิดีโอเริ่มเล่น onpause: เหตุการณ์ที่ทริกเกอร์เมื่อวิดีโอถูกหยุดชั่วคราว การฝึกปฏิบัติ: ปรับแต่งปุ่มเล่น/หยุดชั่วคราวโดยไม่ต้องใช้ตัวควบคุมที่ มาพร้อมกับวิดีโอ เลื่อนเมาส์ออกจากพื้นที่วิดีโอเพื่อซ่อนปุ่ม เลื่อนเมาส์ไปที่ปุ่มแสดงผล เช่น วิดีโอเสียง canvas/video.html เมื่อหยุดชั่วคราว โฆษณาจะแสดง และเมื่อเมาส์อยู่ เล่นแล้วโฆษณาจะถูกซ่อน
3. เครื่องเล่นเสียงฟีเจอร์ใหม่ H5
<audio src=></audio><audio src=><source src=res/birds.mp3></source><source src=res/birds.ogg></source><source src=res/birds wav></แหล่งที่มา>
วิธีการระบุแอตทริบิวต์จะเหมือนกับวิดีโอ ยกเว้นว่าไม่มีแอตทริบิวต์โปสเตอร์*** เพื่อพิจารณาว่าได้เลือกช่องทำเครื่องหมายหรือไม่
cb.onchange=function(){ this.checked true หมายความว่าเลือกแล้ว false หมายความว่าไม่ได้เลือก}(4) ผ้าใบ
มีวัตถุแปรงเพียงอันเดียวบนผืนผ้าใบแต่ละอัน - เรียกว่าวัตถุบริบทการวาดภาพ - ใช้วัตถุนี้เพื่อวาด!
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象
วาดรูปแคนวาส---ยาก! - -
1) การวาดภาพ SVG: เทคโนโลยีการวาดแบบเวกเตอร์ซึ่งปรากฏในปี 2000 และต่อมาได้รวมเข้ากับมาตรฐาน H5 2) การวาดภาพแบบผ้าใบ: เทคโนโลยีการวาดภาพบิตแมปซึ่งเป็นเทคโนโลยีการวาดภาพที่เสนอโดย H5 3) การวาดภาพ WebGL: เทคโนโลยีการวาดภาพ 3 มิติซึ่งไม่มี ยังถูกรวมเข้ากับมาตรฐาน H5
เทคโนโลยีการวาดภาพผ้าใบ ผ้าใบ: ผ้าใบ H5 ใช้เทคโนโลยีการวาดภาพ 2D
<canvas width=500 height=400>您的浏览器不支持canvas</canvas>
แท็ก canvas เป็นแบบอินไลน์บล็อกขนาด 300*150 โดยค่าเริ่มต้นในเบราว์เซอร์ ความกว้างและความสูงของผืนผ้าใบสามารถกำหนดได้โดยใช้แอตทริบิวต์ HTML/JS เท่านั้น ไม่ใช่สไตล์ CSS! มีวัตถุแปรงเพียงอันเดียวบนผืนผ้าใบแต่ละอัน - เรียกว่าวัตถุบริบทการวาดภาพ - ใช้วัตถุนี้เพื่อวาด! var ctx = canvas.getContext('2d') //ตอนนี้มีเพียง 2d เท่านั้นที่ได้รับวัตถุแคนวาสบนผืนผ้าใบ
1) ใช้ผ้าใบเพื่อวาดรูปสี่เหลี่ยมผืนผ้า
วาดรูปสี่เหลี่ยมผืนผ้า
ctx.lineWidth = 1 ความกว้างของเส้นขีด ctx.fillStyle='#000' เติมสีสไตล์ ctx. strokeStyle='#000' สีสไตล์เส้นขีด ctx.fillRect(x,y,w,h); //เติมสี่เหลี่ยม x , y พิกัด w, h ความกว้างและความสูง ctx. strokeRect (x, y, w, h); // ลากเส้นสี่เหลี่ยม ctx.clearRect (x, y, w, h) ล้างภาพวาดทั้งหมดภายในสี่เหลี่ยม
2) ใช้แคนวาสเพื่อวาดข้อความ
จุดยึดของข้อความอยู่ที่จุดเริ่มต้นของบรรทัดฐานของข้อความ
ctx.textBaseline = 'ตัวอักษร' //ค่าเริ่มต้นของข้อความพื้นฐานคือบรรทัดที่สาม ctx.font=12px sans-serif //ขนาดตัวอักษรและสไตล์ ctx.fillText(str,x,y) //กรอก ctx. strokeText (str ,x,y) //ขีดเส้นข้อความ ctx.measureText(str) //ตั้งค่าข้อความการวัดตามขนาดข้อความและแบบอักษรปัจจุบัน และวัตถุที่ส่งคืนคือ {width: x}3) ใช้ผ้าใบเพื่อวาดเส้นทาง
เส้นทาง: คล้ายกับเครื่องมือปากกาใน PS มันเป็นรูปร่างที่กำหนดเองที่ประกอบด้วยจุดพิกัดหลายจุด ซึ่งเส้นทางนี้มองไม่เห็นและสามารถใช้สำหรับเส้นขีด การเติม และการครอบตัด
ctx.beginPath() //เริ่มเส้นทางใหม่ ctx.closePath() //ปิดเส้นทางปัจจุบัน ctx.moveTo(x,y) //ย้ายไปยังจุดที่ระบุ ctx.lineTo(x,y) //จากปัจจุบัน ชี้ไปยังจุดที่ระบุ วาดเส้นตรง ctx.arc(cx,cy,r,start,end); //วาดเส้นทางโค้ง//cx cy คือพิกัดกึ่งกลางของวงกลม xy r คือรัศมี start คือ มุมเริ่มต้น และปลายคือมุมสิ้นสุด
มุม: 360 = เรเดียน: 2PI 180 = 1PI ตัวอย่างเช่น
ctx.arc(100,200,30,0,2*Math.PI)ctx. stroke(); // จังหวะเส้นทางปัจจุบัน ctx.fill(); // เส้นทางปัจจุบันเติม ctx.clip();// ใช้เส้นทางปัจจุบันครอบตัด //************มุมของการเชื่อมต่อ**********ctx.lineJoin='miter' //มุมแหลมปรากฏขึ้นที่การเชื่อมต่อของบรรทัด ctx lineJoin='รอบ' //มุมโค้งมนปรากฏที่การเชื่อมต่อของเส้น ctx.lineJoin = 'bevel' //มุมสี่เหลี่ยมปรากฏขึ้นที่การเชื่อมต่อของเส้น
4) ใช้แคนวาสในการวาดภาพ
Canvas เป็นเทคโนโลยีฝั่งไคลเอ็นต์ และรูปภาพอยู่ในเซิร์ฟเวอร์ ดังนั้นเบราว์เซอร์จึงต้องดาวน์โหลดรูปภาพที่จะวาดก่อน และรอให้โหลดรูปภาพแบบอะซิงโครนัส:
var img = new Images();img.src='x.png';console.log(img.width); //0 คำขอแบบอะซิงโครนัสสำหรับรูปภาพ img.onload=function(){console.log(img.width, img .height); // การโหลดรูปภาพเสร็จสมบูรณ์ // เริ่มวาดภาพลงบนผืนผ้าใบ ctx.drawImage(img,x,y); // การวาดภาพขนาดต้นฉบับ ctx.drawImage (img, x, y, w, h); // ตั้งค่าความกว้างและความสูง}ฟังเหตุการณ์การเคลื่อนไหวของเมาส์เหนือผืนผ้าใบ
ctx.onmousemove = ฟังก์ชั่น(e){x=e.offsetX;y=e.offsetY;console.log(x,y);}2. การไล่ระดับสีในการวาดภาพบนผืนผ้าใบ
การไล่ระดับสีเชิงเส้น: การไล่ระดับสีเชิงเส้น การไล่ระดับสีแบบรัศมี: การไล่ระดับสีแบบรัศมี คุณสามารถอ้างถึงเอฟเฟกต์การไล่ระดับสีใน ps
var g = ctx.createLinearGradient(x1,y1,x2,y2);g.addColorStop(0,'#f00');g.addColorStop(0.5,'#ff0');g.addColorStop(1,'#0f0' );ctx.จังหวะสไตล์=g;
ความยาก: มีแกนและคำพิกัดมากมายในระบบพิกัด
3. การวาดภาพผิดรูป
ctx.rotate(radians) //หมุนวัตถุบริบทการวาด (เช่น แปรง) จุดแกนคือจุดกำเนิดของผืนผ้าใบ ctx.translate(x,y) //แปลต้นกำเนิดของผืนผ้าใบทั้งหมดไปยังจุดที่ระบุ ctx sava(); / /บันทึกค่าสถานะการเปลี่ยนรูปปัจจุบันของแปรง (จากการบันทึกในเกม) ctx.restore(); //คืนค่าสถานะการเปลี่ยนรูปของแปรงเป็นการบันทึกล่าสุด (อ่านบันทึก ในเกม) ctx.save(); //บันทึกสถานะแรกดั้งเดิม var deg = 10*Math.PI/180; // มุมที่จะหมุน 10 องศา ctx.rotate(deg); // หมุน ctx.drawImage(img,0,0); // วาดรูป, วาดอะไร หากแปรงคดเคี้ยว ctx.restore(); // สถานะดั้งเดิมจะถูกบันทึกเมื่อนำการบันทึกออก
(5) การวาด SVG
ก่อนอื่นเรามาทำความเข้าใจว่าบิตแมปและเวกเตอร์คืออะไร แค่เข้าใจสั้นๆ
บิตแมป: ประกอบด้วยพิกเซลทีละพิกเซล แต่ละจุดมีสีของตัวเอง และสีก็ละเอียดอ่อน กราฟิกแบบเวกเตอร์: ประกอบด้วยเส้นต่อกัน แต่ละบรรทัดสามารถระบุสี ทิศทาง และสามารถปรับขนาดได้ไม่จำกัด แต่รายละเอียดของสียังไม่สมบูรณ์เพียงพอ
1. การวาด SVG ใช้แท็กสำหรับการวาด และคุณสามารถเชื่อมโยงผู้ฟังเหตุการณ์ได้โดยตรง
<svg width=300 height=200 xmlns=http://www.w3.org/2000/svg> <ความกว้างสี่เหลี่ยมผืนผ้า=100 ความสูง=100></rect></svg>
2. วิธีสร้างแท็ก svg โดยใช้ js!
//var r1 = document.createElement('rect'); ไม่สามารถสร้างองค์ประกอบ svg นี้ได้เนื่องจากมีการจำกัดอายุและเนมสเปซ (กล่าวคือ หากไม่ได้ผล ให้ใช้วิธีต่อไปนี้เพื่อสร้างมัน!!! !) วาร์ r1= document.createElementNS('http://www.w3.org/2000/svg','rect');r1.setAttribute('width','50');r1.setAttribute('height',300);s1 .appendChild(r1);3. สร้างวงรีด้วย svg
<svg ความกว้าง=300 ความสูง=200 id=c6> <วงรี rx=100 ry=40 cx=100 cy=100 เติม=#faa จังหวะ=#a00></ellipse></svg>
4. สร้างเส้นตรงในรูปแบบ svg
<svg width=300 height=200 id=c6> <line x1=0 y1=0 x2=100 y2=200 stroke=#000 stroke-width=50 stroke-linecap=square></line></svg>
หมายเหตุ: stroke-linecap=square จะสร้างสี่เหลี่ยมจัตุรัสมากขึ้น stroke-linecap=round จะสร้างพื้นที่วงกลมมากขึ้น stroke-linecap=butt จะไม่สร้างสี่เหลี่ยมเพิ่ม (กล่าวคือ เส้นตรงที่คุณสร้างมีความแตกต่างระหว่างจุดเริ่มต้น และจุดสิ้นสุดของคุณสมบัติเหล่านี้! ลองด้วยตัวเองแล้วคุณจะพบว่ารายละเอียดมีความสำคัญ!)
5. สร้างโพลีไลน์โดยใช้ svg
<svg width=300 height=200 id=c6> <polyline point=50,50 100,300 150,100></polyline> //สิ่งที่ออกมาคือรูปสามเหลี่ยม <polyline point=50,50 100,300 150,100 fill=transparent stroke=#000 >< /polyline> //สิ่งที่ออกมาคือเส้นโพลีไลน์</svg>
6. ตำแหน่งทางภูมิศาสตร์ (ในอนาคตเราไม่ต้องการลูกค้า เราก็สามารถค้นหาตัวเองได้เช่นกัน!)
ตำแหน่งทางภูมิศาสตร์: ตำแหน่งทางภูมิศาสตร์โดยใช้ JS เพื่อรับข้อมูลพิกัดทางภูมิศาสตร์ (ลองจิจูด ละติจูด ระดับความสูง ความเร็ว) ของเบราว์เซอร์ปัจจุบัน ซึ่งใช้ในการปรับใช้แอปพลิเคชัน LBS (บริการตามตำแหน่ง) เช่น Ele.me, Amap Navigation...
วิธีที่เบราว์เซอร์มือถือรับข้อมูลตำแหน่ง:
1) ตัวเลือกแรกคือชิป GPS ในโทรศัพท์มือถือและการสื่อสารผ่านดาวเทียม ความแม่นยำของตำแหน่งอยู่ภายในระยะเมตร 2) ตัวเลือกที่สองคือสถานีฐานโทรศัพท์มือถือสำหรับการรับตำแหน่ง ความแม่นยำของตำแหน่งอยู่ภายในกิโลเมตร (ผิดกฎหมาย) วิธีรับ ข้อมูลตำแหน่งผ่านเบราว์เซอร์พีซี: 1) ย้อนกลับผ่านที่อยู่ IP การแยกวิเคราะห์และความแม่นยำของตำแหน่งขึ้นอยู่กับขนาดของฐานข้อมูลที่อยู่ IP
HTML5 ให้วัตถุใหม่สำหรับการรับข้อมูลตำแหน่งของเบราว์เซอร์ปัจจุบัน:
window.navigator.geolocation{ getCurrentPosition:fn, // รับข้อมูลตำแหน่งปัจจุบัน watchPosition:fn, // ตรวจสอบการเปลี่ยนแปลงในข้อมูลตำแหน่ง clearWatch:fn // ยกเลิกการตรวจสอบ}2. ส่วนขยาย: วิธีฝัง Baidu Map ในหน้าเว็บ
1) ลงทะเบียนบัญชีนักพัฒนา Baidu map.baidu.com ---> lbsyun.baidu.com 2) สร้างเว็บไซต์ เข้าสู่ระบบ Baidu Map และสมัครใช้แผนที่ AccessKey สำหรับเว็บไซต์ 3) ฝังแผนที่ที่จัดทำโดย Baidu Map ใน API หน้าเว็บของคุณเอง ซึ่งฝังอยู่ในแผนที่ Baidu
ฉันจะไม่พูดมากเกี่ยวกับวิธีการฝังสิ่งนี้ที่นี่! (โปรดจำไว้ว่าคุณต้องลงทะเบียนบัญชีเพื่อใช้ Baidu Maps จากนั้นอ้างอิงถึงห้องสมุดของผู้อื่น!)
7. ลากและวาง API
ก่อนหน้านี้ผมบอกว่าลากแล้ววาง เพื่อนๆ ไปค้นหาบล็อกเก่าๆ ด้วยตัวเองได้เลย
ที่เก็บข้อมูลแปดอัน
พื้นที่เก็บข้อมูลส่วนใหญ่ประกอบด้วยคุกกี้และเซสชัน (ฉันจะอธิบายความแตกต่างและข้อควรระวังเมื่อค้นหาวิธีการเขียนจำนวนมากก่อนหน้านี้): โปรดจำไว้ว่าเซสชันจะหายไปเมื่อคุณปิดเบราว์เซอร์ และคุกกี้จะไม่หายไปเมื่อคุณปิดเบราว์เซอร์! หมายเหตุ: ต้องเพิ่มเวลาเมื่อจัดเก็บคุกกี้ หากไม่มีการเพิ่มเวลา คุกกี้จะหายไปหลังจากปิดเบราว์เซอร์! ที่เก็บข้อมูลเบราว์เซอร์นี้สามารถใช้เพื่อแก้ไขปัญหาการทำงานมากมาย เช่น การจดจำรหัสผ่านและฟังก์ชันอื่น ๆ! -
เก้าเว็บซ็อกเก็ต
เราควรคุยกันเรื่องนี้ไหม? - - - - มาคุยกันสั้นๆ ทุกอย่างขึ้นอยู่กับความเข้าใจ~~
เว็บซ็อกเก็ตคือการเชื่อมต่อแบบสองทางที่ไม่ใช่ http ซึ่งสามารถสร้างระหว่างเซิร์ฟเวอร์และไคลเอนต์ได้!
การเชื่อมต่อนี้เป็นแบบเรียลไทม์และถาวร
เซิร์ฟเวอร์สามารถพุชข้อความได้
เซิร์ฟเวอร์ไม่จำเป็นต้องสำรวจไคลเอนต์เพื่อขอคำขออีกต่อไป และการสื่อสารระหว่างเซิร์ฟเวอร์และไคลเอนต์ไม่จำเป็นต้องสร้างการเชื่อมต่อใหม่
นั่นคือการสื่อสารกลับไปกลับมาอย่างยั่งยืน
จะสร้างมันขึ้นมาได้อย่างไร? โค้ดชิ้นเดียวเสร็จแล้ว
var webSocket = new WebSocket (ws://localhost:8005/socket); //url ต้องขึ้นต้นด้วยข้อความ ws หรือ wss: เนื่องจากไม่ใช่ http แต่เป็น websocket มันเป็นข้อมูลประจำตัวของคุณเอง การส่งผ่านแบบเข้ารหัส เพียงจำไว้ว่า . webSocket.send() //ส่งข้อมูลข้อความ สามารถส่งได้เฉพาะข้อความเท่านั้น (ใช้วัตถุ json เพื่อแปลงวัตถุ js เป็นข้อมูลข้อความก่อนที่จะส่ง) webSocket.close();//ปิดและตัดการเชื่อมต่อการสื่อสาร webSocket.onmessage= function(event){ var data=event.data;} // รับข้อความจากเซิร์ฟเวอร์ webSocket.onopen =function(event){ // กำลังประมวลผลเมื่อเริ่มการสื่อสาร} webSocket.onclose =function(event) { / /กำลังประมวลผลเมื่อสิ้นสุดการสื่อสาร} สรุปข้างต้นเป็นรายการคุณสมบัติใหม่และการใช้งาน HTML5 ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันแล้วตัวแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!