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. UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 46:illegal multibyte sequence

    一. 最近使用python写入文件时,出现了如下的错误: 但是content的内容是unicode编码,不知道怎么和gbk扯上了关系,对content使用encode()和decode(),用gbk, ...

  2. spring mvc对静态资源的访问

    如果我们的项目使用的是springmvc,在web.xml中会有一段这的配置. <servlet> <servlet-name>springMvc</servlet-na ...

  3. chrome调试，打完断点后关于JS的几个控制介绍

    打完断点之后,关于JS的几个控制介绍. 快捷键:F8 "逐过程执行",继续执行代码,直到遇到下一个断点. 详细解释: 暂停和开始.当设置了断点之后,js的执行就暂停了,如果我们想要 ...

  4. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  5. 3.更改ssh服务远程登录的配置

  6. 【java】io流之字节流转为字符流：java.io.OutputStreamWriter和java.io.InputStreamReader

    package 文件操作; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; impo ...

  7. Button的五种点击事件

    1.内部类方式 class MyOnClickListener implements View.OnClickListener{ /** * Called when a view has been c ...

  8. xcode编译报错unknown error -1=ffffffffffffffff Command /bin/sh failed with exit code 1

    升级完xcode9.1之后,编译项目出现如下错误: CI今日构建时报出如下错误: /Users/xxx/Library/Developer/Xcode/DerivedData/Snowball-ebl ...

  9. bzoj 3139: [Hnoi2013]比赛

    Description 沫沫非常喜欢看足球赛,但因为沉迷于射箭游戏,错过了最近的一次足球联赛.此次联 赛共N支球队参加,比赛规则如下: (1) 每两支球队之间踢一场比赛. (2) 若平局,两支球队各得 ...

  10. PredictionIO+Universal Recommender快速开发部署推荐引擎的问题总结(3)

    PredictionIO+Universal Recommender虽然可以帮助中小企业快速的搭建部署基于用户行为协同过滤的个性化推荐引擎,单纯从引擎层面来看,开发成本近乎于零,但仍然需要一些前提条件 ...