妙味JS學習記錄（二）

時間 2019-11-17

標籤學習記錄欄目 JavaScript 简体版

原文原文鏈接

在學習過程當中零碎的知識點記錄以及一些想法，加深印象，強化記憶。

5、Ajax

~ 無刷新數據讀取；用戶註冊、在線地圖、聊天室、webQQ、微博；css

Ajax能且僅能從服務器讀取一個文件，要注意文本文件和網頁的編碼要統一（utf-8）html

只讀一次，後面加載緩存，?t=1213 用get提交數據web

能夠用?t=new Date().getTime 使每次都從新加載；ajax

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('失敗');
        }
    }
};

6、運動

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。