JAVASCRIPT DOM编程艺术读书笔记

第十一章 HTML5

创建灰度图片，但是在IE中可以执行，在Chome中却不行，getImageData报错

                     1       
        2       
        3       
        4       
        5       
        6       
        7       
        8       
        9       
        10       
        11       
        12       
        13       
        14       
        15       
        16       
        17       
        18       
        19       
        20       
        21       
        22       
        23       
        24       
        25       
        26       
        27       
        28       
        29       
        30       
        31       
        32       
        33       
        34       
        35       
        36       
        37       
        38       
        39       
        40       
        41       
        42       
        43       
        44       
        45       
        46       
               function convertToGS(img) {        
             //Modernizr是一个Javascript库，检测浏览器是否支持canvas        
             if(!Modernizr.canvas) return;        
                  
             //保存原始的彩色版        
             img.color = img.src;        
                  
             //创建灰度版        
             img.grayscale = createGSCanvas(img);        
                  
             img.onmouseover = function () {        
                 this.src = this.color;        
             }        
                  
             img.onmouseout = function () {        
                 this.src = this.grayscale;        
             }        
                  
             img.onmouseout();        
         }        
                  
         function createGSCanvas(img) {        
                  
             var canvas = document.createElement("canvas");        
             canvas.width = img.width;        
             canvas.height = img.height;        
                  
             var ctx = canvas.getContext("2d");        
                  
             ctx.drawImage(img,0,0);        
                  
             //获取图片区域的数据,data属性返回一个对象，包含了image对象的图片数据 即r  g  b A(alpha通道)        
             var img_data = ctx.getImageData(0,0,img.width,img.height);        
                  
             for(var i =0; i < img_data.data.length; i += 4)        
             {        
                 var r = img_data.data[i];        
                 var g = img_data.data[i + 1];        
                 var b = img_data.data[i + 2];        
                  
                 img_data.data[i] = img_data.data[i + 1] = img_data.data[i + 2] = (r + g +b)/3;        
             }        
                  
             ctx.putImageData(img_data,0,0);<br>//返回图片内容作为新的灰度图片的源        
             return canvas.toDataURL();        
         }        
     
     

HTML5 video 自定义控件部分js代码

function addControls(vid) {

    vid.removeAttribute("controls");　　//移除浏览器默认的控件 var controls = document.createElement("div");
    controls.setAttribute("class","controls"); var play = document.createElement("button");
    play.setAttribute("title","play"); // play.innerHTML = '&#25BA;'; play.innerHTML = '&#x25BA;';　　//note!!!

    controls.appendChild(play);

    vid.parentNode.insertBefore(controls,vid);
    
    play.onclick = function () {if(vid.ended)
            vid.currentTime = 0; if(vid.paused)
        {
            vid.play();
        } else {
            vid.pause();
        }
    } //利用play pasue ended事件来监控 vid.addEventListener("play",function () {　　//当视频正在播放时 会触发play事件 跑这个函数
        play.innerHTML = '&#x2590;&#x2590;';
        play.setAttribute('paused', true);

    },false);　　　　　　//第三个参数为false 说明由外往里获取  true的话说明是由里王外获取

    vid.addEventListener("pause",function () {　　//当视频暂停时 会触发pause事件 跑这个函数
        play.removeAttribute('paused');
        play.innerHTML = '&#x25BA;';

    },false);

    vid.addEventListener("ended",function () {
        vid.pause();
    },false);

}

HTML5 表单

为了应对不兼容浏览器，可以进行兼容性检查可以使用inputtypes.type属性比如 if(！Modernizr.inputtypes.date) --检查生成日期的脚本 if(！Modernizr.inputtypes.placeholder) --检查生成占位符的脚本

onFocus事件就是当光标落在文本框中时发生的事件。

onBlur事件是光标失去焦点时发生的事件。

#笔记##读书笔记#

全部评论

推荐最新楼层

01-23 15:35

University of Edinburgh 嵌入式软件工程师

绷不住了，找了一个月实习嵌入式还找不到

2本硕，在这一个下午真的绷不住了，浪费了太多时间，现在的技术栈还停在C语言和stm32上，找嵌入式的实习面试被拷打，找杭州的一个也找不到，真的心里难受，linux没学过，研二了开始慌了。

一条淡水魚：嵌入式这行的面试我认为实际项目比较重要，技术栈简单的提一嘴就行，面试官在乎的关键点在于你用了这些技术做了哪些工作解决了什么问题，而不是停留在离散的那些个技术栈上，那除了教课没有意义，好比你提到的c语言和32，你用32做过哪些具体的项目？接触过什么外设？使用过哪些公司的SDK？有没有实际产品落地？以及各种只有进入真正的生产环节当中才会积累到的经验......主动去和面试官讨论这些实际的问题，甚至还能就某个具体参数的合理性与他去简单探讨一下，只要技术栈对口，基本上就稳啦~（另外linux和RTOS是嵌入式的标配哦，选一个方向走下去吧）

点赞评论收藏