day05

作者: 特洛伊芋头 | 来源:发表于2018-07-03 18:19 被阅读0次

    A.今天学到了什么

    1.globalignore
    <script>
            // global-g  是否全文搜索 默认false
            // ignore -i   是否忽略大小写
            var str ="hello world"
            var  reg =/l/g;
            console.log(str.replace(reg,""));
        </script>
    
    2.日期用法
        <script>
            var oDate =new Date();
            var year=oDate.getFullYear();
            var month=oDate.getMonth()+1;
            var date=oDate.getDate();
            var day=oDate.getDay();
            var second=oDate.getSeconds();
            console.log(oDate);
            console.log(year);
            console.log(month);
            console.log(date);
            console.log(day);
            console.log(second);
        </script>
    
    3.动态时钟

    h5部分

       <div>
            <img src="images/0.png" alt="">
            <img src="images/1.png" alt="">
            <img src="images/2.png" alt="">
            <img src="images/3.png" alt="">
            <img src="images/4.png" alt="">
            <img src="images/5.png" alt="">  
           
        </div>
    

    js部分

      <script>
            function showTime(){
            var clocks=document.getElementsByTagName("img");
            var oDate =new Date();
            var hour=oDate.getHours();
            var minute=oDate.getMinutes();
            var second=oDate.getSeconds();
            // 1.将时间变成字符串拼接起来
            // 2.将他们分割成数组
            // 只要小于10 就要在前面补0
            function add(time){
                if(time<10){
                    return "0"+time;
                }else{
                    return time+"";
                }
            }
            var allTime= add(hour)+add(minute)+add(second);
            console.log(allTime);
            for(i=0;i<allTime.length;i++){
                clocks[i].src="images/"+allTime[i]+".png";
            }
               }
               showTime();
               setInterval(showTime,1000);
        </script>
    
    4.ajax-get
       <div id="test">
    
        </div>
        <script>
            //向服务器读取数据的一种技术  可以做到页面局部刷新
            // 1.命名方式
            var json={
                "name":"hello world",
                "arr":[1,2,3],
                "age":19,
            }
            //  如何使用ajax
            // 1.创建ajax的核心对象
            var xhr=new XMLHttpRequest();
            // 2.建立与服务器的链接
            // 3.向服务器发起请求
            var url="https://www.easy-mock.com/mock/5b3ae08ed294426e05198b4a/ajaxTest/getTest"
            xhr.open("get",url,true);
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var resData=JSON.parse(xhr.responseText);
                    test.innerHTML=resData.data.content;
                   
                }
            }
        </script>
    
    5.ajax-post
      <script>
            // 1.创建ajax的核心对象
            // 使用原生的post方式的時候要设置一个请求头  在open方法和send方法之间设置
            var xhr = new XMLHttpRequest();
            // 2.建立与服务器的链接
            var url = "https://www.easy-mock.com/mock/5b3b16d2b35f9276a57e736c/postTest/postTest"
            // 3.向服务器发起请求
            xhr.open("post", url);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 4.服务器端响应
            xhr.send();
            xhr.onreadystatechange = function () {
                if ( xhr.status == 200) {
                    if(xhr.readyState == 4){
                        // 服务器响应完成切请求撑住
                        console.log(xhr.responseText);
                    }             
                }else{
                    document.body.innerHTML=xhr.status;
    
                }
            }
        </script>
    
    6.get 和post 的区别

    get和post的区别
    1.get请求的参数字段是再url里面的
    2.安全性:post方法更安全
    3.请求的数据量:post请求的数据量更大
    4.get速度更快

    7.jquery-ajax

    css部分
    jquery路径

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    

    js部分

       <script>
            $.ajax({
                method:"get",
                url:"https://www.easy-mock.com/mock/5b3ae08ed294426e05198b4a/ajaxTest/getTest",
                dataType:"json",
                success:function(res){
                    console.log(res);
                },
                error:function(xhr){
                    document.body.innerHTML=xhr.status;
                }
            })
        </script>
    
    8.jquery-get

    css部分

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    

    js部分

    script>
          var url="https://www.easy-mock.com/mock/5b3ae08ed294426e05198b4a/ajaxTest/getTes"
          $.get(url,function(data){
              console.log(data);
          }).fail(function(data){
              document.body.innerHTML=data.status;
              console.log(data.status);
    
          })
        </script>
    
    9.jquery-post

    css部分引入jquery路径

    js部分

      <script>
              var url="https://www.easy-mock.com/mock/5b3b16d2b35f9276a57e736c/postTest/postTest"
               $.post(url,function(data){
              console.log(data);
          })
        </script>
    
    10.跨域

    css部分引入jquery路径

    js部分

       <script>
           var url="https://api.douban.com/v2/book/search?q=javascript&count=1";
        //    $.get(url,function(data){
        //        console.log(data)
        //    })
        // 跨域实现  用ajax
        $.ajax({
            type:"get",
            url:url,
            dataType:"jsonp",
            success:function(data){
                console.log(data)
            }
        })
       </script>
    
    11.axios-post

    css部分引入jquery路径

    js部分

      <script>
          var url="https://www.easy-mock.com/mock/5b3b16d2b35f9276a57e736c/postTest/postTest";
          axios.post(url).then(function(succuss){
              console.log(succuss)
          }).catch(function(err){
              console.log(err)
          })
      </script>
    
    12.axios-get
     <script>
          var url="https://www.easy-mock.com/mock/5b3ae08ed294426e05198b4a/ajaxTest/getTest";
          axios.get(url).then(function(succuss){
              console.log(succuss)
          }).catch(function(err){
              console.log(err)
          })
      </script>
    

    相关文章

      网友评论

          本文标题:day05

          本文链接:https://www.haomeiwen.com/subject/qbyjuftx.html