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. springboot整合系列

    Spring Boot 系列 博客原文:http://blog.csdn.net/isea533/article/details/50412212 Spring Boot 入门 Spring Boot ...

  2. mybatis 整合spring之mapperLocations配置的问题

    今天尝试spring整合mybatis时遇到这么一个问题,就是在配置sqlSessionFactory时是否要配置mapperLocations的问题. <bean id="sessi ...

  3. 【JMeter】获取json响应报文中数组长度

    import com.jayway.jsonpath.JsonPath; import com.jayway.jsonpath.Predicate; import net.minidev.json.J ...

  4. UITableView的性能优化

    UITableView作为ios中使用最频繁的控件之一,其性能优化也是常常要面对的,尤其是当数据量偏大并且设备性能不足时.本文旨在总结tableview的几个性能优化tips,并且随着认识的深入,本文 ...

  5. iOS超全开源框架、项目和学习资料汇总--数据库、缓存处理、图像浏览、摄像照相视频音频篇

    iOS超全开源框架.项目和学习资料汇总--数据库.缓存处理.图像浏览.摄像照相视频音频篇 感谢:Ming_en_long 的分享 大神超赞的集合,http://www.jianshu.com/p/f3 ...

  6. python各种类型的转换

    #进制转换 ord(x) #将一个字符转换为它的整数值 hex(x) #将一个整数转换为一个十六进制字符串 oct(x) #将一个整数转换为一个八进制字符串 #类型转换int(x [,base ]) ...

  7. Anaconda多版本Python管理

    Anaconda是一个集成python及包管理的软件,记得最早使用时在2014年,那时候网上还没有什么资料,需要同时使用py2和py3的时候,当时的做法是同时安装Anaconda2和Anaconda3 ...

  8. ArcGIS API for JavaScript 4.2学习笔记[24] 【IdentifyTask类】的使用（结合IdentifyParameters类）（第七章完结）

    好吧,我都要吐了. 接连三个例子都是类似的套路,使用某个查询参数类的实例,结合对应的Task类,对返回值进行取值.显示. 这个例子是Identify识别,使用了TileLayer这种图层,数据来自Se ...

  9. 插值查找C++

    和上一篇折半查找很类似,只有四则运算不一样,思想类似. 只是在插值查找的过程中,考虑了查找键的值. #include <iostream> using namespace std; //需 ...

  10. 学习rollup.js模块文件打包

    学习rollup.js模块文件打包 一:rollup 是什么?Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码. webpack 和 Rollup 对比不同点 ...