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>

1.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>

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. 在Azure Container Service创建Kubernetes（k8s）群集运行ASP.NET Core跨平台应用程序

    引子 在此前的一篇文章中,我介绍了如何在本地docker环境中运行ASP.NET Core跨平台应用程序(http://www.cnblogs.com/chenxizhang/p/7148657.ht ...

  2. dubbo2.5.6从下载到编译成功并且部署成功过程

    本文基于dubbo2.5.6版本 原文链接:http://www.cnblogs.com/zhuwenjoyce/       1,下载dubbo 首先从 github 下载源代码并阅读 readme ...

  3. spring-boot学习笔记之Conditional

    今天看了@Conditional,自己根据以下文章练了下,根据自己的理解操作的             转载出处:http://wiselyman.iteye.com/blog/2213054 17. ...

  4. Android studio导入eclipse项目（亲测）

    之前上网搜索的时候,网上都说先用eclipse导出gradle,之后再用Android Studio的import project导入,但是这个方法使用的过程中会出现许多错误,解决了一个又一个还是不得 ...

  5. iOS APP跳转设置界面以及设置中的其他界面

    1.跳转设置总页面(iOS10+以及之前的都可以用:ios10+ 是跳转到了应用到设置界面) [[UIApplication sharedApplication]openURL:[NSURL URLW ...

  6. 1_3 C语言解决求n！

    求n!(n为键盘输入的任意整数值).要求分别用while语句和for语句实现 用while语句实现: #include <stdio.h> int main() { int n; scan ...

  7. dropout理解：1神带9坑

    Dropout是深度学习中防止过拟合的一项非常常见的技术,是hinton大神在12年提出的一篇论文里所采用的方法.有传言hinton大神的数学功底不是很好,所以他所提出的想法背后的数学原理并不是很复杂 ...

  8. MySQL锁总结

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/78 MySQL 锁基础 参考了何登成老师文章的结构MySQL 加 ...

  9. bzoj 3207: 花神的嘲讽计划Ⅰ

    Description 背景 花神是神,一大癖好就是嘲讽大J,举例如下: "哎你傻不傻的![hqz:大笨J]" "这道题又被J屎过了!!" "J这程序 ...

  10. SpringMVC对包的扫描范围扩大后，导致的事务配置不生效问题

    问题场景 项目使用的框架:Spring 4.1.4 + Hibernate 4.3.8 + MySQL. web.xml中对Spring的配置: <!-- 把 Spring 容器集成到 Web ...