可以使用下面的方法来添加新的ＨＴＭＬ元素：
JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <script> document.createElement("myhero"); </script> <style> myhero{ background: red; display:block; width:500px; height:100px; } </style> </head> <body> <myhero>爱你不是两三天</myhero> </body> </html>
画布元素canvas:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>画布canvas</title> </head> <body> <canvas id="mycanvas" width=='300' height="300" style="border:1px solid #d3d3d3;">afasdfasd</canvas> <!--画布的脚本要写在标签的后面，否则会出现getContext()没有定义的错误--> <script> var can = document.getElementById("mycanvas"); var ct = can.getContext("2d"); //属性： //这里需要注意的一点是：有关阴影部分的内容要写在其他的前面才会有效果 ct.shadowColor = "black";//阴影的颜色 ct.shadowBlur = 20;//模糊的等级 ct.shadowOffsetX = 10;//设置或返回阴影与形状的水平距离 ct.shadowOffsetY = 20; ct.fillStyle = "#FF0000";//填充的颜色 ct.fillRect(20,20,150,100); ct.strokeStyle = "blue";//笔触颜色，就是边框的颜色 ct.strokeRect(20,20,150,100); //方法： /* createLinearGradient() 方法创建线性的渐变对象。 渐变可用于填充矩形、圆形、线条、文本等等。 提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。 提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。 ct.createLinearGradient(x0,y0,x1,y1);其中x0是渐变开始的横坐标,y0是渐变开始的纵坐标,x1是渐变结束的横坐标,y1是渐变结束的纵坐标 */ var grd1=ct.createLinearGradient(0,0,170,0); grd1.addColorStop(0,"black"); grd1.addColorStop(0.25,"red"); grd1.addColorStop(0.5,"blue"); grd1.addColorStop(0.75,"green"); grd1.addColorStop(1,"white"); ct.fillStyle=grd1; ct.fillRect(20,20,150,100); /* createPattern() 方法在指定的方向内重复指定的元素。 元素可以是图片、视频，或者其他 <canvas> 元素。 被重复的元素可用于绘制/填充矩形、圆形或线条等等。 ct.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); 其中image规定要使用的模式的图片、画布或视频元素。 repeat,默认值，该模式在水平和垂直方向重复。 */ var img=document.getElementById("lamp"); var pat=ct.createPattern(img,"repeat"); ct.rect(0,0,150,100); ct.fillStyle=pat; ct.fill(); /* createRadialGradient() 方法创建放射状/圆形渐变对象。 渐变可用于填充矩形、圆形、线条、文本等等。 提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。 提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。 ct.createRadialGradient(x0,y0,r0,x1,y1,r1); x0 yo x1 y1如上所述，r0表示的是开始圆的半径,y1表示的是结束圆的半径 */ var grd2=ct.createRadialGradient(10,10,5,90,60,100); grd2.addColorStop(0,"red"); grd2.addColorStop(1,"white"); ct.fillStyle=grd2; ct.fillRect(10,10,150,100); /* rect() 方法创建矩形。rectangle 提示：请使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。 ct.rect(x,y,width,height); 其中ｘ是矩形左上角的x坐标，ｙ是矩形左上角的y坐标，width是矩形的宽度，以像素计 stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。 提示：请使用 strokeStyle 属性来绘制另一种颜色/渐变。 ct.stroke(); beginPath() 方法开始一条路径，或重置当前的路径。 提示：请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。 提示：请使用 stroke() 方法在画布上绘制确切的路径。 ct.beginPath(); */ // Red rectangle ct.beginPath(); ct.lineWidth="6"; ct.strokeStyle="red"; ct.rect(5,5,290,140); ct.stroke(); // Green rectangle ct.beginPath(); ct.lineWidth="4"; ct.strokeStyle="green"; ct.rect(30,30,50,50); ct.stroke(); // Blue rectangle ct.beginPath(); ct.lineWidth="10"; ct.strokeStyle="blue"; ct.rect(50,50,150,80); ct.stroke(); ct.beginPath(); ct.moveTo(20,20); ct.lineTo(20,100); ct.lineTo(70,100); ct.strokeStyle="red"; ct.stroke(); /* fill() 方法填充当前的图像（路径）。默认颜色是黑色。 提示：请使用 fillStyle 属性来填充另一种颜色/渐变。 注意：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线， 以关闭该路径（正如 closePath() 一样），然后填充该路径 */ ct.rect(20,20,150,100); ct.fillStyle="red"; ct.fill(); </script> </body> </html>
新多媒体元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新多媒体元素</title> </head> <body> <!-- autoplay 如果出现该属性，则音频在就绪后马上播放。 controls 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 loop 如果出现该属性，则每当音频结束时重新开始播放。 muted 如果出现该属性，则音频输出为静音。 preload 值有：auto metadata none 规定当网页加载时，音频是否默认被加载以及如何被加载。 src 规定音频文件的 URL。 video和audio的属性差不多的，只是多了一个poster,值为url，规定视频正在下载时显示的图像，知道用户点击播放按钮 --> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 video 标签。 </video> <embed src="" type=""><!--定义嵌入的内容，比如插件。--> <track><!--为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。--> <video width="320" height="240" controls> <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video> </body> </html>
拖拽事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽事件</title> <style type="text/css"> #div1, #div2 {float:left; 200px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault();//因为默认是无法将数据拖拽到其他元素的，所以这里要阻止默认事件 } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);//设置被拖数据的数据类型和值 } function drop(ev) { ev.preventDefault();//这里因为drop的默认事件是以链接的方式打开，所以这里要阻止默认事件 var data=ev.dataTransfer.getData("Text");//获取在 setData() 方法中设置为相同类型的任何数据 ev.target.appendChild(document.getElementById(data));//将获取到的数据插入目标元素中 } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <p id="e" ondragstart="drag(event)" draggable="true" >太阳能路灯价格</p></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
获取地理位置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>获取地理位置</title> </head> <body> <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p> <button onclick="getLocation()">点我</button> <!-- 检测是否支持地理定位 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象 showPosition() 函数获得并显示经度和纬度 当然我可以使用watchPosition()来代替getCurrentPosition()方法，返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS） 使用clearWatch() 来停止watchPosition()方法 --> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError);//这里可以接受两个参数，第二个为可选的 } else { x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="用户拒绝对获取地理位置的请求。" break; case error.POSITION_UNAVAILABLE: x.innerHTML="位置信息是不可用的。" break; case error.TIMEOUT: x.innerHTML="请求用户地理位置超时。" break; case error.UNKNOWN_ERROR: x.innerHTML="未知错误。" break; } } </script> </body> </html>