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. strus2项目中百度编辑器运用的几点细节

    百度编辑器的运用可以参考我之前写的一篇文章,在java项目中加入百度富文本编辑器.这篇文章是以maven+spring mvc项目进行的,总得来说配置比较简单,但是如果是想在strus2项目中配置ue ...

  2. Eclipse 使用小结

    代码智能提示 Java智能提示 Window -> Preferences -> Java -> Editor -> Content Assist -> Auto Act ...

  3. .Net版InfluxDB客户端使用时的一些坑

    1.如果应用程序是WebAPi,则需要使用同步版的InfluDB客户端 2.如果应用程序是Winform或Console程序或Windows服务,则使用同步或异步版客户端都可以,建议用异步版 3.如果 ...

  4. MySQL学习（二）复制

        复制解决的问题是保持多个服务器之间的数据的一致性,就如同通过复制保持两个文件的一致性一样,只不过MySQL的复制要相对要复杂一些,其基本过程如下:     1)在主库上将数据更改记录到二进制日 ...

  5. XSS注入,js脚本注入后台

    曾经一度流行sql注入,由于现在技术的更新,已经看不到这问题了,但是又出来新的安全问题,XSS攻击,他的原理就是在前端提交表单的时候,在input标签当中输入js脚本,通过js脚本注入后台,请看下图. ...

  6. 当前时间、前n天、后n天、取前n条记录、从第n条开始取m条

    当前时间:NOW() 前n天:DATE_SUB(NOW(),INTERVAL n DAY) 后n天:DATE_SUB(NOW(),INTERVAL -n DAY) 取前n条记录:SELECT * FR ...

  7. jQuery架构（源码）分析

    ( function( global, factory ) { "use strict"; if ( typeof module === "object" &a ...

  8. iOS: FFmpeg编译和使用 学习

    ffmpeg是一个多平台多媒体处理工具,处理视频和音频的功能非常强大.目前在网上搜到的iOS上使用FFMPEG的资料都比较陈旧,而FFMPEG更新迭代比较快: 且网上的讲解不够详细,对于初次接触FFM ...

  9. iOSXML & JSON 简介

    XML & JSON 简介 •JSON –作为一种轻量级的数据交换格式,正在逐步取代XML,成为网络数据的通用格式 –基于JavaScript的一个子集 –易读性略差,编码手写难度大,数据量小 ...

  10. PHP中静态方法和实例化方法的区别

    在PHP中类为什么要使用静态方法,有什么好处 不需要实例化?? 可以提高运行效率?? 这是一个经常被时时提出来的问题,很多时候我们以为理解了.懂了,但深究一下,我们却发现并不懂. 方法是我们每天都在写 ...