20171020

1.运动函数封装

1.一级

 备注:接受两个参数,一个是被操作对象,另一个是目标位置,
 缺陷:只能实现单一方向的运动

    var one = document.getElementById("one");
    调用:animate(one,500);
eg:
 function animate(obj,target){
        clearInterval(timer);
        timer = setInterval(function(){
            var speed = (target -obj.offsetLeft )/10;//实现速度递减
    //对速度取值,修复不能到达指定参数的缺陷
            if(speed>0){
                speed = Math.ceil(speed);
            }else if(speed<0){
                speed = Math.floor(speed)
            }
            if(obj.offsetLeft == 500){
                clearInterval(timer)
            }
            obj.style.left = obj.offsetLeft + speed +"px";
        },30)
    }

2.二级

备注:接受三个参数,一个是被操作对象,一个是被改变得属性,一个被改变属性的目标值
eg:
var box = document.getElementById("box");
    var timer= null;
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return window.getComputedStyle(obj,null)[attr];
        }
    }

    function move(obj,attr,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var current = parseFloat(getStyle(obj,attr));
            var speed =( target-current)/8;
            speed = speed>0?Math.ceil(speed):Math.floor(speed)
            console.log(speed);
           if(target==current){
               clearInterval(timer)
           }else{
                obj.style[attr] = current +speed+"px";
           }
        },30)
    }
    for(var i=0;i<box.children.length;i++){
        box.children[i].index = i;
        box.children[i].onmouseover = function(){
            move(box.children[this.index],"left",500)
        }
        box.children[i].onmouseout = function(){
            move(box.children[this.index],"left",0)
        }
    }

3.三级

备注:可以接受两个参数,第一个是被操作对象,另一个是json,将移动的属性和值存在json里,可以实现多参数传递,例如left值,top值,width值等
缺陷:不可传透明度,z-index值
eg:
var one = document.getElementById("one");
    var btn = document.getElementsByTagName("button")[0];
    var timer= null;
    btn.onclick = function(){
        animate(one,{"top":"500","left":"300"});
    };
    function animate(obj,json){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
                for(var attr in json ) {
                    var current = parseInt(getstyle(one, attr));
                    var speed = (json[attr] - current ) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (obj.style[attr] == json[attr]) {
                        clearInterval(obj.timer)
                    }
                    obj.style[attr] = current + speed + "px";
                }
            },30)
        }

4.四级

备注:可以传透明度,z-index,
eg:
//运动函数
function move(obj,attrobj,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var flag = true;
        for(var prop in attrobj){//遍历对象,得到对应属性和属性值
            var current;
            //当属性为透明度时,current的值的算法
            if(prop == "opacity"){
                current = Math.round(parseInt(getStyle(obj,prop)*100)) || 0
            }else{
                //是其他属性时,current的算法
                current = parseFloat(getStyle(obj,prop));
            }
            var speed =( attrobj[prop]-current)/8;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            if(prop == "opacity"){
                obj.style.opacity = (current + speed) / 100;
            }
            else if(prop == "zIndex") {
                obj.style.zIndex = attrobj[prop];
            }
            else {
                obj.style[prop] = current  + speed + "px" ;
            }
            //当遍历属性值没有到达目标位置就改变flag的值
            if(attrobj[prop] != current){
                flag = false;
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn){//如果有回调函数,则调用
                fn();
            }
        }
    },30);
}

2.获取样式函数封装

eg:var one = document.getElementById("one");
        console.log(getstyle(one,"left"));
function getstyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];//ie浏览器的实现方法
    }else{
        //非IE,
        return window.getComputedStyle(obj,null)[attr];
    }
}

3.dom2级事件 添加函数及移除事件封装

1.添加事件
eg:
function addEvent(obj,evt,fn){
        if(obj.addEventListener){
            //在非IE指向的是对象
            obj.addEventListener(evt,fn,false);
        }else if(obj.attachEvent){
            //在IE中this指向window,其中this的指向不一样,下边通过call方法改变其指向,使其统一
            obj.attachEvent("on"+evt,function(){
                fn.call(obj)
            });
        }else{
            obj["on"+evt]=fn;
        }
    }
