JavaScript DOM编程艺术读书笔记

Posted 2020-08-26

第十章 实现动画效果

var repeat = "moveElement(‘"+elementID+"‘,"+final_x+","+final_y+","+interval+")"; 第一个参数是个字符串，所以需要单引号!!!

move_elem = setTimeout(repeat,interval);　　//复制给一个变量，当我们想取消一个正在排队等待执行的函数，可以用clearTimeout(move_elem);   interval参数表示在多少秒之后执行函数(单位是毫秒)

var xpos = parseInt(elem.style.left);　　//parseInt提取整数，比如50px，使用这个函数后返回的就是50  当然还有parseFloat

 

 CSS overflow属性，可以对内容进行裁剪，只让一部分内容显示，他可以有四种取值

 1：visible  不可裁剪一出内容，浏览器将溢出内容显示在容器之外，内容全部可见

 2：hidden 隐藏溢出内容，溢出容器区域的内容被隐藏，只有一部分可见

 3：scroll  类似于hidden 但是多出了一个滚动条，可以滚动看到隐藏内容

 4：auto  类似于scroll 但只有容器发生溢出是才自动显示出一个滚动条，如果内容没有溢出，不显示滚动条

 

 position设置为relative (0，0)坐标将会重新定义  相对定位，参照父级原始点

 

javascript 允许我们为元素创建属性，比如

var elem = document.getElementById(elementID);

elem.movement = setTimeout(repeat,interval);　　//elem.movement 这很像创建一个变量 但是这个变量只是专属于元素elementID

 

抽象的通用函数moveElement如下

function moveElement(elementID,final_x,final_y,interval) {

    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;

    var elem = document.getElementById(elementID);
    if(elem.movement)　　　　　　　　　　//有的时候会出现第一个函数还没执行完，我们又跑去执行第二个函数，这种情况下 可能出错  所以我们价格判断 然后clearTimeout
    {
        clearTimeout(elem.movement);
    }

    if(!elem.style.left)   elem.style.left = "0px";
    if(!elem.style.top)    elem.style.top = "0px";

    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    var dist = 0;

    if(xpos == final_x && ypos == final_y)  return true;
/*
Math对象 　　ceil方法,向大于方向舍入为最接近的整数
　　　　　　　floor方法，向小宇方向舍入为最接近的整数
　　　　　　  round方法，将任意浮点数舍入为与之最接近的整数
*/
    if(xpos < final_x)
    {
        dist = Math.ceil((final_x - xpos)/10);　　　　//每次移动十分之一，加快移动速度

        xpos += dist;
    }
    else if(xpos > final_x)
    {
        dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
    }

    if(ypos < final_y)
    {
        dist = Math.ceil((final_y - ypos)/10);
        ypos += dist;
    }
    else if(ypos > final_y)
    {
        dist = Math.ceil((ypos - final_y)/10);
        ypos = ypos - dist;
    }

    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";

    var repeat = "moveElement(‘"+elementID+"‘,"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);
}

 

    <div id="slideshow">
        <img src="topics.gif" alt="building blocks of web design" id="preview">
    </div>
这一段只是为了javascript而存在的，可以在js中实现这段 需要注意的是：

#preview{
　　position:absolute;
}
这一段在CSS中不可以缺少，否则实现不了动画效果！！

 

第十一章 html5

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

　　

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);
　　//返回图片内容作为新的灰度图片的源
    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 = ‘►‘;　　//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 = ‘▐▐‘;
        play.setAttribute(‘paused‘, true);

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

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

    },false);

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

}

 

HTML5 表单

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

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

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

 

以上是关于JavaScript DOM编程艺术读书笔记的主要内容，如果未能解决你的问题，请参考以下文章

Javascript DOM 编程艺术读书笔记16/03/26

Javascript DOM 编程艺术读书笔记16/04/02

《Javascript DOM编程艺术》 读书笔记

JavaScript DOM编程艺术读书笔记

JavaScript DOM编程艺术读书笔记

JavaScript DOM编程艺术 读书笔记 第3章 DOM-文档对象模型