妙味JS学习记录（二）

在学习过程中零碎的知识点记录以及一些想法，加深印象，强化记忆。

五、Ajax

~ 无刷新数据读取；用户注册、在线地图、聊天室、webQQ、微博；

Ajax能且仅能从服务器读取一个文件，要注意文本文件和网页的编码要统一（utf-8）

只读一次，后面加载缓存，?t=1213 用get提交数据

可以用?t=new Date().getTime 使每次都重新加载；

eval()计算字符串里的值，如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

原理：

Http请求方法：GET - 获取数据（浏览帖子）　　POST - 上传数据（用户注册）；

form的action属性是用来确定表单提交到哪里，method属性默认为get

<form action="www.baidu.com" method="get" accept-charset="utf-8">
        用户名：<input type="text" name="user"/>
        密码：<input type="password" name="pass" />
</form>

get方式把数据放到url 里面提交；post把数据放在http content里；

get安全性很低；post安全性一般；

get容量很低；post容量几乎不限

get便于分享；post不便于分享

~ 编写Ajax

1.创建ajax对象　　

//创建AJAX对象
var oAjax = null;
if(window.XMLHttpRequest){
//不存在的变量会报错，不存在的属性仅仅是undefined
    oAjax = new XMLHttpRequest();
}else{
    oAjax = new ActiveXObject("Microsoft.XMLHttp");
}

2.跟服务器连接　

　oAjax.open(方法，URL，异步);

3.发送请求

oAjax.send();　　

4.接收返回

oAjax.onreadystatechange = function(){
    if(oAjax.readyState == 4){
        if(oAjax.status == 200){
            alert('成功'+oAjax.responseText); //获得字符串形式的响应数据
        }else{
            alert('失败');
        }
    }
};

六、运动

var timer = null;
var btn = document.getElementById("btn");

function startMove(){
    clearInterval(timer);//先清定时器，防止定时器叠加
    var odiv = document.getElementById("div");
    timer = setInterval(function(){
        var ispeed = 1;     //设定速度
        if (odiv.offsetLeft >= 300) {//到300距离停止
            clearInterval(timer);
        }else{  //用了else到达位置后不执行
            odiv.style.left = odiv.offsetLeft + ispeed +'px';
        }
            
    },30);
}
btn.onclick = startMove;

运动框架

开始运动时，关闭已有定时器，把运动和停止隔开（if..else）

JS匀速运动：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
        #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
        #div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
    </style>
    <script>

        window.onload=function(){
            var btn1 = document.getElementById('btn1');
            var btn2 = document.getElementById('btn2');
            var btn3 = document.getElementById('btn3');
            var btn4 = document.getElementById('btn4');

            var oDiv = document.getElementById('div1');
            var timer = null;


            btn1.onclick = function(){
                startMove(100);
            }
            btn2.onclick = function(){
                startMove(300);
            }

            function startMove(iTarget){
                clearInterval(timer);

                timer = setInterval(function(){
                    var speed = 0;

                    if(oDiv.offsetLeft<iTarget){
                        speed = 7;
                    }else{
                        speed = -7;
                    }

                    if(Math.abs(iTarget-oDiv.offsetLeft)<=7){
                        clearInterval(timer);
                        oDiv.style.left = iTarget+'px'; //最后一步小于speed7时 让它直接到达目标
                    }else{
                        oDiv.style.left=oDiv.offsetLeft+speed+'px';
                    }
                },30)
            }
        }
</script>
</head>
<body>

   <input type="button" id="btn1" name="" value="到100" >
   <input type="button" id="btn2" name="" value="到300">

    <input type="button" id="btn3" name="" value="运动到100">
    <input type="button" id="btn4" name="" value="运动到300">

    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>


</body>
</html>

JS缓冲运动

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; background:black; position:absolute; left:300px; top:0;}
</style>
<script>
window.onload = function(){
    var btn = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');
    var timer = null;

    btn.onclick = function(){
        startMove(300);
    };

    function startMove(iTarget){

        clearInterval(timer);

        timer = setInterval(function(){
            var speed = (iTarget - oDiv.offsetLeft) / 10;
            //但凡用到缓冲运动，一定要0+向上/0-向下取整
            speed = speed>0?Math.ceil(speed) : Math.floor(speed);

            oDiv.style.left = oDiv.offsetLeft+speed+'px';
        },30);
    }
};
</script>
</head>

