es6简单基础:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>1</title> <style type="text/css"> *{margin: 0;padding: 0;} </style> <script type="text/javascript"> /* let const 只在申明的块中有效 const申明的变量,类型不能变 var可以变类型 const申明常量用大写 */ var a=1; { let a=3; console.log(a); const ARR=[1,2]; ARR.push(3); console.log(ARR); // ARR=10;//此处会报错 } console.log(a); { let a=(x)=>(x*2); console.log(a(10)); } { let a=(x,y=10)=>(x+y); console.log(a(2),a(2,3)); } { let a=(x)=>function(){ return 2; }(); console.log(a(1)); } { let a=[1,2,3]; let b=a.map(f=>{ return f+'s'; }); console.log(b); } { function Person(){ this.age=0; this.addAge=()=>(this.age++); } let p=new Person(); p.addAge(); console.log(p.age); } //创建canvas及画图 let newCanvas=()=>{ let c=document.createElement("canvas"); c.width=window.screen.width; c.height=window.screen.height; let d=c.getContext("2d"); d.fillStyle="red"; d.fillRect(10,10,100,100); return c; }; //canvas保存为图片 let canvasToImg=(canvas)=>{ let image=new Image(); image.src=canvas.toDataURL('image/png'); return image; }; window.onload=()=>{ //写出canvas图片 document.body.appendChild(canvasToImg(newCanvas())); } </script> </head> <body> </body> </html>
预览本地文件:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>预览本地文件</title> <style type="text/css"> video{ background-color: #000; } </style> <script type="text/javascript"> /** * 从 file 域获取 本地图片 url */ function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE")>=1) { // IE url = document.getElementById(sourceId).value; } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } /** * 将本地图片 显示到浏览器上 */ function preImg(sourceId, targetId){ var url = getFileUrl(sourceId); console.log(sourceId,targetId); var imgPre = document.getElementById(targetId); imgPre.src = url; } </script> </head> <body> <form action=""> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> <!-- <img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> --> <video id="imgPre" width="300px" height="300px" controls="controls" style="display: block;"></video> </form> </body> </html>