HTML5小例子
1.很酷的語音輸入(目前只有谷歌瀏覽器支持)
?
<!DOCTYPE html>
<html> <head> <!--<link href="/html.js" />--> <title>HTML5 </title> <style> </style> </head> <body> 請輸入：<input type=text x-webkit-speech /> </body> </html>?
2.HTML5的INPUT標簽（火狐瀏覽器支持，不支持IE）
<!DOCTYPE html>
<html> <head> <!--<link href="/html.js" />--> <title>HTML5 </title> <style> </style> </head> <body> <form id="form1" name="form1" method="post" action=""> E-mial格式自動驗證： <input type="email" name="email" /><br/> url自動驗證： <input type="url" /><br/> 數(shù)字自動驗證： <input type="number" max="9" min="-9" step="1"/><br/> <input type="submit" name="Submit" value="提交" /><br/> 滑動條： <input type="range" ?min="1" max="10" /> </form> <br/> 選擇下拉填充： <input id="search" type="url" list="searchlist" required /> <datalist id="searchlist"> <option value="http://www.google.com" label="谷歌" /> <option value="http://www.yahoo.com" label="雅虎" /> <option value="http://www.baidu.com" label="百度" /> </datalist> <input type="button" name="button" value="GO" /><br/> <hr> <input type="datetime"> </body> </html> 2.HTML的畫圖功能（火狐瀏覽器支持，不支持IE） <!DOCTYPE HTML> <html> <head> <!--[if IE]> <script src="html5.js"></script> <![endif]--> <title>畫布</title> <style></style> </head> <body> <canvas id="myCanvas">HTML5 圖形</canvas> <canvas id="can">HTML5 圖形</canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='green'; ctx.fillRect(10,10,180,200); ctx.strokeStyle="red"; ctx.clearRect (20, 20, 90, 90); ctx.strokeRect(30,30,50,50); var canv = document.getElementById('can'); if (canv.getContext) { ? ?var c = canv.getContext('2d'); ? ? ?c.strokeStyle='#00f'; ? ? ?c.beginPath(); ? ?c.arc(100,100,50,180,0.5*Math.PI, true);? ? ? ?c.stroke(); } </script> </body> </html>轉(zhuǎn)載于:https://blog.51cto.com/dunizb/798005
總結(jié)
- 上一篇： Redo Log 和Checkpoint
- 下一篇： 深入理解JavaScript中的this