es6简单基础：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  5.     <title>1</title>
  6.     <style type="text/css">
  7.     *{margin: 0;padding: 0;}
  8.     </style>
  9.     <script type="text/javascript">
  10.     /*
  11.     let const 只在申明的块中有效
  12.     const申明的变量，类型不能变 var可以变类型
  13.     const申明常量用大写
  14.     */
  15.     var a=1;
  16.     {
  17.         let a=3;
  18.         console.log(a);
  19.         const ARR=[1,2];
  20.         ARR.push(3);
  21.         console.log(ARR);
  22.         // ARR=10;//此处会报错
  23.     }
  24.     console.log(a);
  25.     {
  26.         let a=(x)=>(x*2);
  27.         console.log(a(10));
  28.     }
  29.     {
  30.         let a=(x,y=10)=>(x+y);
  31.         console.log(a(2),a(2,3));
  32.     }
  33.     {
  34.         let a=(x)=>function(){
  35.             return 2;
  36.         }();
  37.         console.log(a(1));
  38.     }
  39.     {
  40.         let a=[1,2,3];
  41.         let b=a.map(f=>{
  42.             return f+'s';
  43.         });
  44.         console.log(b);
  45.     }
  46.     {
  47.         function Person(){
  48.             this.age=0;
  49.             this.addAge=()=>(this.age++);
  50.         }
  51.         let p=new Person();
  52.         p.addAge();
  53.         console.log(p.age);
  54.     }
  55.  
  56.     //创建canvas及画图
  57.     let newCanvas=()=>{
  58.         let c=document.createElement("canvas");
  59.         c.width=window.screen.width;
  60.         c.height=window.screen.height;
  61.         let d=c.getContext("2d");
  62.         d.fillStyle="red";
  63.         d.fillRect(10,10,100,100);
  64.         return c;
  65.     };
  66.     //canvas保存为图片
  67.     let canvasToImg=(canvas)=>{
  68.         let image=new Image();
  69.         image.src=canvas.toDataURL('image/png');
  70.         return image;
  71.     };
  72.  
  73.     window.onload=()=>{
  74.         //写出canvas图片
  75.         document.body.appendChild(canvasToImg(newCanvas()));
  76.     }
  77.     </script>
  78. </head>
  79. <body>
  80.  
  81. </body>
  82. </html>

1.html

预览本地文件：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.         <title>预览本地文件</title>
  7.         <style type="text/css">
  8.         video{
  9.             background-color: #000;
  10.         }
  11.         </style>
  12.         <script type="text/javascript">
  13.         /**
  14.         * 从 file 域获取 本地图片 url
  15.         */
  16.         function getFileUrl(sourceId) {
  17.             var url;
  18.             if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
  19.                 url = document.getElementById(sourceId).value;
  20.             } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
  21.                 url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
  22.             } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
  23.                 url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
  24.             }
  25.             return url;
  26.         } 
  27.  
  28.         /**
  29.         * 将本地图片 显示到浏览器上
  30.         */
  31.         function preImg(sourceId, targetId){
  32.             var url = getFileUrl(sourceId);
  33.             console.log(sourceId,targetId);
  34.             var imgPre = document.getElementById(targetId);
  35.             imgPre.src = url;
  36.         }
  37.         </script>
  38.     </head>
  39.     <body>
  40.         <form action="">
  41.             <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
  42.             <!-- <img id="imgPre" src="" width="300px" height="300px" style="display: block;" />  -->
  43.             <video id="imgPre" width="300px" height="300px" controls="controls" style="display: block;"></video>
  44.         </form>
  45.     </body>
  46. </html>

2.html

