当前位置: 首页 / 技术干货 / 正文
好程序员前端教程—javascript练习题promise

2019-12-27

北京WEB前端培训 好程序员web前端 北京HTML5培训

js

今天好程序员为大家分享:web前端培训中的javascript练习题之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()

})

})();

 

好程序员web前端培训官网:http://www.goodprogrammer.org/html5_class.shtml

好程序员公众号

  • · 剖析行业发展趋势
  • · 汇聚企业项目源码

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2021-04-12(深圳)

    开班盛况

    开班时间:2021-05-17(北京)

    开班盛况
  • 大数据+人工智能 <高端班>

    开班时间:2021-03-22(杭州)

    开班盛况

    开班时间:2021-04-26(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2021-05-10(北京)

    开班盛况

    开班时间:2021-02-22(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2020-09-21(上海)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2019-07-22(北京)

    开班盛况
在线咨询
试听
入学教程
立即报名

Copyright 2011-2020 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公网安备 11010802035720号