前端javascript练习题之promise

简介: 前端javascript练习题之promisepromise-ajax的封装function ajax(url){//创建promise对象 var promise = new Promise(function(resolve,reject){ //创建ajax对象 if(window.

前端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结构代码

<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()
             })
     })();
相关文章
|
9天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
107 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
4月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
4月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
153 1
|
4月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
108 5
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
4月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
38 0
|
4月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
57 1
JavaScript中的原型 保姆级文章一文搞懂
|
7月前
|
JavaScript 前端开发
JS:一篇文章带你搞懂什么是异步
JS:一篇文章带你搞懂什么是异步
|
8月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
215 5

热门文章

最新文章