zoukankan      html  css  js  c++  java
  • es5预览本地文件、es6练习代码演示案例

    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
  • 相关阅读:
    UIStoryBoard 中修改控件borderColor
    iOS自定义AlertView 与 ActionSheet 遮罩提示+弹出动画
    iOS开发 UIWebView+JavaScript 交互总结
    【注入攻击】SQL注入(不完整总结)
    [内存溢出]栈溢出基础版
    [Windows驱动开发]之内存管理
    [找工作]程序员面试宝典【笔记】(part 1)
    [Windows安装]安装程序无法创建新的系统分区,也无法定位现有系统分区
    M1卡分析
    [逆向/壳]脱壳方法
  • 原文地址:https://www.cnblogs.com/wuhairui/p/8067070.html
Copyright © 2011-2022 走看看