2.移除事件
eg:
function removeEvent(obj,evt,fn){
        if(obj.removeEventListener){
            obj.removeEventListener(evt,fn,false);
        }else if(obj.detachEvent){
            obj.detachEvent("on"+evt,function(){
                fn.call(obj)
            });
        }else{
            obj["on"+evt]=null;
        }
    }

4.阻止事件冒泡函数封装

eg:
function preventBubble(ev){
    var e = ev?ev:window.event;
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        //ie下阻止冒泡的方法
        e.cancelBubble = true;
    }
}

5.阻止浏览器默认行为

eg:
function preventDefault(ev){
    alert("woshishui");
    var e = ev || event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}

6.利用阻止事件冒泡和事件委托实现类似select功能

1.样式

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            margin: 100px auto;
        }
        #list{
            list-style: none;
            display: none;
        }
        #list>li{
            padding: 5px 0;
            cursor: pointer;
        }
        #page{
            cursor: pointer;
        }
        i{
            display: inline-block;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top-color:#ccc ;
        }
    </style>

2.结构

<div>
    <p id = "page"><span>菜单</span><i></i></p>
    <ul id="list">
        <li>项目一</li>
        <li>项目二</li>
        <li>项目三</li>
    </ul>
</div>

3.js

 <script src = "js/cancelBubble.js"></script>
<script>
    var ptage = document.getElementById("page");
    var list = document.getElementById("list");
    var spantage = ptage.getElementsByTagName("span")[0];
    ptage.onclick = function(ev){
        list.style.display = "block";
        preventBubble(ev);//阻止冒泡,否则无法实现后边document.onclick功能
    };
    document.onclick = function(){
        list.style.display = "none";
    };
    list.onclick = function(ev){
        var e =ev?ev:window.event;
        var target = e.srcElement || e.target;
//        console.log(e)
        if(target.tagName === "LI"){
//            console.log(spantage);
            spantage.innerHTML = target.innerHTML;
            list.style.display = "none"
        }
    }

</script>

image.png

image.png

7.select数据渲染及onchange事件

eg:
<body>
<select>
    <option value="1">中国</option>
    <option value="2">美国</option>
</select>
<script>
    var selecttags = document.getElementsByTagName("select");

    selecttags[0].options.add(new Option("日本","3"))
//此方法第一个参数为新加option的值,第二个参数为新加option的value;
selecttags[0].onchange = function(){
        console.log(this.value)
    }

</script>

image.png

image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

JS设置标签的内容和样式

上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量,以便完成JS的各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生...

69190
来自专栏lonelydawn的前端猿区

面向对象+模块化设计绘制canvas星空动画

require.js的相关内容已在我的博文 《requireJs的使用,以canvas绘制星空为例》中描述, 可查看:https://cloud.tencent...

64160
来自专栏Angular&服务

数据绑定

12030
来自专栏HTML5学堂

详析设置样式的方法

上一期文章当中,小编与大家详细的总结了获取标签的方法,能够便于大家灵活的去获取网页中的标签。如果想具体了解详析获取标签,可以回复“获取标签”到“HTML5学堂”...

33170
来自专栏河湾欢儿的专栏

event事件对象

event: 事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方-event对象,供我们在需要的时候调...

10920
来自专栏flutter开发者

自定义View案例【LabelView】

在前面的几篇文章中我们介绍了Flutter中自定义view的用法,学习了canvas中常用的绘制方法,在这篇及以后的几篇文章中我会给大家写几个自定义View的例...

26120
来自专栏lonelydawn的前端猿区

绚丽的javascript拾色器(不兼容IE8及以下)

一切尽在注释中 html节点 <div id="colorpicker" style="display:inline-block;"> <input clas...

46170
来自专栏Pythonista

前端学习之jQuery

[1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

10410
来自专栏天天

动画

6620
来自专栏Golang语言社区

Go语言实现猜数字小游戏的方法

package main import ( "bufio" "fmt" "math/rand" "os" "strconv" ...

32750

扫码关注云+社区

领取腾讯云代金券