小小千想和您聊一聊

当前位置: 首页> 技术分享> 前端javascript练习题-promise

前端javascript练习题-promise

  promise

  promise-ajax的封装

function ajax(url){//创建promise对象
   var promise = new Promise(function(resolve,reject){
   //创建ajax对象
         if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
         }else{
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }
         
         xhr.open("get",url,true);
         xhr.send();
         
         xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
               if(xhr.status == 200){
                  var data = xhr.responseText;
                  resolve(data);
               }else{
                  reject();
               }
            }
         }
   
   })
   return promise;  //返回promise对象}

  红绿灯

  html结构代码

<ul id="traffic" class="">
    <li id="green"></li>
    <li id="yellow"></li>
    <li id="red"></li></ul>

  css样式代码:

ul {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    /*画3个圆代表红绿灯*/

    ul>li {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0.2;
    display: inline-block;
    }
    /*执行时改变透明度*/

    ul.red>#red,
    ul.green>#green,
    ul.yellow>#yellow {
    opacity: 1.0;
    }
    /*红绿灯的三个颜色*/

    #red {
    background: red;
    }

    #yellow {
    background: yellow;
    }

    #green {
    background: green;}

  js实现代码:

function timeout(timer) {
     return function() {
          return new Promise(function(resolve, reject) {
                setTimeout(resolve, timer)
                     })
                 }
             }
         var green = timeout(1000);
         var yellow = timeout(1000);
         var red = timeout(1000);
         var traffic = document.getElementById("traffic");
        
         (function restart() {
             'use strict' //严格模式
             traffic.className = 'green';
             green().then(function() {
                     traffic.className = 'yellow';
                     return yellow();
                 })
                 .then(function() {
                     traffic.className = 'red';
                     return red();
                 }).then(function() {
                     restart()
                 })
         })();

上一篇:怎样用ps做出3D分割效果海报图?

下一篇:前端javascript练习题-Ajax封装

QQ技术交流群

千锋HTML5官方②群
857920838

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码