es5预览本地文件、es6练习代码演示案例的更多相关文章

  1. 文档控件NTKO OFFICE 详细使用说明之预览PDF文件（禁止打印、下载、另存为、防抓包下载）

    1.在线预览PDF文件(禁止打印.下载.复制.另存为) (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将ww ...

  2. linux在线预览pdf文件开发思路

    准备:swftools,flexpaper 基本思路: 1,将pdf文件转化成swf文件 2,使用flexpaper预览swf文件 主要代码: 1,在linux中安装swftools.官网下载swft ...

  3. ASP.NET MVC 项目直接预览PDF文件

    背景及需求 项目使用的是MVC4框架,其中有一个功能是根据设置生成PDF文件,并在点击时直接预览. 实现过程 1.第一版实现代码: HTML内容 @{ Layout = null; } <!DO ...

  4. 用pdf.js实现在移动端在线预览pdf文件

    用pdf.js实现在移动端在线预览pdf文件1.下载pdf.js    官网地址:https://mozilla.github.io/pdf.js/ 2.配置    下载下来的文件包,就是一个demo ...

  5. WinForm中预览Office文件

    WinForm预览Office文档 使用WinForm, WPF, Office组件 原理:使用Office COM组件将Word,Excel转换为XPS文档, 将WPF的DocumentViewer ...

  6. 文档控件NTKO OFFICE 详细使用说明之预览Excel文件（查看、编辑、保存回服务器）

    1.在线预览Excel文件 (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将www.ntko.com加入到浏 ...

  7. HTML页面预览表格文件内容

    背景简介 在将一个表格文件上传到服务器上之前,JS读取表格文件并将文件内容输出到页面中 vue项目 第三方 exceljs 安装 npm install exceljs 插件使用 github 中文文 ...

  8. Android开发中遇到的问题(三)——eclipse创建android项目无法正常预览布局文件

    一.问题描述 今天使用SDK Manager将Android SDK的版本更新到了Android 5.1的版本,eclipse创建android项目时,预览activity_main.xml文件时提示 ...

  9. 使用qmlscene预览qml文件

    功能:可以预览qml文件的界面 使用:qmlscene myapp.qml

随机推荐

  1. JQuery插件开发标准写法

    ;//step01 定义JQuery的作用域 (function ($) { //step03-a 插件的默认值属性 var defaults = { prevId: 'prevBtn', prevT ...

  2. 《深入浅出node.js(朴灵)》【PDF】下载

    <深入浅出node.js(朴灵)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062563 内容简介 <深入浅出Node. ...

  3. 4.python迭代器生成器装饰器

    容器(container) 容器是一种把多个元素组织在一起的数据结构,容器中的元素可以逐个地迭代获取,可以用in, not in关键字判断元素是否包含在容器中.通常这类数据结构把所有的元素存储在内存中 ...

  4. 3. python文件操作

            5 打开文件的模式有: r,只读模式(默认). w,只写模式.[不可读:不存在则创建:存在则删除内容:] a,追加模式.[可读:   不存在则创建:存在则只追加内容:]        ...

  5. Visual Studio Code 快捷键大全（Windows）

    Visual Studio Code 是一款优秀的编辑器,非常适合编写 TS 以及 React .最近在学习 AngularJs 2,开始使用 VSCode,特意整理翻译了一下官网的快捷键.因为已经习 ...

  6. Docker容器中开始.NETCore之路

    一.引言 开始写这篇博客前,已经尝试练习过好多次Docker环境安装,.Net Core环境安装了,在这里替腾讯云做一个推广,假如我们想学习.练手.net core 或是Docker却苦于没有开发环境 ...

  7. hbase rest api接口链接管理【golang语言版】

    # go-hbase-resthbase rest api接口链接管理[golang语言版]关于hbase的rest接口的详细信息可以到官网查看[http://hbase.apache.org/boo ...

  8. BZOJ4970 IOI2004 empodia障碍段

    4970: [ioi2004]empodia 障碍段 Time Limit: 10 Sec  Memory Limit: 128 MB Description 古数学及哲学家毕氏相信自然之本质为数学. ...

  9. nginx搭建rtmp协议流媒体服务器总结

    最近在 ubuntu12.04+wdlinux(centos)上搭建了一个rtmp服务器,感觉还挺麻烦的,所以记录下. 大部分都是参考网络上的资料. 前提: 在linux下某个目录中新建一个nginx ...

  10. Nginx (二) Nginx的反向代理负载均衡以及日志切割

    Nginx是一个高并发,高性能的服务器,可以进行反向代理以及网站的负载均衡.这些功能的运用都在配置文件中,也就是Nginx安装目录下的conf/nginx.conf. nginx.conf 1. 先来 ...