<body>
<input id="btn1" type="button" value="缓冲运动到300" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

JS多物体缓冲运动+解决BUG：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css" media="screen">
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 10px;
            border: 1px solid black;
        }
    </style>

    <script>
        window.onload = function(){
            var aDiv = document.getElementsByTagName('div');

            for (var i = 0; i < aDiv.length; i++) {
                aDiv[i].timer = null;

                aDiv[i].onmouseover = function(){
                    startMove(this,400);
                }
                aDiv[i].onmouseout = function(){
                    startMove(this,100);
                }
            };
        }

        function startMove(obj,iTarget){
            clearInterval(obj.timer);//清理各自的定时器
            obj.timer = setInterval(function(){
            //每个运动的物体，都开一个属于自己的定时器
                var speed = (iTarget - parseInt(getStyle(obj,'width'))) / 6;//这里也要换成getStyle（）
                speed = speed>0 ?Math.ceil(speed):Math.floor(speed);

                if (obj.offsetWidth == iTarget) {
                    clearInterval(obj.timer);
                } else{
                    obj.style.width = parseInt(getStyle(obj,'width'))+speed +'px';
                    //因为有边框，width和offsetWidth获取的值不同，所以要用getStyle（）防止出现回不到原位的问题
                };
            },30);

            function getStyle(obj,attr){
                if (obj.currentStyle) {
                    return obj.currentStyle[attr];//兼容IE，不兼容火狐谷歌
                } else{
                    return getComputedStyle(obj, false)[attr];//兼容火狐谷歌不兼容IE
                };
            }
        };
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

类似offsetWidth和offsetHeight 都会包括边框，但是width和height不包含边框所以就会有BUG 需要用 obj.currentStyle 或者getComputedStyle 获取只是width 或height的样式

function getStyle(obj,attr){
        return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj,false)[attr];
    }

~ 任意值运动框架

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css" media="screen">
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
            float: left;
            background: #ccc;
            border: 10px solid black;
            font-size: 14px;
        }
    </style>

    <script>
    window.onload=function(){
        var oDiv1= document.getElementById('div1');
        var oDiv2= document.getElementById('div2');
        var oDiv3= document.getElementById('div3');
        var oDiv4= document.getElementById('div4');

        oDiv1.onmouseover = function(){
            startMove(this,'height',400);
        };
        oDiv1.onmouseout = function(){
            startMove(this,'height',100)
        };
        oDiv2.onmouseover = function(){
            startMove(this,'width',400);
        };
        oDiv2.onmouseout = function(){
            startMove(this,'width',100)
        };
        oDiv3.onmouseover = function(){
            startMove(this,'fontSize',30);
        };
        oDiv3.onmouseout = function(){
            startMove(this,'fontSize',14)
        };
        oDiv4.onmouseover = function(){
            startMove(this,'borderWidth',30);
        };
        oDiv4.onmouseout = function(){
            startMove(this,'borderWidth',10)
        };
    }

    //开始运动
    function startMove(obj,attr,iTarget){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var current = parseInt(getStyle(obj,attr));
                var speed = (iTarget-current)/6;
                speed = speed>0 ? Math.ceil(speed):Math.floor(speed);

                if (current == iTarget) {
                    clearInterval(obj.timer)
                } else{
                    obj.style[attr] = current+speed +'px';
                };

        },30)
    }

    //获取综合样式
    function getStyle(obj,attr){
        return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj,false)[attr];
    }
    </script>
</head>
<body>

    <div id="div1">变高</div>
    <div id="div2">变宽</div>
    <div id="div3">abcdefg</div>
    <div id="div4"></div>

</body>
</html>

posted @ 2018-04-01 17:51 言叶以上阅读(345) 评论(0) 编辑收藏举报

刷新页面返回顶部

JoeのBLOG

全力奔跑

妙味JS学习记录（二）

在学习过程中零碎的知识点记录以及一些想法，加深印象，强化记忆。

五、Ajax

六、运动

公告