├── .DS_Store ├── .gitignore ├── 01好看的登录页面 ├── .vscode │ └── settings.json ├── images │ └── 00.jpg ├── index.html └── style.css ├── 02CSS3简约紫色渐变背景登录页面实现 ├── css │ └── login.css └── index.html ├── 03CSS3圆角边框登录页面实现 ├── css │ ├── bootstrap.min.css │ ├── font-awesome.min.css │ └── zzsc.css ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff ├── index.html └── js │ └── jquery-1.11.0.min.js ├── 04焦点图 ├── css │ └── style.css ├── img │ ├── lunbo1.jpg │ ├── lunbo2.jpg │ ├── lunbo3.jpg │ ├── nexImg.png │ └── preImg.png ├── index.html └── js │ └── jquery.min.js ├── 05注册页面 ├── images │ └── 背景.jpg ├── lib │ └── jquery.min.js ├── login.html ├── register.css ├── register.html └── register.js ├── 06css常用布局例子 ├── 00块级&行内块元素.html ├── 01基础布局position定位.html └── 02flex布局.html ├── 07七夕祝福网页 ├── README.md ├── index.html └── static │ ├── css │ └── app.7cedb17e2dca9368be3e5d7f72423f08.css │ ├── img │ └── timg.1a8a778.jpg │ ├── js │ ├── app.76d01a000d484c70e9ca.js │ ├── manifest.7f143e2aa81f40046d60.js │ └── vendor.ccc7843f48bd0a2aeb0e.js │ └── scrollbar_arrow.png ├── 08js焦点图 ├── images │ ├── t1.png │ ├── t2.png │ ├── t3.png │ └── t4.png ├── index.html ├── lb.css └── lb.js ├── 09jsTab标签 ├── tab1.html └── tab标签.html ├── 10数字时钟 ├── index.html └── style.css ├── 11html dom节点操作 └── index.html ├── 12CSS3旋转3D旋转例子 └── 12-01旋转地球 │ ├── index.html │ ├── index.js │ ├── protect.js │ └── style.css ├── 13css3流星雨动效背景 ├── index.html └── style.css ├── 14Promise使用及手写 └── 原生Promise使用 │ └── index.html ├── 15原生js实现红绿灯效果 ├── index copy.html └── index.html ├── 16js高级demo ├── index.html └── index.js ├── 17滚动条案例 └── index.html ├── 18h5真机调试案例 ├── index.html ├── lufei.jpeg ├── lufei_1.jpeg └── lufei_2.jpeg ├── 19七夕祝福网页新 ├── onlyto │ ├── .DS_Store │ ├── css │ │ └── skystar.css │ ├── img │ │ └── skystar2.jpg │ ├── js │ │ └── skystar.js │ ├── skystar.html │ └── video │ │ └── skystar.mp4 └── 素材 │ └── 1.md ├── 20js中this指向问题及call,apply,bind的区别 └── index.html ├── 21node.js学习巩固 └── helloNodejs.js ├── 22js中的原型与原型链实践 └── index.html ├── 23气泡背景登录页面 ├── .DS_Store ├── css │ └── style.css └── index.html ├── README.md └── tests ├── 1-Promise基本使用 ├── 1-初体验.html ├── 2-Promise实践练习-fs模块.js ├── 3-Promise实践练习-AJAX请求.html ├── 4-Promise封装练习-fs模块.js ├── 5-util.promisify方法.js ├── 6-Promise封装AJAX操作.html └── resource │ └── content.txt ├── 2-Promise-API ├── 1-Promise的API-then和catch.html ├── 2-Promise的API-resolve.html ├── 3-Promise的API-reject.html ├── 4-Promise的API-all.html └── 5-Promise的API-race.html ├── 3-关键问题 ├── 1-如何修改promise对象状态.html ├── 2-能否执行多个回调.html ├── 3-改变状态与指定回调顺序问题.html ├── 4-then方法的返回结果由什么决定.html ├── 5-promise如何串联多个任务.html ├── 6-异常穿透现象是怎么回事.html └── 7-如何中断Promise链条.html ├── 4-Promise自定义封装 ├── 1-初始结构搭建 │ ├── index.html │ └── promise.js ├── 10-1异步修改状态then方法返回结果 │ ├── index.html │ └── promise.js ├── 10-2-then方法代码优化 │ ├── index.html │ └── promise.js ├── 11-catch方法与异常穿透 │ ├── index.html │ └── promise.js ├── 12-Promise.resolve │ ├── index.html │ └── promise.js ├── 13-Promise.reject │ ├── index.html │ └── promise.js ├── 14-Promise.all方法实现 │ ├── index.html │ └── promise.js ├── 15-Promise.race方法实现 │ ├── index.html │ └── promise.js ├── 16-then回调函数异步执行的实现 │ ├── index.html │ └── promise.js ├── 17-class版本封装 │ ├── index.html │ └── promise.js ├── 2-resolve与reject结构搭建 │ ├── index.html │ └── promise.js ├── 3-resolve与reject函数实现 │ ├── index.html │ └── promise.js ├── 4-throw抛出错误改变状态 │ ├── index.html │ └── promise.js ├── 5-状态只能修改一次 │ ├── index.html │ └── promise.js ├── 6-then方法执行回调 │ ├── index.html │ └── promise.js ├── 7-异步任务then方法执行回调 │ ├── index.html │ └── promise.js ├── 8-指定多个回调 │ ├── index.html │ └── promise.js └── 9-同步修改状态then方法返回结果 │ ├── index.html │ └── promise.js ├── 5-async和await ├── 1-async.html ├── 2-await.html ├── 3-async与await结合.js ├── 4-async与await结合.html └── resource │ ├── 1.html │ ├── 2.html │ └── 3.html └── 笔记.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Build and Release Folders 2 | bin-debug/ 3 | bin-release/ 4 | [Oo]bj/ 5 | [Bb]in/ 6 | 7 | # Other files and folders 8 | .settings/ 9 | 10 | # Executables 11 | *.swf 12 | *.air 13 | *.ipa 14 | *.apk 15 | 16 | # Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties` 17 | # should NOT be excluded as they contain compiler settings and other important 18 | # information for Eclipse / Flash Builder. 19 | -------------------------------------------------------------------------------- /01好看的登录页面/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /01好看的登录页面/images/00.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/01好看的登录页面/images/00.jpg -------------------------------------------------------------------------------- /01好看的登录页面/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | html+css3炫酷登录页面 9 | 10 | 11 | 12 | 13 |
14 |

用户登录

15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 登录 30 | 31 |
32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /01好看的登录页面/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | /* 字体格式 */ 9 | font-family: sans-serif; 10 | /* 添加渐变 默认从上到下到下*/ 11 | background: url("../01好看的登录页面/images/00.jpg") center top; 12 | background-size: 100% 100%; 13 | /* linear-gradient(#141e30, #243b55); */ 14 | } 15 | 16 | .login-box { 17 | position: absolute; 18 | top: 50%; 19 | left: 50%; 20 | width: 500px; 21 | padding: 40px; 22 | /* 登录框居中 */ 23 | transform: translate(-50%, -50%); 24 | background: rgba(0, 0, 0, .8); 25 | /* css3新特性，任何内外边距和边框都将在已设定的宽度和高度内进行绘制 */ 26 | box-sizing: border-box; 27 | /* 添加阴影 */ 28 | box-shadow: 0 15px 25px rgba(0, 0, 0, .6); 29 | /* 边框圆角 */ 30 | border-radius: 10px; 31 | } 32 | 33 | .login-box h2 { 34 | margin: 0 0 30px; 35 | padding: 0; 36 | color: #fff; 37 | text-align: center; 38 | } 39 | 40 | .login-box .user-box { 41 | position: relative; 42 | } 43 | 44 | .login-box .user-box input { 45 | width: 100%; 46 | padding: 10px 0; 47 | font-size: 16px; 48 | color: #fff; 49 | margin-bottom: 30px; 50 | border: none; 51 | border-bottom: 1px solid #fff; 52 | outline: none; 53 | background: transparent; 54 | } 55 | 56 | .login-box .user-box label { 57 | position: absolute; 58 | top: 0; 59 | left: 0; 60 | padding: 10px 0; 61 | font-size: 16px; 62 | color: #fff; 63 | /* 元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素 */ 64 | pointer-events: none; 65 | transition: .5s; 66 | } 67 | 68 | .login-box .user-box input:focus~label, 69 | .login-box .user-box input:valid~label { 70 | top: -20px; 71 | left: 0; 72 | color: #03e9f4; 73 | font-size: 12px; 74 | } 75 | 76 | .login-box form a { 77 | position: relative; 78 | display: inline-block; 79 | padding: 10px 20px; 80 | color: #03e9f4; 81 | font-size: 16px; 82 | text-decoration: none; 83 | text-transform: uppercase; 84 | overflow: hidden; 85 | transition: .5s; 86 | margin-top: 40px; 87 | letter-spacing: 4px 88 | } 89 | 90 | .login-box a:hover { 91 | background: #03e9f4; 92 | color: #fff; 93 | border-radius: 5px; 94 | box-shadow: 0 0 20px #03e9f4; 95 | } 96 | 97 | /* 按钮特效 -Start */ 98 | .login-box a span { 99 | position: absolute; 100 | display: block; 101 | } 102 | 103 | .login-box a span:nth-child(1) { 104 | top: 0; 105 | left: -100%; 106 | width: 100%; 107 | height: 2px; 108 | background: linear-gradient(90deg, transparent, #03e9f4); 109 | animation: btn-anim1 1s linear infinite; 110 | } 111 | 112 | @keyframes btn-anim1 { 113 | 0% { 114 | left: -100%; 115 | } 116 | 117 | 50%, 118 | 100% { 119 | left: 100%; 120 | } 121 | } 122 | 123 | .login-box a span:nth-child(2) { 124 | top: -100%; 125 | right: 0; 126 | width: 2px; 127 | height: 100%; 128 | background: linear-gradient(180deg, transparent, #03e9f4); 129 | animation: btn-anim2 1s linear infinite; 130 | animation-delay: .25s 131 | } 132 | 133 | @keyframes btn-anim2 { 134 | 0% { 135 | top: -100%; 136 | } 137 | 138 | 50%, 139 | 100% { 140 | top: 100%; 141 | } 142 | } 143 | 144 | .login-box a span:nth-child(3) { 145 | bottom: 0; 146 | right: -100%; 147 | width: 100%; 148 | height: 2px; 149 | background: linear-gradient(270deg, transparent, #03e9f4); 150 | animation: btn-anim3 1s linear infinite; 151 | animation-delay: .5s 152 | } 153 | 154 | @keyframes btn-anim3 { 155 | 0% { 156 | right: -100%; 157 | } 158 | 159 | 50%, 160 | 100% { 161 | right: 100%; 162 | } 163 | } 164 | 165 | .login-box a span:nth-child(4) { 166 | bottom: -100%; 167 | left: 0; 168 | width: 2px; 169 | height: 100%; 170 | background: linear-gradient(360deg, transparent, #03e9f4); 171 | animation: btn-anim4 1s linear infinite; 172 | animation-delay: .75s 173 | } 174 | 175 | @keyframes btn-anim4 { 176 | 0% { 177 | bottom: -100%; 178 | } 179 | 180 | 50%, 181 | 100% { 182 | bottom: 100%; 183 | } 184 | } 185 | 186 | /* 按钮特效End */ -------------------------------------------------------------------------------- /02CSS3简约紫色渐变背景登录页面实现/css/login.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | margin: 0; 4 | padding: 0; 5 | height: 100%; 6 | } 7 | 8 | .container { 9 | height: 100%; 10 | background: linear-gradient(to right, #fbc2eb, #a6c1ee); 11 | } 12 | 13 | .login-form { 14 | background-color: #fff; 15 | width: 350px; 16 | height: 500px; 17 | border-radius: 15px; 18 | 19 | /* 定位到中心 */ 20 | text-align: center; 21 | position: absolute; 22 | top: 50%; 23 | left: 50%; 24 | transform: translate(-50%, -50%); 25 | } 26 | 27 | .text { 28 | /* height: 80px; */ 29 | /* 标题Login的样式 */ 30 | font-size: 30px; 31 | font-weight: 700; 32 | /* 800px; */ 33 | 34 | text-align: center; 35 | line-height: 80px; 36 | 37 | margin-top: 40px; 38 | } 39 | 40 | .form-item, 41 | .btn, 42 | .other { 43 | margin: 40px auto; 44 | width: 90%; 45 | } 46 | 47 | input { 48 | width: 80%; 49 | margin-top: 20px; 50 | padding: 10px; 51 | /* placeholder变更为大写字体 */ 52 | text-transform: uppercase; 53 | /* 边框效果 */ 54 | border: 0; 55 | outline: none; 56 | border-bottom: 1px solid #fbc2eb; 57 | } 58 | 59 | input::placeholder { 60 | font-weight: bold; 61 | color: #acb7c9; 62 | } 63 | 64 | input:focus { 65 | /* 当输入框获取焦点时的效果 */ 66 | /* box-shadow: 0px 0px 5px #fbc2eb; 67 | border-bottom: 1px solid #fff; */ 68 | animation: bBottom 2s infinite; 69 | } 70 | 71 | @keyframes bBottom { 72 | 50% { 73 | border-bottom: 1px solid #a6c1ee; 74 | } 75 | } 76 | 77 | .btn { 78 | height: 40px; 79 | line-height: 40px; 80 | /* 字体 */ 81 | color: #fff; 82 | font-weight: bold; 83 | letter-spacing: 10px; 84 | text-align: center; 85 | /* 鼠标样式 */ 86 | cursor: pointer; 87 | /* 边框、背景 */ 88 | border-radius: 10px; 89 | background: linear-gradient(to right, #fbc2eb, #a6c1ee, #fbc2eb); 90 | background-size: 200%; 91 | } 92 | 93 | .btn:hover { 94 | animation: btnAnimate 1s infinite; 95 | } 96 | 97 | @keyframes btnAnimate { 98 | 50% { 99 | background-position: 200%; 100 | } 101 | } 102 | 103 | a { 104 | text-decoration: none; 105 | color: #fbc2eb; 106 | } -------------------------------------------------------------------------------- /02CSS3简约紫色渐变背景登录页面实现/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 02CSS3简约紫色渐变背景登录页面实现 9 | 10 | 11 | 12 |
13 |
14 |
登录
15 |
16 | 17 | 18 |
19 |
登录
20 |
21 |
22 | 没有账号？去注册 23 |
24 |
25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /03CSS3圆角边框登录页面实现/css/zzsc.css: -------------------------------------------------------------------------------- 1 | body, html { font-size: 100%; padding: 0; margin: 0;} 2 | 3 | /* Reset */ 4 | *, 5 | *:after, 6 | *:before { 7 | -webkit-box-sizing: border-box; 8 | -moz-box-sizing: border-box; 9 | box-sizing: border-box; 10 | } 11 | 12 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 13 | .clearfix:before, 14 | .clearfix:after { 15 | content: " "; 16 | display: table; 17 | } 18 | 19 | .clearfix:after { 20 | clear: both; 21 | } 22 | 23 | body{ 24 | background: #494A5F; 25 | font-weight: 500; 26 | font-size: 1.05em; 27 | font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; 28 | } 29 | a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;} 30 | a:hover,a:focus{color:#74777b;text-decoration: none;} -------------------------------------------------------------------------------- /03CSS3圆角边框登录页面实现/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/03CSS3圆角边框登录页面实现/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /03CSS3圆角边框登录页面实现/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/03CSS3圆角边框登录页面实现/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /03CSS3圆角边框登录页面实现/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/03CSS3圆角边框登录页面实现/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /03CSS3圆角边框登录页面实现/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/03CSS3圆角边框登录页面实现/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /03CSS3圆角边框登录页面实现/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/03CSS3圆角边框登录页面实现/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /03CSS3圆角边框登录页面实现/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/03CSS3圆角边框登录页面实现/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /03CSS3圆角边框登录页面实现/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/03CSS3圆角边框登录页面实现/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /03CSS3圆角边框登录页面实现/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 03CSS3圆角边框登录页面实现 9 | 10 | 11 | 12 | 160 | 161 | 162 | 163 | 164 |
165 |
166 |
167 |
168 |
169 | 用户登录 170 |
171 | 172 | 173 |
174 |
175 | 176 | 177 | 178 |
179 |
180 |
181 | 182 | 183 |
184 | 记住我 185 | 186 |
187 |
188 |
189 |
190 |
191 |
192 | 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /04焦点图/css/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* banner */ 3 | .c-banner{ 4 | width: 100%; 5 | position: relative; 6 | } 7 | .c-banner img{ 8 | width: 100%; 9 | } 10 | .c-banner .banner ul{ 11 | list-style: none; 12 | padding-left: 0px; 13 | margin-bottom: 0px; 14 | } 15 | .c-banner .banner ul li{ 16 | position: absolute 17 | display: none; 18 | opacity: 0; 19 | } 20 | .c-banner .banner ul li:nth-child(1){ 21 | opacity: 1; 22 | display: block; 23 | } 24 | .c-banner .banner ul li img{ 25 | width: 100%; 26 | position: absolute; 27 | top: 0px; 28 | } 29 | .c-banner .banner ul li:first-child img{ 30 | position: relative; 31 | } 32 | .c-banner .nexImg,.c-banner .preImg{ 33 | padding: 25px 10px 25px 10px; 34 | position: absolute; 35 | top: 50%; 36 | margin-top: -53px; 37 | background: #000000; 38 | opacity: 0.5; 39 | border-radius: 5px; 40 | z-index: 10; 41 | 42 | } 43 | .c-banner .nexImg:hover,.c-banner .preImg:hover{ 44 | opacity: 0.8; 45 | } 46 | .c-banner .nexImg{ 47 | right: 0px; 48 | } 49 | .c-banner .nexImg img,.c-banner .preImg img{ 50 | 51 | 52 | } 53 | .c-banner .jumpBtn{ 54 | width: 100%; 55 | position: absolute; 56 | bottom: 20px; 57 | text-align: center; 58 | } 59 | .c-banner .jumpBtn ul{ 60 | margin-bottom: 0px; 61 | padding: 0px; 62 | } 63 | 64 | .c-banner .jumpBtn ul li{ 65 | width: 30px; 66 | height: 30px; 67 | border-radius: 50%; 68 | display: inline-block; 69 | background-color: white; 70 | opacity: 0.9; 71 | margin-left: 10px; 72 | } 73 | .c-banner .jumpBtn ul li:first-child{ 74 | margin-left: 0px; 75 | } 76 | @media screen and (max-width:768px) { 77 | .c-banner{ 78 | width: 100%; 79 | height: 345px; 80 | overflow: hidden; 81 | } 82 | .c-banner .banner ul li img{ 83 | width: 768px; 84 | height: 345px; 85 | position: absolute; 86 | left: 50%; 87 | margin-left: -384px; 88 | } 89 | } -------------------------------------------------------------------------------- /04焦点图/img/lunbo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/04焦点图/img/lunbo1.jpg -------------------------------------------------------------------------------- /04焦点图/img/lunbo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/04焦点图/img/lunbo2.jpg -------------------------------------------------------------------------------- /04焦点图/img/lunbo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/04焦点图/img/lunbo3.jpg -------------------------------------------------------------------------------- /04焦点图/img/nexImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/04焦点图/img/nexImg.png -------------------------------------------------------------------------------- /04焦点图/img/preImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/04焦点图/img/preImg.png -------------------------------------------------------------------------------- /04焦点图/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | jQuery响应式网站banner焦点图片轮播代码 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 | 35 |
36 |
37 | 38 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /05注册页面/images/背景.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/05注册页面/images/背景.jpg -------------------------------------------------------------------------------- /05注册页面/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 美食ya登录页 9 | 10 | 11 | 12 |
这是一个登录页
13 | 14 | 15 | -------------------------------------------------------------------------------- /05注册页面/register.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html { 7 | height: 100%; 8 | width: 100%; 9 | overflow: hidden; 10 | margin: 0; 11 | padding: 0; 12 | background: url(images/背景.jpg) no-repeat 0px 0px; 13 | background-repeat: no-repeat; 14 | background-size: 100% 100%; 15 | -moz-background-size: 100% 100%; 16 | } 17 | 18 | body { 19 | display: flex; 20 | align-items: center; 21 | justify-content: center; 22 | height: 100%; 23 | } 24 | 25 | #loginDiv { 26 | width: 37%; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | height: 350px; 31 | background-color: rgba(75, 81, 95, 0.3); 32 | box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5); 33 | border-radius: 5px; 34 | } 35 | 36 | #name_trip { 37 | margin-left: 50px; 38 | color: red; 39 | } 40 | 41 | p, 42 | .sexDiv { 43 | margin-top: 10px; 44 | margin-left: 20px; 45 | color: azure; 46 | } 47 | 48 | .sexDiv>input, 49 | .hobby>input { 50 | width: 30px; 51 | height: 17px; 52 | } 53 | 54 | input, 55 | select { 56 | margin-left: 15px; 57 | border-radius: 5px; 58 | border-style: hidden; 59 | height: 30px; 60 | width: 140px; 61 | background-color: rgba(216, 191, 216, 0.5); 62 | outline: none; 63 | color: #f0edf3; 64 | padding-left: 10px; 65 | } 66 | 67 | .button { 68 | border-color: cornsilk; 69 | background-color: rgba(100, 149, 237, .7); 70 | color: aliceblue; 71 | border-style: hidden; 72 | border-radius: 5px; 73 | width: 100px; 74 | height: 31px; 75 | font-size: 16px; 76 | } 77 | 78 | .introduce { 79 | margin-left: 110px; 80 | } 81 | 82 | .introduce>textarea { 83 | background-color: rgba(216, 191, 216, 0.5); 84 | border-style: hidden; 85 | outline: none; 86 | border-radius: 5px; 87 | } 88 | 89 | h1 { 90 | text-align: center; 91 | margin-bottom: 20px; 92 | margin-top: 20px; 93 | color: #f0edf3; 94 | 95 | } 96 | 97 | b { 98 | margin-left: 50px; 99 | color: #FFEB3B; 100 | font-size: 10px; 101 | font-weight: initial; 102 | 103 | } -------------------------------------------------------------------------------- /05注册页面/register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 注册 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

美食ya注册页面

15 |

用户名: 16 |

17 | 18 |

用户密码:

19 | 20 |

确认密码:

21 | 22 |

23 | 电子邮件: 24 | 25 | 26 |

27 | 28 |

29 | 30 | 31 |

32 |
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /05注册页面/register.js: -------------------------------------------------------------------------------- 1 | function trip(obj, trip) { 2 | document.getElementById(obj).innerHTML = "" + trip + ""; 3 | } 4 | 5 | function checkForm() { 6 | console.log("进入checkForm") 7 | //获取用户名输入项 8 | var userNname = document.getElementById("userNname"); 9 | var uName = userNname.value; 10 | console.log(uName) 11 | if (uName.length < 1 || uName.length > 10) { 12 | trip("name_trip", "账号长度为1-10位!!"); 13 | return false; 14 | } else { 15 | trip("name_trip", "OK!!"); 16 | } 17 | 18 | // 密码长度大于6 和确认必须一致 19 | var password = document.getElementById("password"); 20 | var userPass = password.value; 21 | if (userPass.length < 6) { 22 | trip("password_trip", "密码要>6位!!"); 23 | return false; 24 | } else { 25 | trip("password_trip", "OK!!"); 26 | } 27 | 28 | //获取确认密码框的值 var 29 | var surePassword = document.getElementById("surePassword").value; 30 | if (userPass !== surePassword) { 31 | trip("surePassword_trip", "两次密码不一致!!"); 32 | console.log(userPass, surePassword) 33 | return false; 34 | } else { 35 | trip("surePassword_trip", "OK!!"); 36 | } 37 | 38 | //校验邮箱(正则表达式):/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ 39 | var inputEmail = document.getElementById("email"); 40 | var uEmail = inputEmail.value; 41 | if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)) { 42 | trip("emil_trip", "邮箱不合法!!"); 43 | return false; 44 | } else { 45 | trip("emil_trip", "OK!!"); 46 | } 47 | return true; 48 | } 49 | 50 | //提交 51 | function submitT() { 52 | if (checkForm()) { 53 | alert("注册成功！"); 54 | window.open('./login.html', '_top'); 55 | } 56 | else { 57 | } 58 | } 59 | 60 | //重置事件 61 | function myFunctionReset() { 62 | console.log("已重置"); 63 | trip("name_trip", ""); 64 | trip("password_trip", ""); 65 | trip("surePassword_trip", ""); 66 | trip("emil_trip", ""); 67 | } -------------------------------------------------------------------------------- /06css常用布局例子/00块级&行内块元素.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 00块级&行内块元素 9 | 36 | 37 | 38 | 39 |
块级元素
40 | 行内元素 41 | 行内块元素 42 | 链接 43 | 44 | 45 | -------------------------------------------------------------------------------- /06css常用布局例子/01基础布局position定位.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | position定位使用 7 | 71 | 72 | 73 | 74 |
75 | 76 |
这个是static定位
77 | 78 |
fixed方块1
79 |
fixed方块2
80 |
fixed方块3
81 | 82 |
83 | relative定位 84 | 85 |
absolute定位
86 |
87 | 88 |
这个是sticky定位
89 | 90 |
91 | 92 | 128 | 129 | -------------------------------------------------------------------------------- /06css常用布局例子/02flex布局.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | flex布局 7 | 49 | 50 | 51 | 52 |
53 |
1
54 |
2
55 |
3
56 |
4
57 |
5
58 | 66 |
67 | 68 | 69 | -------------------------------------------------------------------------------- /07七夕祝福网页/README.md: -------------------------------------------------------------------------------- 1 | 情人节的礼物 2 | [Demo](https://codeforloving.github.io/) 3 | -------------------------------------------------------------------------------- /07七夕祝福网页/index.html: -------------------------------------------------------------------------------- 1 | 七夕小礼物
2 | -------------------------------------------------------------------------------- /07七夕祝福网页/static/img/timg.1a8a778.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/07七夕祝福网页/static/img/timg.1a8a778.jpg -------------------------------------------------------------------------------- /07七夕祝福网页/static/js/app.76d01a000d484c70e9ca.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1,2],{34:function(n,e,t){t(75);var r=t(20)(t(36),t(85),"data-v-288975d1",null); 2 | n.exports=r.exports},36:function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=t(21),o=t.n(r),i=t(40),a=t.n(i),s=t(39),l=t.n(s),u=t(84),c=t.n(u),d=t(83),f=t.n(d),m=t(74),h=(t.n(m),function(){for(var n=navigator.userAgent,e=["Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"],t=!0,r=0;r0){t=!1;break}return t}()),g=function(n,e){var t=new Date(Date.parse(n.replace(/-/g,"/"))).getTime(),r=new Date(Date.parse(e.replace(/-/g,"/"))).getTime(),o=Math.abs(t-r)/864e5;return o};e.default={name:"app",components:{StyleEditor:c.a,ResumeEditor:f.a},data:function(){return{interval:49,currentStyle:"",enableHtml:!1,fullStyle:["/*\n* Hi。雅姐！\n* 前几天你说还没有男朋友，我寻思着你这么漂亮得有人送你情人节礼物呀，我想着送你个礼物，别嫌弃呀 ~~\n* 我学的计算机，那就发挥我的优势，送你个网页吧\n* 如这个页面。就是个什么也没有的网页。\n* 我现在就在这个空白的页面上加点儿东西。\n* 嗯。说起来手机和电脑还得区分一下。\n* 你现在用的是。。。"+(h?"电脑":"手机")+"\n*/\n\n/* 首先给所有元素加上过渡效果 */\n* {\n -webkit-transition: all .3s;\n transition: all .3s;\n}\n/* 白色背景太单调了。来点背景 */\nhtml {\n color: rgb(222,222,222);\n background: rgb(0,43,54); \n}\n/* 文字太近了 */\n.styleEditor {\n padding: .5em;\n border: 1px solid;\n margin: .5em;\n overflow: auto;\n "+(h?"width: 48%;height: 96%;":"width: 96%;height: 50%;")+"\n font-size: 14px;\n line-height:1.5;\n}\n/* 这些代码颜色都一样。加点儿高亮区别来 */\n.token.selector{ color: rgb(133,153,0) }\n.token.property{ color: rgb(187,137,0) }\n.token.punctuation{ color: yellow }\n.token.function{ color: rgb(42,161,152) }\n.token.comment{ color: rgb(177,177,177) }\n/* 加个 3D 效果 */\nhtml{\n -webkit-perspective: 1000px;\n perspective: 1000px;\n}\n.styleEditor {\n position: fixed; \n "+(h?"left: 0;":"left:0;right:0;margin:auto;")+"\n top: 0; \n -webkit-transition: none; \n transition: none; \n "+(h?"-webkit-transform: rotateY(10deg) translateZ(-100px) ;transform: rotateY(10deg) translateZ(-100px) ;":"-webkit-transform: rotateX(-10deg) translateZ(-100px) ;transform: rotateX(-10deg) translateZ(-100px) ;")+"\n "+(h?"":"-webkit-transform-origin: 50% 0% 0;transform-origin: 50% 0% 0;")+"\n}\n\n/* 再来一张信纸 */\n.resumeEditor{\n position: fixed; \n "+(h?"right: 0;":"left:0;right:0;margin:auto;")+"\n "+(h?"top: 0;":"bottom:2%;")+"\n padding: .5em; \n "+(h?"margin: .5em;":"")+"\n "+(h?"width: 48%;height: 96%;":"width: 96%;height: 50%;")+"\n border: 1px solid;\n color: #222;\n overflow: auto;\n font-size: 14px;\n line-height:1.5;\n "+(h?"-webkit-transform: rotateY(-10deg) translateZ(-100px) ;transform: rotateY(-10deg) translateZ(-100px) ;":"-webkit-transform: rotateX(10deg) translateZ(-100px) ;transform: rotateX(10deg) translateZ(-100px) ;")+"\n "+(h?"":"-webkit-transform-origin: 50% 0% 0;transform-origin: 50% 0% 0;")+"\n }\n/* 我开始写了 */\n\n\n","\n/* 是不是看着很简陋粗糙？还有一些看不见的句子? \n * 因为这是 Markdown 格式的\n * 一种程序员用来写文档日志的简易语言\n * 翻译成 网页 就行了\n */\n",'\n/* 再加点样式 */\n.resumeEditor{\n padding: 2em;\n line-height:1.8;\n}\n.resumeEditor h2{\n display: inline-block;\n border-bottom: 1px solid;\n margin: 1em 0 .5em;\n font-size:18px;\n}\n.resumeEditor ul,.resumeEditor ol{\n list-style: none;\n}\n.resumeEditor ul> li::before{\n content: \'•\';\n margin-right: .5em;\n}\n.resumeEditor ol {\n counter-reset: section;\n}\n.resumeEditor ol li::before {\n counter-increment: section; \n content: counters(section, ".") " "; \n margin-right: .5em;\n}\n.resumeEditor blockquote {\n margin: 1em;\n padding: .5em;\n background: rgba(221,221,221,.5);\n 是不是还很丑...我技艺不精，别介意啊...QAQ \n \n\n/*祝你新学期快乐呀~~~~*/\n\n'],currentMarkdown:"",fullMarkdown:"雅姐:\n\n情人节是不是有很多男生给你礼物？反正像我这种不修边幅之人是与情人节礼物无缘了....QAQ \n 我就说一下我心中的雅姐吧~ \n\n遥远的初中\n----\n\n上初中时就听说了你的大名，但学校不作美，一直没能跟你同班，但是每次考试你都是我的劲敌，我的初中一直生活在你的“阴影”中 \n话说你还没给精神损失费呢 >_< \n\n不谙世事的高中\n----\n\n 高一时能够跟雅姐同班半年，着实是我的幸运，有一种揭开庐山真面目的感觉，用一位网红的话来说，你是一位集美貌与才华于一身的女生，吾辈之楷模\n,之后你我文理相隔，我过起了“两耳不停窗外事，一心只读圣贤书”的日子，对你的了解仅限于清北班了。我印象比较深的就是你在一次表彰大会上的演讲，你演讲时刚好下起了小雨，你在台下同学懵逼与无奈中慷慨激昂地表达了你对清华的向往，那种激情与气概，颇有“巾帼不让须眉”的风范，雅姐威武！ \n\n 忙碌的大学\n----\n\n \ 上了大学后与你见面的机会真是越来越少啦，更可恶的是交大把暑假小学期放在了春季学期之后...等我到家清华都要开学了...心中一万个mmp，所以能够在寒假中与雅姐相聚真是珍贵的机会 \n 我这个人嘴有(zong)时(shi)比较笨，雅姐跟我聊天要是费劲的话我只能求原谅了[\\捂脸] \n 总之，希望我们以后多多联系呀，能够遇到雅姐这么优秀的人是我的荣幸，也祝福雅姐早日找到borfriend~ \n\n6.情人节祝福\n----\n\n> Blessing Ya sister to find the ideal half!! \n> 祝福雅姐早日找到理想的另一半呐！\n\n \n 英语不好，google翻译的，打我的话别打脸啊...QAQ"}},created:function(){this.makeResume()},methods:{makeResume:function(){function n(){return e.apply(this,arguments)}var e=l()(a.a.mark(function n(){return a.a.wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,this.progressivelyShowStyle(0);case 2:return n.next=4,this.progressivelyShowResume();case 4:return n.next=6,this.progressivelyShowStyle(1);case 6:return n.next=8,this.showHtml();case 8:return n.next=10,this.progressivelyShowStyle(2);case 10:case"end":return n.stop()}},n,this)}));return n}(),showHtml:function(){var n=this;return new o.a(function(e,t){n.enableHtml=!0,e()})},progressivelyShowStyle:function(n){var e=this;return new o.a(function(t,r){var o=e.interval,i=l()(a.a.mark(function e(){var r,s,l,u,c,d=this;return a.a.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(r=this.fullStyle[n]){e.next=3;break}return e.abrupt("return");case 3:s=this.fullStyle.filter(function(e,t){return t<=n}).map(function(n){return n.length}).reduce(function(n,e){return n+e},0),l=s-r.length,this.currentStyle.length"+this.code+""}},methods:{goBottom:function(){this.$refs.container.scrollTop=1e5}}}},74:function(n,e){},75:function(n,e){},76:function(n,e){},77:function(n,e){},83:function(n,e,t){t(77);var r=t(20)(t(37),t(87),"data-v-2df95543",null);n.exports=r.exports},84:function(n,e,t){t(76);var r=t(20)(t(38),t(86),"data-v-2ca90776",null);n.exports=r.exports},85:function(n,e){n.exports={render:function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{attrs:{id:"app"}},[t("StyleEditor",{ref:"styleEditor",attrs:{code:n.currentStyle}}),n._v(" "),t("ResumeEditor",{ref:"resumeEditor",attrs:{markdown:n.currentMarkdown,enableHtml:n.enableHtml}})],1)},staticRenderFns:[]}},86:function(n,e){n.exports={render:function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{ref:"container",staticClass:"styleEditor"},[t("div",{staticClass:"code",domProps:{innerHTML:n._s(n.codeInStyleTag)}}),n._v(" "),t("pre",{domProps:{innerHTML:n._s(n.highlightedCode)}})])},staticRenderFns:[]}},87:function(n,e){n.exports={render:function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{ref:"container",staticClass:"resumeEditor",class:{htmlMode:n.enableHtml}},[n.enableHtml?t("div",{domProps:{innerHTML:n._s(n.result)}}):t("pre",[n._v(n._s(n.result))])])},staticRenderFns:[]}},89:function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=t(35),o=t.n(r),i=t(34),a=t.n(i);new o.a({el:"#app",render:function(n){return n(a.a)}})}},[89]); -------------------------------------------------------------------------------- /07七夕祝福网页/static/js/manifest.7f143e2aa81f40046d60.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var n=window.webpackJsonp;window.webpackJsonp=function(t,c,a){for(var i,u,f,s=0,l=[];s 2 | 3 | 4 | 5 | 6 | 7 | js焦点图片自动轮播切换代码 8 | 9 | 10 | 25 | 26 | 27 | 28 |
29 | 30 |
31 |
32 | 33 | picture loss 34 | Description 1 35 | 36 |
37 |
38 | 39 | picture loss 40 | Description 2 41 | 42 |
43 |
44 | 45 | picture loss 46 | Description 3 47 | 48 |
49 |
50 | 51 | picture loss 52 | Description 4 53 | 54 |
55 |
56 | 57 |
    58 |
  1. 1
    2. 59 |
  2. 2
    3. 60 |
  3. 3
    4. 61 |
  4. 4
    5. 62 |
63 | 64 |
＜
65 |
＞
66 |
67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /08js焦点图/lb.css: -------------------------------------------------------------------------------- 1 | body{background-color: #252525} 2 | .lb-box { 3 | width: 60%; 4 | height: 580px; 5 | margin: 15px auto; 6 | position: relative; 7 | overflow: hidden; 8 | } 9 | @media (max-width:568px) { 10 | .lb-box { 11 | width: 76%; 12 | height: 220px; 13 | } 14 | } 15 | 16 | .lb-content { 17 | width: 100%; 18 | height: 100%; 19 | } 20 | 21 | .lb-item { 22 | width: 100%; 23 | height: 100%; 24 | display: none; 25 | position: relative; 26 | } 27 | 28 | .lb-item > a { 29 | width: 100%; 30 | height: 100%; 31 | display: block; 32 | } 33 | 34 | .lb-item > a > img { 35 | width: 100%; 36 | height: 100%; 37 | } 38 | 39 | .lb-item > a > span { 40 | width: 100%; 41 | display: block; 42 | position: absolute; 43 | bottom: 0px; 44 | padding: 15px; 45 | color: #fff; 46 | background-color: rgba(0,0,0,0.7); 47 | } 48 | @media (max-width:568px) { 49 | .lb-item > a > span { 50 | padding: 10px; 51 | } 52 | } 53 | 54 | .lb-item.active { 55 | display: block; 56 | left: 0%; 57 | } 58 | .lb-item.active.left { 59 | left: -100%; 60 | } 61 | .lb-item.active.right { 62 | left: 100%; 63 | } 64 | 65 | /* */ 66 | .lb-item.next, 67 | .lb-item.prev { 68 | display: block; 69 | position: absolute; 70 | top: 0px; 71 | } 72 | .lb-item.next { 73 | left: 100%; 74 | } 75 | .lb-item.prev { 76 | left: -100%; 77 | } 78 | .lb-item.next.left, 79 | .lb-item.prev.right { 80 | left: 0%; 81 | } 82 | 83 | .lb-sign { 84 | position: absolute; 85 | right: 10px; 86 | top: 0px; 87 | padding: 5px 3px; 88 | border-radius: 6px; 89 | list-style: none; 90 | user-select: none; 91 | background-color: rgba(0,0,0,0.7); 92 | } 93 | 94 | .lb-sign li { 95 | width: 22px; 96 | height: 20px; 97 | font-size: 14px; 98 | font-weight: 500; 99 | line-height: 20px; 100 | text-align: center; 101 | float: left; 102 | color: #aaa; 103 | margin: auto 4px; 104 | border-radius: 3px; 105 | cursor: pointer; 106 | } 107 | .lb-sign li:hover { 108 | color: #fff; 109 | } 110 | .lb-sign li.active { 111 | color: #000; 112 | background-color: #EBEBEB; 113 | } 114 | 115 | .lb-ctrl { 116 | position: absolute; 117 | top: 50%; 118 | transform: translateY(-50%); 119 | font-size: 50px; 120 | font-weight: 900; 121 | user-select: none; 122 | background-color: rgba(0,0,0,0.7); 123 | color: #fff; 124 | border-radius: 5px; 125 | cursor: pointer; 126 | transition: all 0.1s linear; 127 | } 128 | @media (max-width:568px) { 129 | .lb-ctrl { 130 | font-size: 30px; 131 | } 132 | } 133 | .lb-ctrl.left { 134 | left: -50px; 135 | } 136 | .lb-ctrl.right { 137 | right: -50px; 138 | } 139 | .lb-box:hover .lb-ctrl.left { 140 | left: 10px; 141 | } 142 | .lb-box:hover .lb-ctrl.right { 143 | right: 10px; 144 | } 145 | .lb-ctrl:hover { 146 | background-color: #000; 147 | } 148 | -------------------------------------------------------------------------------- /08js焦点图/lb.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc 一个轮播插件 3 | * @author Mxsyx (zsimline@163.com) 4 | * @version 1.0.0 5 | */ 6 | 7 | class Lb { 8 | constructor(options) { 9 | this.lbBox = document.getElementById(options.id); 10 | this.lbItems = this.lbBox.querySelectorAll('.lb-item'); 11 | this.lbSigns = this.lbBox.querySelectorAll('.lb-sign li'); 12 | this.lbCtrlL = this.lbBox.querySelectorAll('.lb-ctrl')[0]; 13 | this.lbCtrlR = this.lbBox.querySelectorAll('.lb-ctrl')[1]; 14 | 15 | // 当前图片索引 16 | this.curIndex = 0; 17 | // 轮播盒内图片数量 18 | this.numItems = this.lbItems.length; 19 | 20 | // 是否可以滑动 21 | this.status = true; 22 | 23 | // 轮播速度 24 | this.speed = options.speed || 600; 25 | // 等待延时 26 | this.delay = options.delay || 3000; 27 | 28 | // 轮播方向 29 | this.direction = options.direction || 'left'; 30 | 31 | // 是否监听键盘事件 32 | this.moniterKeyEvent = options.moniterKeyEvent || false; 33 | // 是否监听屏幕滑动事件 34 | this.moniterTouchEvent = options.moniterTouchEvent || false; 35 | 36 | this.handleEvents(); 37 | this.setTransition(); 38 | } 39 | 40 | // 开始轮播 41 | start() { 42 | const event = { 43 | srcElement: this.direction == 'left' ? this.lbCtrlR : this.lbCtrlL 44 | }; 45 | const clickCtrl = this.clickCtrl.bind(this); 46 | 47 | // 每隔一段时间模拟点击控件 48 | this.interval = setInterval(clickCtrl, this.delay, event); 49 | } 50 | 51 | // 暂停轮播 52 | pause() { 53 | clearInterval(this.interval); 54 | } 55 | 56 | /** 57 | * 设置轮播图片的过渡属性 58 | * 在文件头内增加一个样式标签 59 | * 标签内包含轮播图的过渡属性 60 | */ 61 | setTransition() { 62 | const styleElement = document.createElement('style'); 63 | document.head.appendChild(styleElement); 64 | const styleRule = `.lb-item {transition: left ${this.speed}ms ease-in-out}` 65 | styleElement.sheet.insertRule(styleRule, 0); 66 | } 67 | 68 | // 处理点击控件事件 69 | clickCtrl(event) { 70 | if (!this.status) return; 71 | this.status = false; 72 | if (event.srcElement == this.lbCtrlR) { 73 | var fromIndex = this.curIndex, 74 | toIndex = (this.curIndex + 1) % this.numItems, 75 | direction = 'left'; 76 | } else { 77 | var fromIndex = this.curIndex; 78 | toIndex = (this.curIndex + this.numItems - 1) % this.numItems, 79 | direction = 'right'; 80 | } 81 | this.slide(fromIndex, toIndex, direction); 82 | this.curIndex = toIndex; 83 | } 84 | 85 | // 处理点击标志事件 86 | clickSign(event) { 87 | if (!this.status) return; 88 | this.status = false; 89 | const fromIndex = this.curIndex; 90 | const toIndex = parseInt(event.srcElement.getAttribute('slide-to')); 91 | const direction = fromIndex < toIndex ? 'left' : 'right'; 92 | this.slide(fromIndex, toIndex, direction); 93 | this.curIndex = toIndex; 94 | } 95 | 96 | // 处理滑动屏幕事件 97 | touchScreen(event) { 98 | if (event.type == 'touchstart') { 99 | this.startX = event.touches[0].pageX; 100 | this.startY = event.touches[0].pageY; 101 | } else { // touchend 102 | this.endX = event.changedTouches[0].pageX; 103 | this.endY = event.changedTouches[0].pageY; 104 | 105 | // 计算滑动方向的角度 106 | const dx = this.endX - this.startX 107 | const dy = this.startY - this.endY; 108 | const angle = Math.abs(Math.atan2(dy, dx) * 180 / Math.PI); 109 | 110 | // 滑动距离太短 111 | if (Math.abs(dx) < 10 || Math.abs(dy) < 10) return ; 112 | 113 | if (angle >= 0 && angle <= 45) { 114 | // 向右侧滑动屏幕，模拟点击左控件 115 | this.lbCtrlL.click(); 116 | } else if (angle >= 135 && angle <= 180) { 117 | // 向左侧滑动屏幕，模拟点击右控件 118 | this.lbCtrlR.click(); 119 | } 120 | } 121 | } 122 | 123 | // 处理键盘按下事件 124 | keyDown(event) { 125 | if (event && event.keyCode == 37) { 126 | this.lbCtrlL.click(); 127 | } else if (event && event.keyCode == 39) { 128 | this.lbCtrlR.click(); 129 | } 130 | } 131 | 132 | // 处理各类事件 133 | handleEvents() { 134 | // 鼠标移动到轮播盒上时继续轮播 135 | this.lbBox.addEventListener('mouseleave', this.start.bind(this)); 136 | // 鼠标从轮播盒上移开时暂停轮播 137 | this.lbBox.addEventListener('mouseover', this.pause.bind(this)); 138 | 139 | // 点击左侧控件向右滑动图片 140 | this.lbCtrlL.addEventListener('click', this.clickCtrl.bind(this)); 141 | // 点击右侧控件向左滑动图片 142 | this.lbCtrlR.addEventListener('click', this.clickCtrl.bind(this)); 143 | 144 | // 点击轮播标志后滑动到对应的图片 145 | for (let i = 0; i < this.lbSigns.length; i++) { 146 | this.lbSigns[i].setAttribute('slide-to', i); 147 | this.lbSigns[i].addEventListener('click', this.clickSign.bind(this)); 148 | } 149 | 150 | // 监听键盘事件 151 | if (this.moniterKeyEvent) { 152 | document.addEventListener('keydown', this.keyDown.bind(this)); 153 | } 154 | 155 | // 监听屏幕滑动事件 156 | if (this.moniterTouchEvent) { 157 | this.lbBox.addEventListener('touchstart', this.touchScreen.bind(this)); 158 | this.lbBox.addEventListener('touchend', this.touchScreen.bind(this)); 159 | } 160 | } 161 | 162 | /** 163 | * 滑动图片 164 | * @param {number} fromIndex 165 | * @param {number} toIndex 166 | * @param {string} direction 167 | */ 168 | slide(fromIndex, toIndex, direction) { 169 | if (direction == 'left') { 170 | this.lbItems[toIndex].className = "lb-item next"; 171 | var fromClass = 'lb-item active left', 172 | toClass = 'lb-item next left'; 173 | } else { 174 | this.lbItems[toIndex].className = "lb-item prev"; 175 | var fromClass = 'lb-item active right', 176 | toClass = 'lb-item prev right'; 177 | } 178 | this.lbSigns[fromIndex].className = ""; 179 | this.lbSigns[toIndex].className = "active"; 180 | 181 | setTimeout((() => { 182 | this.lbItems[fromIndex].className = fromClass; 183 | this.lbItems[toIndex].className = toClass; 184 | }).bind(this), 50); 185 | 186 | setTimeout((() => { 187 | this.lbItems[fromIndex].className = 'lb-item'; 188 | this.lbItems[toIndex].className = 'lb-item active'; 189 | this.status = true; // 设置为可以滑动 190 | }).bind(this), this.speed + 50); 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /09jsTab标签/tab1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
111111
11 | 12 | -------------------------------------------------------------------------------- /09jsTab标签/tab标签.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | css写一个Tab标签 7 | 44 | 45 | 46 | 47 |
48 |
北京
49 |
上海
50 |
天津
51 |
52 |
53 | 数据 54 |
55 | 56 | 82 | 83 | -------------------------------------------------------------------------------- /10数字时钟/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 时钟 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 |

15 |

数字时钟 html+css+js

16 |
17 | 18 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /10数字时钟/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100vh; 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background: #0f3854; 11 | background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%); 12 | background-size: 100vh; 13 | } 14 | 15 | p { 16 | margin: 0; 17 | padding: 0; 18 | } 19 | 20 | #clock { 21 | font-family: "Share Tech Mono", monospace; 22 | color: #ffffff; 23 | text-align: center; 24 | position: absolute; 25 | left: 50%; 26 | top: 50%; 27 | transform: translate(-50%, -50%); 28 | color: #daf6ff; 29 | text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0); 30 | } 31 | 32 | #clock .time { 33 | letter-spacing: 0.05em; 34 | font-size: 80px; 35 | padding: 5px 0; 36 | } 37 | 38 | #clock .date { 39 | letter-spacing: 0.1em; 40 | font-size: 24px; 41 | } 42 | 43 | #clock .text { 44 | letter-spacing: 0.1em; 45 | font-size: 12px; 46 | padding: 20px 0 0; 47 | } -------------------------------------------------------------------------------- /11html dom节点操作/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | dom节点 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 29 | 30 | 31 | 32 |
33 |
被替换的节点
34 |
35 | 36 | 43 | 44 | 45 | 46 |
47 |
下边的兄弟被删除了
48 |
我要被删除了
49 |
50 | 51 | 54 | 55 | 56 | 57 |
点我
58 | 59 | 64 | 65 | 66 | 67 |
68 |
1
69 |
2
70 |
71 | 72 | 80 | 81 | 82 | 83 |
84 |
1
85 |
86 | 87 | 90 | 91 | 92 | 93 |
94 |
1
95 |
2
96 |
3
97 |
98 | 99 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /12CSS3旋转3D旋转例子/12-01旋转地球/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 原生js实现模拟地球环绕太阳公转特效动画 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 41 | 42 | 43 | 44 |
45 |
46 |
47 |
48 |
49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /12CSS3旋转3D旋转例子/12-01旋转地球/index.js: -------------------------------------------------------------------------------- 1 | function initiate() { 2 | var TO_RADIANS = Math.PI/180; 3 | var canvas = document.getElementById("mainstage"); 4 | var context = canvas.getContext("2d"); 5 | canvas.width = document.getElementById("canvasContainer").clientWidth; 6 | canvas.height = document.getElementById("canvasContainer").clientHeight; 7 | var bubbleArray = []; 8 | setUpArray(bubbleArray); 9 | main(); 10 | var then = Date.now(); 11 | function main() { 12 | var now = Date.now(); 13 | var delta = now - then; 14 | update(); 15 | render(); 16 | then = now; 17 | requestAnimationFrame(main); 18 | }; 19 | function setUpArray(array) { 20 | let startColors = [ 21 | "rgba(218,104,11,1)", // orange 22 | //"rgba(45,0,0,1)", // deep deep red 23 | //"rgba(226,13,23,1)", // red 24 | //"rgba(143,7,7,1)", // deep red 25 | "rgba(255,246,76,1)", // yellow 26 | "rgba(255,246,76,1)", // yellow 27 | //"rgba(255,255,255,1)", // white 28 | ]; 29 | let endColors = [ 30 | "rgba(218,104,11,0)", // orange 31 | //"rgba(45,0,0,0)", // deep deep red 32 | //"rgba(226,13,23,0)", // red 33 | //"rgba(143,7,7,0)", // deep red 34 | "rgba(255,246,76,0)", // yellow 35 | "rgba(255,246,76,0)", // yellow 36 | //"rgba(255,255,255,0)", // white 37 | ] 38 | for(y=0;y<150;y++) { 39 | var angle = Math.round(Math.random() * 360); 40 | var targetAngle = Math.round(Math.random() * 360); 41 | var init = new Date(); 42 | var colorPick = Math.floor(Math.random() * startColors.length); 43 | var object = { 44 | id:y, 45 | initiation:0, 46 | speed:Math.random(), 47 | angle:angle, 48 | targetAngle: targetAngle, 49 | innerSize:Math.random() + 1, 50 | outerSize:Math.random() * 20 + 2, 51 | x:Math.floor(Math.random() * canvas.width), 52 | y:Math.floor(Math.random() *canvas.height), 53 | color:startColors[colorPick], 54 | endColor:endColors[colorPick], 55 | } 56 | array.push(object); 57 | } 58 | } 59 | 60 | function update() { 61 | for(y=0;y canvas.width + 25 || 63 | bubbleArray[y].y < -25 || bubbleArray[y].y > canvas.height + 25) 64 | { 65 | bubbleArray[y].x = Math.floor(Math.random() * canvas.width); 66 | bubbleArray[y].y = Math.floor(Math.random() * canvas.height); 67 | bubbleArray[y].innerSize = Math.random() + 1, 68 | bubbleArray[y].outerSize = Math.random() * 20 + 3, 69 | bubbleArray[y].initiation = 0.20; 70 | bubbleArray[y].angle = Math.round(Math.random() * 360); 71 | bubbleArray[y].targetAngle = Math.round(Math.random() * 360); 72 | } 73 | else { 74 | bubbleArray[y].angle += Math.random() * .50 - 0.25; 75 | } 76 | bubbleArray[y].x -= bubbleArray[y].speed * Math.cos(bubbleArray[y].angle * TO_RADIANS); 77 | bubbleArray[y].y += bubbleArray[y].speed * Math.sin(bubbleArray[y].angle * TO_RADIANS); 78 | if(bubbleArray[y].initiation > 0.15) { 79 | bubbleArray[y].initiation -= 0.03; 80 | } 81 | else { 82 | bubbleArray[y].initiation -= 0.0001; 83 | } 84 | } 85 | } 86 | 87 | function render() { 88 | context.clearRect(0,0,canvas.width,canvas.height); 89 | for(y=0;y 2 | 3 | 4 | 5 | 6 | css3流星雨动效背景 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /13css3流星雨动效背景/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); 3 | height: 100vh; 4 | overflow: hidden; 5 | display: flex; 6 | font-family: "Anton", sans-serif; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | 11 | .night { 12 | position: relative; 13 | width: 100%; 14 | height: 200%; 15 | transform: rotateZ(139deg); 16 | } 17 | 18 | .shooting_star { 19 | position: absolute; 20 | left: 50%; 21 | top: 50%; 22 | height: 2px; 23 | background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0)); 24 | border-radius: 999px; 25 | filter: drop-shadow(0 0 6px #699bff); 26 | -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite; 27 | animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite; 28 | } 29 | 30 | .shooting_star::before { 31 | content: ""; 32 | position: absolute; 33 | top: calc(50% - 1px * 2); 34 | right: 0; 35 | height: 2px; 36 | background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0)); 37 | transform: translateX(50%) rotateZ(45deg); 38 | border-radius: 100%; 39 | -webkit-animation: shining 3000ms ease-in-out infinite; 40 | animation: shining 3000ms ease-in-out infinite; 41 | } 42 | 43 | .shooting_star::after { 44 | content: ""; 45 | position: absolute; 46 | top: calc(50% - 1px * 2); 47 | right: 0; 48 | height: 2px; 49 | background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0)); 50 | transform: translateX(50%) rotateZ(45deg); 51 | border-radius: 100%; 52 | -webkit-animation: shining 3000ms ease-in-out infinite; 53 | animation: shining 3000ms ease-in-out infinite; 54 | transform: translateX(50%) rotateZ(-45deg); 55 | } 56 | 57 | .shooting_star:nth-child(1) { 58 | top: calc(50% - -4px * 2); 59 | left: calc(50% - 248px); 60 | -webkit-animation-delay: 3060ms; 61 | animation-delay: 3060ms; 62 | } 63 | 64 | .shooting_star:nth-child(1)::before, 65 | .shooting_star:nth-child(1)::after { 66 | -webkit-animation-delay: 3060ms; 67 | animation-delay: 3060ms; 68 | } 69 | 70 | .shooting_star:nth-child(2) { 71 | top: calc(50% - 180px * 2); 72 | left: calc(50% - 166px); 73 | -webkit-animation-delay: 4693ms; 74 | animation-delay: 4693ms; 75 | } 76 | 77 | .shooting_star:nth-child(2)::before, 78 | .shooting_star:nth-child(2)::after { 79 | -webkit-animation-delay: 4693ms; 80 | animation-delay: 4693ms; 81 | } 82 | 83 | .shooting_star:nth-child(3) { 84 | top: calc(50% - -88px * 2); 85 | left: calc(50% - 136px); 86 | -webkit-animation-delay: 1178ms; 87 | animation-delay: 1178ms; 88 | } 89 | 90 | .shooting_star:nth-child(3)::before, 91 | .shooting_star:nth-child(3)::after { 92 | -webkit-animation-delay: 1178ms; 93 | animation-delay: 1178ms; 94 | } 95 | 96 | .shooting_star:nth-child(4) { 97 | top: calc(50% - 92px * 2); 98 | left: calc(50% - 92px); 99 | -webkit-animation-delay: 9285ms; 100 | animation-delay: 9285ms; 101 | } 102 | 103 | .shooting_star:nth-child(4)::before, 104 | .shooting_star:nth-child(4)::after { 105 | -webkit-animation-delay: 9285ms; 106 | animation-delay: 9285ms; 107 | } 108 | 109 | .shooting_star:nth-child(5) { 110 | top: calc(50% - 89px * 2); 111 | left: calc(50% - 92px); 112 | -webkit-animation-delay: 5475ms; 113 | animation-delay: 5475ms; 114 | } 115 | 116 | .shooting_star:nth-child(5)::before, 117 | .shooting_star:nth-child(5)::after { 118 | -webkit-animation-delay: 5475ms; 119 | animation-delay: 5475ms; 120 | } 121 | 122 | .shooting_star:nth-child(6) { 123 | top: calc(50% - -164px * 2); 124 | left: calc(50% - 27px); 125 | -webkit-animation-delay: 9220ms; 126 | animation-delay: 9220ms; 127 | } 128 | 129 | .shooting_star:nth-child(6)::before, 130 | .shooting_star:nth-child(6)::after { 131 | -webkit-animation-delay: 9220ms; 132 | animation-delay: 9220ms; 133 | } 134 | 135 | .shooting_star:nth-child(7) { 136 | top: calc(50% - -136px * 2); 137 | left: calc(50% - 243px); 138 | -webkit-animation-delay: 7942ms; 139 | animation-delay: 7942ms; 140 | } 141 | 142 | .shooting_star:nth-child(7)::before, 143 | .shooting_star:nth-child(7)::after { 144 | -webkit-animation-delay: 7942ms; 145 | animation-delay: 7942ms; 146 | } 147 | 148 | .shooting_star:nth-child(8) { 149 | top: calc(50% - 174px * 2); 150 | left: calc(50% - 75px); 151 | -webkit-animation-delay: 8312ms; 152 | animation-delay: 8312ms; 153 | } 154 | 155 | .shooting_star:nth-child(8)::before, 156 | .shooting_star:nth-child(8)::after { 157 | -webkit-animation-delay: 8312ms; 158 | animation-delay: 8312ms; 159 | } 160 | 161 | .shooting_star:nth-child(9) { 162 | top: calc(50% - 138px * 2); 163 | left: calc(50% - 281px); 164 | -webkit-animation-delay: 6475ms; 165 | animation-delay: 6475ms; 166 | } 167 | 168 | .shooting_star:nth-child(9)::before, 169 | .shooting_star:nth-child(9)::after { 170 | -webkit-animation-delay: 6475ms; 171 | animation-delay: 6475ms; 172 | } 173 | 174 | .shooting_star:nth-child(10) { 175 | top: calc(50% - 25px * 2); 176 | left: calc(50% - 25px); 177 | -webkit-animation-delay: 7118ms; 178 | animation-delay: 7118ms; 179 | } 180 | 181 | .shooting_star:nth-child(10)::before, 182 | .shooting_star:nth-child(10)::after { 183 | -webkit-animation-delay: 7118ms; 184 | animation-delay: 7118ms; 185 | } 186 | 187 | .shooting_star:nth-child(11) { 188 | top: calc(50% - 184px * 2); 189 | left: calc(50% - 198px); 190 | -webkit-animation-delay: 8570ms; 191 | animation-delay: 8570ms; 192 | } 193 | 194 | .shooting_star:nth-child(11)::before, 195 | .shooting_star:nth-child(11)::after { 196 | -webkit-animation-delay: 8570ms; 197 | animation-delay: 8570ms; 198 | } 199 | 200 | .shooting_star:nth-child(12) { 201 | top: calc(50% - -194px * 2); 202 | left: calc(50% - 283px); 203 | -webkit-animation-delay: 1026ms; 204 | animation-delay: 1026ms; 205 | } 206 | 207 | .shooting_star:nth-child(12)::before, 208 | .shooting_star:nth-child(12)::after { 209 | -webkit-animation-delay: 1026ms; 210 | animation-delay: 1026ms; 211 | } 212 | 213 | .shooting_star:nth-child(13) { 214 | top: calc(50% - 169px * 2); 215 | left: calc(50% - 42px); 216 | -webkit-animation-delay: 4957ms; 217 | animation-delay: 4957ms; 218 | } 219 | 220 | .shooting_star:nth-child(13)::before, 221 | .shooting_star:nth-child(13)::after { 222 | -webkit-animation-delay: 4957ms; 223 | animation-delay: 4957ms; 224 | } 225 | 226 | .shooting_star:nth-child(14) { 227 | top: calc(50% - -114px * 2); 228 | left: calc(50% - 139px); 229 | -webkit-animation-delay: 5748ms; 230 | animation-delay: 5748ms; 231 | } 232 | 233 | .shooting_star:nth-child(14)::before, 234 | .shooting_star:nth-child(14)::after { 235 | -webkit-animation-delay: 5748ms; 236 | animation-delay: 5748ms; 237 | } 238 | 239 | .shooting_star:nth-child(15) { 240 | top: calc(50% - 140px * 2); 241 | left: calc(50% - 283px); 242 | -webkit-animation-delay: 2809ms; 243 | animation-delay: 2809ms; 244 | } 245 | 246 | .shooting_star:nth-child(15)::before, 247 | .shooting_star:nth-child(15)::after { 248 | -webkit-animation-delay: 2809ms; 249 | animation-delay: 2809ms; 250 | } 251 | 252 | .shooting_star:nth-child(16) { 253 | top: calc(50% - 72px * 2); 254 | left: calc(50% - 88px); 255 | -webkit-animation-delay: 8661ms; 256 | animation-delay: 8661ms; 257 | } 258 | 259 | .shooting_star:nth-child(16)::before, 260 | .shooting_star:nth-child(16)::after { 261 | -webkit-animation-delay: 8661ms; 262 | animation-delay: 8661ms; 263 | } 264 | 265 | .shooting_star:nth-child(17) { 266 | top: calc(50% - 40px * 2); 267 | left: calc(50% - 273px); 268 | -webkit-animation-delay: 8037ms; 269 | animation-delay: 8037ms; 270 | } 271 | 272 | .shooting_star:nth-child(17)::before, 273 | .shooting_star:nth-child(17)::after { 274 | -webkit-animation-delay: 8037ms; 275 | animation-delay: 8037ms; 276 | } 277 | 278 | .shooting_star:nth-child(18) { 279 | top: calc(50% - 176px * 2); 280 | left: calc(50% - 27px); 281 | -webkit-animation-delay: 826ms; 282 | animation-delay: 826ms; 283 | } 284 | 285 | .shooting_star:nth-child(18)::before, 286 | .shooting_star:nth-child(18)::after { 287 | -webkit-animation-delay: 826ms; 288 | animation-delay: 826ms; 289 | } 290 | 291 | .shooting_star:nth-child(19) { 292 | top: calc(50% - -164px * 2); 293 | left: calc(50% - 229px); 294 | -webkit-animation-delay: 1822ms; 295 | animation-delay: 1822ms; 296 | } 297 | 298 | .shooting_star:nth-child(19)::before, 299 | .shooting_star:nth-child(19)::after { 300 | -webkit-animation-delay: 1822ms; 301 | animation-delay: 1822ms; 302 | } 303 | 304 | .shooting_star:nth-child(20) { 305 | top: calc(50% - 85px * 2); 306 | left: calc(50% - 161px); 307 | -webkit-animation-delay: 5305ms; 308 | animation-delay: 5305ms; 309 | } 310 | 311 | .shooting_star:nth-child(20)::before, 312 | .shooting_star:nth-child(20)::after { 313 | -webkit-animation-delay: 5305ms; 314 | animation-delay: 5305ms; 315 | } 316 | 317 | .shooting_star:nth-child(21) { 318 | top: calc(50% - 100px * 2); 319 | left: calc(50% - 300px); 320 | -webkit-animation-delay: 4305ms; 321 | animation-delay: 4305ms; 322 | } 323 | 324 | .shooting_star:nth-child(21)::before, 325 | .shooting_star:nth-child(21)::after { 326 | -webkit-animation-delay: 4305ms; 327 | animation-delay: 4305ms; 328 | } 329 | 330 | @-webkit-keyframes tail { 331 | 0% { 332 | width: 0; 333 | } 334 | 335 | 30% { 336 | width: 100px; 337 | } 338 | 339 | 100% { 340 | width: 0; 341 | } 342 | } 343 | 344 | @keyframes tail { 345 | 0% { 346 | width: 0; 347 | } 348 | 349 | 30% { 350 | width: 100px; 351 | } 352 | 353 | 100% { 354 | width: 0; 355 | } 356 | } 357 | 358 | @-webkit-keyframes shining { 359 | 0% { 360 | width: 0; 361 | } 362 | 363 | 50% { 364 | width: 30px; 365 | } 366 | 367 | 100% { 368 | width: 0; 369 | } 370 | } 371 | 372 | @keyframes shining { 373 | 0% { 374 | width: 0; 375 | } 376 | 377 | 50% { 378 | width: 30px; 379 | } 380 | 381 | 100% { 382 | width: 0; 383 | } 384 | } 385 | 386 | @-webkit-keyframes shooting { 387 | 0% { 388 | transform: translateX(0); 389 | } 390 | 391 | 100% { 392 | transform: translateX(300px); 393 | } 394 | } 395 | 396 | @keyframes shooting { 397 | 0% { 398 | transform: translateX(0); 399 | } 400 | 401 | 100% { 402 | transform: translateX(300px); 403 | } 404 | } 405 | 406 | @-webkit-keyframes sky { 407 | 0% { 408 | transform: rotate(45deg); 409 | } 410 | 411 | 100% { 412 | transform: rotate(405deg); 413 | } 414 | } 415 | 416 | @keyframes sky { 417 | 0% { 418 | transform: rotate(45deg); 419 | } 420 | 421 | 100% { 422 | transform: rotate(405deg); 423 | } 424 | } -------------------------------------------------------------------------------- /14Promise使用及手写/原生Promise使用/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 原生Promise使用 6 | 29 | 30 | 31 | 32 |
33 |

原生Promise使用

34 | 35 |
36 | 37 |
38 |
39 |
22222
40 |
41 |
42 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /15原生js实现红绿灯效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 简易红绿灯切换 6 | 7 | 8 | 89 | 90 |
91 |

简易红绿灯切换

92 |

绿灯亮30s，然后黄灯亮3s，然后红灯亮30s，以此循环

93 |
94 |
95 |
    96 |
      97 |
        98 |
        99 |

        NaN

        100 |
        101 |
        102 | 103 | 197 | 198 | 199 | -------------------------------------------------------------------------------- /16js高级demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 27 | 28 | 29 |

        打开控制台看内容

        30 |
        31 |
        32 |
        33 |
        34 |
        35 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /16js高级demo/index.js: -------------------------------------------------------------------------------- 1 | // console.log(a) 2 | // { 3 | // var a = 1 4 | // } 5 | // console.log(a) 6 | 7 | //#region 00 new.target 8 | function King(){ 9 | if(!new.target){ 10 | throw 'King must be instantiated using "new"' 11 | } 12 | console.log('King instantiated using "new"',new.target); 13 | } 14 | // King(); 15 | new King(); 16 | 17 | //#endregion 18 | 19 | //#region 01 js中this、apply、call、bind 之间的理解与使用 20 | 21 | //#endregion 22 | 23 | 24 | //#region 02 执行上下文栈 25 | if(!(b in window)){ 26 | var b = 1; 27 | } 28 | console.log(b); 29 | //#endregion -------------------------------------------------------------------------------- /17滚动条案例/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 滚动条案例 8 | 26 | 27 | 28 |
        29 |
        30 |
        31 | 1 32 |
        33 |
        34 | 2 35 |
        36 |
        37 | 3 38 |
        39 |
        40 | 4 41 |
        42 |
        43 | 5 44 |
        45 |
        46 | 47 |
        48 | 49 | 64 | 65 | -------------------------------------------------------------------------------- /18h5真机调试案例/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | h5真机调试案例 8 | 39 | 40 | 41 |
        42 |
        43 | 44 |
        所有人都知道,自由并不是放纵,那是火一般的梦想
        45 |
        46 |
        47 | 48 |
        所有人都知道,自由并不是放纵,那是火一般的梦想
        49 |
        50 |
        51 | 52 |
        所有人都知道,自由并不是放纵,那是火一般的梦想
        53 |
        54 |
        55 | 56 |
        所有人都知道,自由并不是放纵,那是火一般的梦想
        57 |
        58 |
        59 | 60 |
        所有人都知道,自由并不是放纵,那是火一般的梦想
        61 |
        62 |
        63 | 64 |
        所有人都知道,自由并不是放纵,那是火一般的梦想
        65 |
        66 |
        67 | 68 |
        所有人都知道,自由并不是放纵,那是火一般的梦想
        69 |
        70 |
        71 | 72 | 73 | 74 | 86 | 87 | -------------------------------------------------------------------------------- /18h5真机调试案例/lufei.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/18h5真机调试案例/lufei.jpeg -------------------------------------------------------------------------------- /18h5真机调试案例/lufei_1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/18h5真机调试案例/lufei_1.jpeg -------------------------------------------------------------------------------- /18h5真机调试案例/lufei_2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/18h5真机调试案例/lufei_2.jpeg -------------------------------------------------------------------------------- /19七夕祝福网页新/onlyto/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/19七夕祝福网页新/onlyto/.DS_Store -------------------------------------------------------------------------------- /19七夕祝福网页新/onlyto/css/skystar.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | body { 6 | height: 100vh; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | position: relative; 11 | overflow: hidden; 12 | perspective: 1300px; 13 | } 14 | .text { 15 | position: absolute; 16 | left: 50%; 17 | top: 50%; 18 | transform: translateX(-50%); 19 | } 20 | .textone { 21 | position: absolute; 22 | left: 50%; 23 | top: 40%; 24 | transform: translateX(-50%); 25 | } 26 | :root { 27 | --margin-top: 0; 28 | --margin-left: 0; 29 | --animation-duration: 0s; 30 | --animation-delay: 0s; 31 | } 32 | div { 33 | transform-style: preserve-3d; 34 | } 35 | .word-box, 36 | .word-box .word{ 37 | position: absolute; 38 | animation: rotY 0s linear infinite; 39 | animation-duration: var(--animation-duration); 40 | animation-delay: var(--animation-delay); 41 | } 42 | .word-box{ 43 | margin-top: var(--margin-top); 44 | } 45 | .word-box .word{ 46 | margin-left: var(--margin-left); 47 | } 48 | .word-box .word { 49 | animation-duration: reverse; 50 | } 51 | @keyframes rotY { 52 | to{ 53 | transform: rotateY(360deg); 54 | } 55 | 56 | } 57 | -------------------------------------------------------------------------------- /19七夕祝福网页新/onlyto/img/skystar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/19七夕祝福网页新/onlyto/img/skystar2.jpg -------------------------------------------------------------------------------- /19七夕祝福网页新/onlyto/js/skystar.js: -------------------------------------------------------------------------------- 1 | // poem 2 | var words = [ 3 | '伤心桥下春波绿', 4 | '曾是惊鸿照影来', 5 | '当年明月在', 6 | '曾照彩云归', 7 | '归去来兮', 8 | '真堪偕隐', 9 | '画船听雨眠', 10 | '愿为江水', 11 | '与君重逢', 12 | '一日不见兮', 13 | '思之若狂', 14 | '好想回到那个夏天', 15 | '趴在桌子上偷偷看你', 16 | '你是我灰色人生中的一道彩虹', 17 | '柳絮空缱绻', 18 | '南风知不知', 19 | '我见青山多妩媚', 20 | '料青山见我也应如是', 21 | '取次花丛懒回顾', 22 | '半缘修道半缘君', 23 | '三笑徒然当一痴', 24 | '人生若只如初见', 25 | '我余光中都是你', 26 | '人生自是有情痴', 27 | '此恨不关风与月', 28 | '因为你，我多少适应了这个世界', 29 | '春蚕到死丝方尽', 30 | '蜡炬成灰泪始干', 31 | '今夜何夕', 32 | '见此良人', 33 | '愿我如星君如月', 34 | '夜夜流光相皎洁', 35 | '情不所起', 36 | '一往而深', 37 | '玲珑骰子安红豆', 38 | '入骨相思知不知', 39 | '多情只有春庭月', 40 | '尤为离人照落花', 41 | '若有知音见采', 42 | '不辞唱遍阳春', 43 | '休言半纸无多重', 44 | '万斛离愁尽耐担', 45 | '夜月一帘幽梦', 46 | '和光同尘', 47 | '杳霭流玉', 48 | '月落星沉', 49 | '霞姿月韵', 50 | '喜上眉梢', 51 | '醉后不知天在水', 52 | '满船星梦压星河', 53 | '落花人独立', 54 | '微雨燕双飞', 55 | '掬水月在手', 56 | '弄花香满衣', 57 | '夜深忽梦少年事', 58 | '唯梦闲人不梦君', 59 | '垆边人似月', 60 | '皓腕凝霜雪', 61 | '众里嫣然通一顾', 62 | '人间颜色如尘土', 63 | '若非群玉山头见', 64 | '会向瑶台月下逢', 65 | '沉鱼落雁鸟惊喧', 66 | '羞花闭月花愁颤', 67 | '解释春风无限恨', 68 | '沉香亭北倚阑干' 69 | ]; 70 | function randomNum(min, max) { 71 | var num = (Math.random() * (max - min + 1) + min).toFixed(2); 72 | return num; 73 | } 74 | function init() { 75 | let container = document.querySelector('.container'); 76 | let f = document.createDocumentFragment(); 77 | words.forEach(w => { 78 | let word_box = document.createElement('div'); 79 | let word = document.createElement('div'); 80 | word.innerText = w; 81 | word.classList.add('word'); 82 | word.style.color = '#BAABDA'; 83 | word.style.fontFamily = '楷体'; 84 | word.style.fontSize = '20px' 85 | word_box.classList.add('word-box'); 86 | word_box.style.setProperty("--margin-top", randomNum(-40, 20) + 'vh'); 87 | word_box.style.setProperty("--margin-left", randomNum(6, 35) + 'vw'); 88 | word_box.style.setProperty("--animation-duration", randomNum(8, 20) + 's'); 89 | word_box.style.setProperty("--animation-delay", randomNum(-20, 0) + 's'); 90 | 91 | word_box.appendChild(word); 92 | f.appendChild(word_box); 93 | 94 | 95 | }) 96 | container.appendChild(f); 97 | } 98 | window.addEventListener('load', init); 99 | let textone = document.querySelector('.textone').querySelector('h1'); 100 | let text = document.querySelector('.text').querySelector('h1'); 101 | setTimeout(function () { 102 | textone.innerHTML = '今晚，整片星空将为你一人闪烁'; 103 | textone.style.color = '#E8F9FD'; 104 | textone.style.fontFamily = '楷体' 105 | text.innerHTML = ''; 106 | }, 28000) 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /19七夕祝福网页新/onlyto/skystar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 今晚，整片星空将为你一人闪烁 8 | 22 | 23 | 24 | 25 | 28 |
        29 |

        look at the stars

        30 |
        31 |
        32 |

        look how they shine for u

        33 |
        34 | 35 |
        36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /19七夕祝福网页新/onlyto/video/skystar.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/19七夕祝福网页新/onlyto/video/skystar.mp4 -------------------------------------------------------------------------------- /19七夕祝福网页新/素材/1.md: -------------------------------------------------------------------------------- 1 | 《梦华录》大结局,里面 20 句绝美古诗词 2 | http://news.sohu.com/a/562772982_121422779 3 | 4 | 改进思路 5 | 加入预热环节，前面慢慢的文字，后面再跳出炫酷的画面 6 | 7 | 背景音乐和视频都自动播放 -------------------------------------------------------------------------------- /20js中this指向问题及call,apply,bind的区别/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

        打开控制台看内容

        11 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /21node.js学习巩固/helloNodejs.js: -------------------------------------------------------------------------------- 1 | console.log('hello nodejs') 2 | console.log(__filename) // 当前文件完整路径 -------------------------------------------------------------------------------- /22js中的原型与原型链实践/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

        打开控制台看内容

        11 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /23气泡背景登录页面/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/front-end-study-GoGoGo/template-html-css-js/5267bb56d2cd47e357b5aabc744d87c08224f307/23气泡背景登录页面/.DS_Store -------------------------------------------------------------------------------- /23气泡背景登录页面/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | CSS3动态气泡背景登录页面 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
        15 |
        16 |
        17 |
        18 | 19 | 20 |
        21 | 30 |
        31 |
        32 | 33 |
        34 |

        创建一个账号? 立即登录!

        35 |
        36 |
        37 | 38 |
        39 |

        © 2022 All rights Reserved

        40 |
        41 | 42 |
          43 |
        • 44 |
        • 45 |
        • 46 |
        • 47 |
        • 48 |
        • 49 |
        • 50 |
        • 51 |
        • 52 |
        • 53 |
        54 |
        55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # template-html-css-js 2 | 网页组件模板汇总 3 | -------------------------------------------------------------------------------- /tests/1-Promise基本使用/1-初体验.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 基本使用 6 | 7 | 8 | 9 |
        10 |

        Promise 初体验

        11 | 12 |
        13 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /tests/1-Promise基本使用/2-Promise实践练习-fs模块.js: -------------------------------------------------------------------------------- 1 | // 2 | const fs = require('fs'); 3 | 4 | //回调函数 形式 5 | // fs.readFile('./resource/content.txt', (err, data) => { 6 | // // 如果出错 则抛出错误 7 | // if(err) throw err; 8 | // //输出文件内容 9 | // console.log(data.toString()); 10 | // }); 11 | 12 | //Promise 形式 13 | let p = new Promise((resolve , reject) => { 14 | fs.readFile('./resource/content.tx', (err, data) => { 15 | //如果出错 16 | if(err) reject(err); 17 | //如果成功 18 | resolve(data); 19 | }); 20 | }); 21 | 22 | //调用 then 23 | p.then(value=>{ 24 | console.log(value.toString()); 25 | }, reason=>{ 26 | console.log(reason); 27 | }); 28 | -------------------------------------------------------------------------------- /tests/1-Promise基本使用/3-Promise实践练习-AJAX请求.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise 封装 AJAX 7 | 8 | 9 | 10 |
        11 |

        Promise 封装 AJAX 操作

        12 | 13 |
        14 | 50 | 51 | -------------------------------------------------------------------------------- /tests/1-Promise基本使用/4-Promise封装练习-fs模块.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 封装一个函数 mineReadFile 读取文件内容 3 | * 参数: path 文件路径 4 | * 返回: promise 对象 5 | */ 6 | function mineReadFile(path){ 7 | return new Promise((resolve, reject) => { 8 | //读取文件 9 | require('fs').readFile(path, (err, data) =>{ 10 | //判断 11 | if(err) reject(err); 12 | //成功 13 | resolve(data); 14 | }); 15 | }); 16 | } 17 | 18 | mineReadFile('./resource/content.txt') 19 | .then(value=>{ 20 | //输出文件内容 21 | console.log(value.toString()); 22 | }, reason=>{ 23 | console.log(reason); 24 | }); 25 | -------------------------------------------------------------------------------- /tests/1-Promise基本使用/5-util.promisify方法.js: -------------------------------------------------------------------------------- 1 | /** 2 | * util.promisify 方法 3 | */ 4 | //引入 util 模块 5 | const util = require('util'); 6 | //引入 fs 模块 7 | const fs = require('fs'); 8 | //返回一个新的函数 9 | let mineReadFile = util.promisify(fs.readFile); 10 | 11 | mineReadFile('./resource/content.txt').then(value=>{ 12 | console.log(value.toString()); 13 | }); -------------------------------------------------------------------------------- /tests/1-Promise基本使用/6-Promise封装AJAX操作.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise封装AJAX操作 7 | 8 | 9 | 43 | 44 | -------------------------------------------------------------------------------- /tests/1-Promise基本使用/resource/content.txt: -------------------------------------------------------------------------------- 1 | 观书有感 2 | 作者：朱熹 3 | 半亩方塘一鉴开，天光云影共徘徊。 4 | 问渠那得清如许？为有源头活水来 -------------------------------------------------------------------------------- /tests/2-Promise-API/1-Promise的API-then和catch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise API 7 | 8 | 9 | 25 | 26 | -------------------------------------------------------------------------------- /tests/2-Promise-API/2-Promise的API-resolve.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise API - resolve 7 | 8 | 9 | 23 | 24 | -------------------------------------------------------------------------------- /tests/2-Promise-API/3-Promise的API-reject.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise API - reject 7 | 8 | 9 | 18 | 19 | -------------------------------------------------------------------------------- /tests/2-Promise-API/4-Promise的API-all.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise API - all 7 | 8 | 9 | 22 | 23 | -------------------------------------------------------------------------------- /tests/2-Promise-API/5-Promise的API-race.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promise API - race 8 | 9 | 10 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /tests/3-关键问题/1-如何修改promise对象状态.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise关键问题 - Promise 对象状态改变的方式 7 | 8 | 9 | 21 | 22 | -------------------------------------------------------------------------------- /tests/3-关键问题/2-能否执行多个回调.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise关键问题 - Promise 指定多个回调 7 | 8 | 9 | 24 | 25 | -------------------------------------------------------------------------------- /tests/3-关键问题/3-改变状态与指定回调顺序问题.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise关键问题 - Promise 改变状态与指定回调的顺序问题 7 | 8 | 9 | 23 | 24 | -------------------------------------------------------------------------------- /tests/3-关键问题/4-then方法的返回结果由什么决定.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise关键问题 - Promise then方法的返回结果特点 7 | 8 | 9 | 31 | 32 | -------------------------------------------------------------------------------- /tests/3-关键问题/5-promise如何串联多个任务.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise关键问题 - 如何串联多个任务 7 | 8 | 9 | 26 | 27 | -------------------------------------------------------------------------------- /tests/3-关键问题/6-异常穿透现象是怎么回事.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise关键问题 - 异常穿透 7 | 8 | 9 | 28 | 29 | -------------------------------------------------------------------------------- /tests/3-关键问题/7-如何中断Promise链条.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise关键问题 - 中断 Promise 链条 7 | 8 | 9 | 28 | 29 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/1-初始结构搭建/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 1 - 初始结构搭建 7 | 8 | 9 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/1-初始结构搭建/promise.js: -------------------------------------------------------------------------------- 1 | 2 | function Promise(executor){ 3 | 4 | } 5 | 6 | //添加 then 方法 7 | Promise.prototype.then = function(onResolved, onRejected){ 8 | 9 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/10-1异步修改状态then方法返回结果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 10 - 异步任务 then 返回结果 7 | 8 | 9 | 10 | 30 | 31 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/10-1异步修改状态then方法返回结果/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callbacks = []; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | self.callbacks.forEach(item => { 20 | item.onResolved(data); 21 | }); 22 | } 23 | //reject 函数 24 | function reject(data){ 25 | //判断状态 26 | if(self.PromiseState !== 'pending') return; 27 | //1. 修改对象的状态 (promiseState) 28 | self.PromiseState = 'rejected';// 29 | //2. 设置对象结果值 (promiseResult) 30 | self.PromiseResult = data; 31 | //执行失败的回调 32 | self.callbacks.forEach(item => { 33 | item.onRejected(data); 34 | }); 35 | } 36 | try{ 37 | //同步调用『执行器函数』 38 | executor(resolve, reject); 39 | }catch(e){ 40 | //修改 promise 对象状态为『失败』 41 | reject(e); 42 | } 43 | } 44 | 45 | //添加 then 方法 46 | Promise.prototype.then = function(onResolved, onRejected){ 47 | const self = this; 48 | return new Promise((resolve, reject) => { 49 | //调用回调函数 PromiseState 50 | if(this.PromiseState === 'fulfilled'){ 51 | try{ 52 | //获取回调函数的执行结果 53 | let result = onResolved(this.PromiseResult); 54 | //判断 55 | if(result instanceof Promise){ 56 | //如果是 Promise 类型的对象 57 | result.then(v => { 58 | resolve(v); 59 | }, r=>{ 60 | reject(r); 61 | }) 62 | }else{ 63 | //结果的对象状态为『成功』 64 | resolve(result); 65 | } 66 | }catch(e){ 67 | reject(e); 68 | } 69 | } 70 | if(this.PromiseState === 'rejected'){ 71 | onRejected(this.PromiseResult); 72 | } 73 | //判断 pending 状态 74 | if(this.PromiseState === 'pending'){ 75 | //保存回调函数 76 | this.callbacks.push({ 77 | onResolved: function(){ 78 | try{ 79 | //执行成功回调函数 80 | let result = onResolved(self.PromiseResult); 81 | //判断 82 | if(result instanceof Promise){ 83 | result.then(v => { 84 | resolve(v); 85 | }, r=>{ 86 | reject(r); 87 | }) 88 | }else{ 89 | resolve(result); 90 | } 91 | }catch(e){ 92 | reject(e); 93 | } 94 | }, 95 | onRejected: function(){ 96 | try{ 97 | //执行成功回调函数 98 | let result = onRejected(self.PromiseResult); 99 | //判断 100 | if(result instanceof Promise){ 101 | result.then(v => { 102 | resolve(v); 103 | }, r=>{ 104 | reject(r); 105 | }) 106 | }else{ 107 | resolve(result); 108 | } 109 | }catch(e){ 110 | reject(e); 111 | } 112 | } 113 | }); 114 | } 115 | }) 116 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/10-2-then方法代码优化/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 10 - 异步任务 then 返回结果 7 | 8 | 9 | 10 | 28 | 29 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/10-2-then方法代码优化/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callbacks = []; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | self.callbacks.forEach(item => { 20 | item.onResolved(data); 21 | }); 22 | } 23 | //reject 函数 24 | function reject(data){ 25 | //判断状态 26 | if(self.PromiseState !== 'pending') return; 27 | //1. 修改对象的状态 (promiseState) 28 | self.PromiseState = 'rejected';// 29 | //2. 设置对象结果值 (promiseResult) 30 | self.PromiseResult = data; 31 | //执行失败的回调 32 | self.callbacks.forEach(item => { 33 | item.onRejected(data); 34 | }); 35 | } 36 | try{ 37 | //同步调用『执行器函数』 38 | executor(resolve, reject); 39 | }catch(e){ 40 | //修改 promise 对象状态为『失败』 41 | reject(e); 42 | } 43 | } 44 | 45 | //添加 then 方法 46 | Promise.prototype.then = function(onResolved, onRejected){ 47 | const self = this; 48 | return new Promise((resolve, reject) => { 49 | //封装函数 50 | function callback(type){ 51 | try{ 52 | //获取回调函数的执行结果 53 | let result = type(self.PromiseResult); 54 | //判断 55 | if(result instanceof Promise){ 56 | //如果是 Promise 类型的对象 57 | result.then(v => { 58 | resolve(v); 59 | }, r=>{ 60 | reject(r); 61 | }) 62 | }else{ 63 | //结果的对象状态为『成功』 64 | resolve(result); 65 | } 66 | }catch(e){ 67 | reject(e); 68 | } 69 | } 70 | //调用回调函数 PromiseState 71 | if(this.PromiseState === 'fulfilled'){ 72 | callback(onResolved); 73 | } 74 | if(this.PromiseState === 'rejected'){ 75 | callback(onRejected); 76 | } 77 | //判断 pending 状态 78 | if(this.PromiseState === 'pending'){ 79 | //保存回调函数 80 | this.callbacks.push({ 81 | onResolved: function(){ 82 | callback(onResolved); 83 | }, 84 | onRejected: function(){ 85 | callback(onRejected); 86 | } 87 | }); 88 | } 89 | }) 90 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/11-catch方法与异常穿透/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 11 - catch 方法与异常穿透 7 | 8 | 9 | 10 | 31 | 32 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/11-catch方法与异常穿透/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callbacks = []; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | self.callbacks.forEach(item => { 20 | item.onResolved(data); 21 | }); 22 | } 23 | //reject 函数 24 | function reject(data){ 25 | //判断状态 26 | if(self.PromiseState !== 'pending') return; 27 | //1. 修改对象的状态 (promiseState) 28 | self.PromiseState = 'rejected';// 29 | //2. 设置对象结果值 (promiseResult) 30 | self.PromiseResult = data; 31 | //执行失败的回调 32 | self.callbacks.forEach(item => { 33 | item.onRejected(data); 34 | }); 35 | } 36 | try{ 37 | //同步调用『执行器函数』 38 | executor(resolve, reject); 39 | }catch(e){ 40 | //修改 promise 对象状态为『失败』 41 | reject(e); 42 | } 43 | } 44 | 45 | //添加 then 方法 46 | Promise.prototype.then = function(onResolved, onRejected){ 47 | const self = this; 48 | //判断回调函数参数 49 | if(typeof onRejected !== 'function'){ 50 | onRejected = reason => { 51 | throw reason; 52 | } 53 | } 54 | if(typeof onResolved !== 'function'){ 55 | onResolved = value => value; 56 | //value => { return value}; 57 | } 58 | return new Promise((resolve, reject) => { 59 | //封装函数 60 | function callback(type){ 61 | try{ 62 | //获取回调函数的执行结果 63 | let result = type(self.PromiseResult); 64 | //判断 65 | if(result instanceof Promise){ 66 | //如果是 Promise 类型的对象 67 | result.then(v => { 68 | resolve(v); 69 | }, r=>{ 70 | reject(r); 71 | }) 72 | }else{ 73 | //结果的对象状态为『成功』 74 | resolve(result); 75 | } 76 | }catch(e){ 77 | reject(e); 78 | } 79 | } 80 | //调用回调函数 PromiseState 81 | if(this.PromiseState === 'fulfilled'){ 82 | callback(onResolved); 83 | } 84 | if(this.PromiseState === 'rejected'){ 85 | callback(onRejected); 86 | } 87 | //判断 pending 状态 88 | if(this.PromiseState === 'pending'){ 89 | //保存回调函数 90 | this.callbacks.push({ 91 | onResolved: function(){ 92 | callback(onResolved); 93 | }, 94 | onRejected: function(){ 95 | callback(onRejected); 96 | } 97 | }); 98 | } 99 | }) 100 | } 101 | 102 | //添加 catch 方法 103 | Promise.prototype.catch = function(onRejected){ 104 | return this.then(undefined, onRejected); 105 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/12-Promise.resolve/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 12 - Promise.resolve 封装 7 | 8 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/12-Promise.resolve/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callbacks = []; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | self.callbacks.forEach(item => { 20 | item.onResolved(data); 21 | }); 22 | } 23 | //reject 函数 24 | function reject(data){ 25 | //判断状态 26 | if(self.PromiseState !== 'pending') return; 27 | //1. 修改对象的状态 (promiseState) 28 | self.PromiseState = 'rejected';// 29 | //2. 设置对象结果值 (promiseResult) 30 | self.PromiseResult = data; 31 | //执行失败的回调 32 | self.callbacks.forEach(item => { 33 | item.onRejected(data); 34 | }); 35 | } 36 | try{ 37 | //同步调用『执行器函数』 38 | executor(resolve, reject); 39 | }catch(e){ 40 | //修改 promise 对象状态为『失败』 41 | reject(e); 42 | } 43 | } 44 | 45 | //添加 then 方法 46 | Promise.prototype.then = function(onResolved, onRejected){ 47 | const self = this; 48 | //判断回调函数参数 49 | if(typeof onRejected !== 'function'){ 50 | onRejected = reason => { 51 | throw reason; 52 | } 53 | } 54 | if(typeof onResolved !== 'function'){ 55 | onResolved = value => value; 56 | //value => { return value}; 57 | } 58 | return new Promise((resolve, reject) => { 59 | //封装函数 60 | function callback(type){ 61 | try{ 62 | //获取回调函数的执行结果 63 | let result = type(self.PromiseResult); 64 | //判断 65 | if(result instanceof Promise){ 66 | //如果是 Promise 类型的对象 67 | result.then(v => { 68 | resolve(v); 69 | }, r=>{ 70 | reject(r); 71 | }) 72 | }else{ 73 | //结果的对象状态为『成功』 74 | resolve(result); 75 | } 76 | }catch(e){ 77 | reject(e); 78 | } 79 | } 80 | //调用回调函数 PromiseState 81 | if(this.PromiseState === 'fulfilled'){ 82 | callback(onResolved); 83 | } 84 | if(this.PromiseState === 'rejected'){ 85 | callback(onRejected); 86 | } 87 | //判断 pending 状态 88 | if(this.PromiseState === 'pending'){ 89 | //保存回调函数 90 | this.callbacks.push({ 91 | onResolved: function(){ 92 | callback(onResolved); 93 | }, 94 | onRejected: function(){ 95 | callback(onRejected); 96 | } 97 | }); 98 | } 99 | }) 100 | } 101 | 102 | //添加 catch 方法 103 | Promise.prototype.catch = function(onRejected){ 104 | return this.then(undefined, onRejected); 105 | } 106 | 107 | //添加 resolve 方法 108 | Promise.resolve = function(value){ 109 | //返回promise对象 110 | return new Promise((resolve, reject) => { 111 | if(value instanceof Promise){ 112 | value.then(v=>{ 113 | resolve(v); 114 | }, r=>{ 115 | reject(r); 116 | }) 117 | }else{ 118 | //状态设置为成功 119 | resolve(value); 120 | } 121 | }); 122 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/13-Promise.reject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 13 - Promise.reject 封装 7 | 8 | 9 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/13-Promise.reject/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callbacks = []; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | self.callbacks.forEach(item => { 20 | item.onResolved(data); 21 | }); 22 | } 23 | //reject 函数 24 | function reject(data){ 25 | //判断状态 26 | if(self.PromiseState !== 'pending') return; 27 | //1. 修改对象的状态 (promiseState) 28 | self.PromiseState = 'rejected';// 29 | //2. 设置对象结果值 (promiseResult) 30 | self.PromiseResult = data; 31 | //执行失败的回调 32 | self.callbacks.forEach(item => { 33 | item.onRejected(data); 34 | }); 35 | } 36 | try{ 37 | //同步调用『执行器函数』 38 | executor(resolve, reject); 39 | }catch(e){ 40 | //修改 promise 对象状态为『失败』 41 | reject(e); 42 | } 43 | } 44 | 45 | //添加 then 方法 46 | Promise.prototype.then = function(onResolved, onRejected){ 47 | const self = this; 48 | //判断回调函数参数 49 | if(typeof onRejected !== 'function'){ 50 | onRejected = reason => { 51 | throw reason; 52 | } 53 | } 54 | if(typeof onResolved !== 'function'){ 55 | onResolved = value => value; 56 | //value => { return value}; 57 | } 58 | return new Promise((resolve, reject) => { 59 | //封装函数 60 | function callback(type){ 61 | try{ 62 | //获取回调函数的执行结果 63 | let result = type(self.PromiseResult); 64 | //判断 65 | if(result instanceof Promise){ 66 | //如果是 Promise 类型的对象 67 | result.then(v => { 68 | resolve(v); 69 | }, r=>{ 70 | reject(r); 71 | }) 72 | }else{ 73 | //结果的对象状态为『成功』 74 | resolve(result); 75 | } 76 | }catch(e){ 77 | reject(e); 78 | } 79 | } 80 | //调用回调函数 PromiseState 81 | if(this.PromiseState === 'fulfilled'){ 82 | callback(onResolved); 83 | } 84 | if(this.PromiseState === 'rejected'){ 85 | callback(onRejected); 86 | } 87 | //判断 pending 状态 88 | if(this.PromiseState === 'pending'){ 89 | //保存回调函数 90 | this.callbacks.push({ 91 | onResolved: function(){ 92 | callback(onResolved); 93 | }, 94 | onRejected: function(){ 95 | callback(onRejected); 96 | } 97 | }); 98 | } 99 | }) 100 | } 101 | 102 | //添加 catch 方法 103 | Promise.prototype.catch = function(onRejected){ 104 | return this.then(undefined, onRejected); 105 | } 106 | 107 | //添加 resolve 方法 108 | Promise.resolve = function(value){ 109 | //返回promise对象 110 | return new Promise((resolve, reject) => { 111 | if(value instanceof Promise){ 112 | value.then(v=>{ 113 | resolve(v); 114 | }, r=>{ 115 | reject(r); 116 | }) 117 | }else{ 118 | //状态设置为成功 119 | resolve(value); 120 | } 121 | }); 122 | } 123 | 124 | //添加 reject 方法 125 | Promise.reject = function(reason){ 126 | return new Promise((resolve, reject)=>{ 127 | reject(reason); 128 | }); 129 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/14-Promise.all方法实现/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 14 - Promise.all 封装 7 | 8 | 9 | 10 | 24 | 25 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/14-Promise.all方法实现/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callbacks = []; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | self.callbacks.forEach(item => { 20 | item.onResolved(data); 21 | }); 22 | } 23 | //reject 函数 24 | function reject(data){ 25 | //判断状态 26 | if(self.PromiseState !== 'pending') return; 27 | //1. 修改对象的状态 (promiseState) 28 | self.PromiseState = 'rejected';// 29 | //2. 设置对象结果值 (promiseResult) 30 | self.PromiseResult = data; 31 | //执行失败的回调 32 | self.callbacks.forEach(item => { 33 | item.onRejected(data); 34 | }); 35 | } 36 | try{ 37 | //同步调用『执行器函数』 38 | executor(resolve, reject); 39 | }catch(e){ 40 | //修改 promise 对象状态为『失败』 41 | reject(e); 42 | } 43 | } 44 | 45 | //添加 then 方法 46 | Promise.prototype.then = function(onResolved, onRejected){ 47 | const self = this; 48 | //判断回调函数参数 49 | if(typeof onRejected !== 'function'){ 50 | onRejected = reason => { 51 | throw reason; 52 | } 53 | } 54 | if(typeof onResolved !== 'function'){ 55 | onResolved = value => value; 56 | //value => { return value}; 57 | } 58 | return new Promise((resolve, reject) => { 59 | //封装函数 60 | function callback(type){ 61 | try{ 62 | //获取回调函数的执行结果 63 | let result = type(self.PromiseResult); 64 | //判断 65 | if(result instanceof Promise){ 66 | //如果是 Promise 类型的对象 67 | result.then(v => { 68 | resolve(v); 69 | }, r=>{ 70 | reject(r); 71 | }) 72 | }else{ 73 | //结果的对象状态为『成功』 74 | resolve(result); 75 | } 76 | }catch(e){ 77 | reject(e); 78 | } 79 | } 80 | //调用回调函数 PromiseState 81 | if(this.PromiseState === 'fulfilled'){ 82 | callback(onResolved); 83 | } 84 | if(this.PromiseState === 'rejected'){ 85 | callback(onRejected); 86 | } 87 | //判断 pending 状态 88 | if(this.PromiseState === 'pending'){ 89 | //保存回调函数 90 | this.callbacks.push({ 91 | onResolved: function(){ 92 | callback(onResolved); 93 | }, 94 | onRejected: function(){ 95 | callback(onRejected); 96 | } 97 | }); 98 | } 99 | }) 100 | } 101 | 102 | //添加 catch 方法 103 | Promise.prototype.catch = function(onRejected){ 104 | return this.then(undefined, onRejected); 105 | } 106 | 107 | //添加 resolve 方法 108 | Promise.resolve = function(value){ 109 | //返回promise对象 110 | return new Promise((resolve, reject) => { 111 | if(value instanceof Promise){ 112 | value.then(v=>{ 113 | resolve(v); 114 | }, r=>{ 115 | reject(r); 116 | }) 117 | }else{ 118 | //状态设置为成功 119 | resolve(value); 120 | } 121 | }); 122 | } 123 | 124 | //添加 reject 方法 125 | Promise.reject = function(reason){ 126 | return new Promise((resolve, reject)=>{ 127 | reject(reason); 128 | }); 129 | } 130 | 131 | //添加 all 方法 132 | Promise.all = function(promises){ 133 | //返回结果为promise对象 134 | return new Promise((resolve, reject) => { 135 | //声明变量 136 | let count = 0; 137 | let arr = []; 138 | //遍历 139 | for(let i=0;i { 142 | //得知对象的状态是成功 143 | //每个promise对象 都成功 144 | count++; 145 | //将当前promise对象成功的结果 存入到数组中 146 | arr[i] = v; 147 | //判断 148 | if(count === promises.length){ 149 | //修改状态 150 | resolve(arr); 151 | } 152 | }, r => { 153 | reject(r); 154 | }); 155 | } 156 | }); 157 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/15-Promise.race方法实现/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 15 - Promise.race 封装 7 | 8 | 9 | 10 | 24 | 25 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/15-Promise.race方法实现/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callbacks = []; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | self.callbacks.forEach(item => { 20 | item.onResolved(data); 21 | }); 22 | } 23 | //reject 函数 24 | function reject(data){ 25 | //判断状态 26 | if(self.PromiseState !== 'pending') return; 27 | //1. 修改对象的状态 (promiseState) 28 | self.PromiseState = 'rejected';// 29 | //2. 设置对象结果值 (promiseResult) 30 | self.PromiseResult = data; 31 | //执行失败的回调 32 | self.callbacks.forEach(item => { 33 | item.onRejected(data); 34 | }); 35 | } 36 | try{ 37 | //同步调用『执行器函数』 38 | executor(resolve, reject); 39 | }catch(e){ 40 | //修改 promise 对象状态为『失败』 41 | reject(e); 42 | } 43 | } 44 | 45 | //添加 then 方法 46 | Promise.prototype.then = function(onResolved, onRejected){ 47 | const self = this; 48 | //判断回调函数参数 49 | if(typeof onRejected !== 'function'){ 50 | onRejected = reason => { 51 | throw reason; 52 | } 53 | } 54 | if(typeof onResolved !== 'function'){ 55 | onResolved = value => value; 56 | //value => { return value}; 57 | } 58 | return new Promise((resolve, reject) => { 59 | //封装函数 60 | function callback(type){ 61 | try{ 62 | //获取回调函数的执行结果 63 | let result = type(self.PromiseResult); 64 | //判断 65 | if(result instanceof Promise){ 66 | //如果是 Promise 类型的对象 67 | result.then(v => { 68 | resolve(v); 69 | }, r=>{ 70 | reject(r); 71 | }) 72 | }else{ 73 | //结果的对象状态为『成功』 74 | resolve(result); 75 | } 76 | }catch(e){ 77 | reject(e); 78 | } 79 | } 80 | //调用回调函数 PromiseState 81 | if(this.PromiseState === 'fulfilled'){ 82 | callback(onResolved); 83 | } 84 | if(this.PromiseState === 'rejected'){ 85 | callback(onRejected); 86 | } 87 | //判断 pending 状态 88 | if(this.PromiseState === 'pending'){ 89 | //保存回调函数 90 | this.callbacks.push({ 91 | onResolved: function(){ 92 | callback(onResolved); 93 | }, 94 | onRejected: function(){ 95 | callback(onRejected); 96 | } 97 | }); 98 | } 99 | }) 100 | } 101 | 102 | //添加 catch 方法 103 | Promise.prototype.catch = function(onRejected){ 104 | return this.then(undefined, onRejected); 105 | } 106 | 107 | //添加 resolve 方法 108 | Promise.resolve = function(value){ 109 | //返回promise对象 110 | return new Promise((resolve, reject) => { 111 | if(value instanceof Promise){ 112 | value.then(v=>{ 113 | resolve(v); 114 | }, r=>{ 115 | reject(r); 116 | }) 117 | }else{ 118 | //状态设置为成功 119 | resolve(value); 120 | } 121 | }); 122 | } 123 | 124 | //添加 reject 方法 125 | Promise.reject = function(reason){ 126 | return new Promise((resolve, reject)=>{ 127 | reject(reason); 128 | }); 129 | } 130 | 131 | //添加 all 方法 132 | Promise.all = function(promises){ 133 | //返回结果为promise对象 134 | return new Promise((resolve, reject) => { 135 | //声明变量 136 | let count = 0; 137 | let arr = []; 138 | //遍历 139 | for(let i=0;i { 142 | //得知对象的状态是成功 143 | //每个promise对象 都成功 144 | count++; 145 | //将当前promise对象成功的结果 存入到数组中 146 | arr[i] = v; 147 | //判断 148 | if(count === promises.length){ 149 | //修改状态 150 | resolve(arr); 151 | } 152 | }, r => { 153 | reject(r); 154 | }); 155 | } 156 | }); 157 | } 158 | 159 | //添加 race 方法 160 | Promise.race = function(promises){ 161 | return new Promise((resolve, reject) => { 162 | for(let i=0;i { 164 | //修改返回对象的状态为 『成功』 165 | resolve(v); 166 | },r=>{ 167 | //修改返回对象的状态为 『失败』 168 | reject(r); 169 | }) 170 | } 171 | }); 172 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/16-then回调函数异步执行的实现/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 16 - 回调函数『异步执行』 7 | 8 | 9 | 10 | 24 | 25 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/16-then回调函数异步执行的实现/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callbacks = []; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | setTimeout(() => { 20 | self.callbacks.forEach(item => { 21 | item.onResolved(data); 22 | }); 23 | }); 24 | } 25 | //reject 函数 26 | function reject(data){ 27 | //判断状态 28 | if(self.PromiseState !== 'pending') return; 29 | //1. 修改对象的状态 (promiseState) 30 | self.PromiseState = 'rejected';// 31 | //2. 设置对象结果值 (promiseResult) 32 | self.PromiseResult = data; 33 | //执行失败的回调 34 | setTimeout(() => { 35 | self.callbacks.forEach(item => { 36 | item.onRejected(data); 37 | }); 38 | }); 39 | } 40 | try{ 41 | //同步调用『执行器函数』 42 | executor(resolve, reject); 43 | }catch(e){ 44 | //修改 promise 对象状态为『失败』 45 | reject(e); 46 | } 47 | } 48 | 49 | //添加 then 方法 50 | Promise.prototype.then = function(onResolved, onRejected){ 51 | const self = this; 52 | //判断回调函数参数 53 | if(typeof onRejected !== 'function'){ 54 | onRejected = reason => { 55 | throw reason; 56 | } 57 | } 58 | if(typeof onResolved !== 'function'){ 59 | onResolved = value => value; 60 | //value => { return value}; 61 | } 62 | return new Promise((resolve, reject) => { 63 | //封装函数 64 | function callback(type){ 65 | try{ 66 | //获取回调函数的执行结果 67 | let result = type(self.PromiseResult); 68 | //判断 69 | if(result instanceof Promise){ 70 | //如果是 Promise 类型的对象 71 | result.then(v => { 72 | resolve(v); 73 | }, r=>{ 74 | reject(r); 75 | }) 76 | }else{ 77 | //结果的对象状态为『成功』 78 | resolve(result); 79 | } 80 | }catch(e){ 81 | reject(e); 82 | } 83 | } 84 | //调用回调函数 PromiseState 85 | if(this.PromiseState === 'fulfilled'){ 86 | setTimeout(() => { 87 | callback(onResolved); 88 | }); 89 | } 90 | if(this.PromiseState === 'rejected'){ 91 | setTimeout(() => { 92 | callback(onRejected); 93 | }); 94 | } 95 | //判断 pending 状态 96 | if(this.PromiseState === 'pending'){ 97 | //保存回调函数 98 | this.callbacks.push({ 99 | onResolved: function(){ 100 | callback(onResolved); 101 | }, 102 | onRejected: function(){ 103 | callback(onRejected); 104 | } 105 | }); 106 | } 107 | }) 108 | } 109 | 110 | //添加 catch 方法 111 | Promise.prototype.catch = function(onRejected){ 112 | return this.then(undefined, onRejected); 113 | } 114 | 115 | //添加 resolve 方法 116 | Promise.resolve = function(value){ 117 | //返回promise对象 118 | return new Promise((resolve, reject) => { 119 | if(value instanceof Promise){ 120 | value.then(v=>{ 121 | resolve(v); 122 | }, r=>{ 123 | reject(r); 124 | }) 125 | }else{ 126 | //状态设置为成功 127 | resolve(value); 128 | } 129 | }); 130 | } 131 | 132 | //添加 reject 方法 133 | Promise.reject = function(reason){ 134 | return new Promise((resolve, reject)=>{ 135 | reject(reason); 136 | }); 137 | } 138 | 139 | //添加 all 方法 140 | Promise.all = function(promises){ 141 | //返回结果为promise对象 142 | return new Promise((resolve, reject) => { 143 | //声明变量 144 | let count = 0; 145 | let arr = []; 146 | //遍历 147 | for(let i=0;i { 150 | //得知对象的状态是成功 151 | //每个promise对象 都成功 152 | count++; 153 | //将当前promise对象成功的结果 存入到数组中 154 | arr[i] = v; 155 | //判断 156 | if(count === promises.length){ 157 | //修改状态 158 | resolve(arr); 159 | } 160 | }, r => { 161 | reject(r); 162 | }); 163 | } 164 | }); 165 | } 166 | 167 | //添加 race 方法 168 | Promise.race = function(promises){ 169 | return new Promise((resolve, reject) => { 170 | for(let i=0;i { 172 | //修改返回对象的状态为 『成功』 173 | resolve(v); 174 | },r=>{ 175 | //修改返回对象的状态为 『失败』 176 | reject(r); 177 | }) 178 | } 179 | }); 180 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/17-class版本封装/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 17 - class版本封装 7 | 8 | 9 | 10 | 26 | 27 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/17-class版本封装/promise.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | class Promise{ 4 | //构造方法 5 | constructor(executor){ 6 | //添加属性 7 | this.PromiseState = 'pending'; 8 | this.PromiseResult = null; 9 | //声明属性 10 | this.callbacks = []; 11 | //保存实例对象的 this 的值 12 | const self = this;// self _this that 13 | //resolve 函数 14 | function resolve(data){ 15 | //判断状态 16 | if(self.PromiseState !== 'pending') return; 17 | //1. 修改对象的状态 (promiseState) 18 | self.PromiseState = 'fulfilled';// resolved 19 | //2. 设置对象结果值 (promiseResult) 20 | self.PromiseResult = data; 21 | //调用成功的回调函数 22 | setTimeout(() => { 23 | self.callbacks.forEach(item => { 24 | item.onResolved(data); 25 | }); 26 | }); 27 | } 28 | //reject 函数 29 | function reject(data){ 30 | //判断状态 31 | if(self.PromiseState !== 'pending') return; 32 | //1. 修改对象的状态 (promiseState) 33 | self.PromiseState = 'rejected';// 34 | //2. 设置对象结果值 (promiseResult) 35 | self.PromiseResult = data; 36 | //执行失败的回调 37 | setTimeout(() => { 38 | self.callbacks.forEach(item => { 39 | item.onRejected(data); 40 | }); 41 | }); 42 | } 43 | try{ 44 | //同步调用『执行器函数』 45 | executor(resolve, reject); 46 | }catch(e){ 47 | //修改 promise 对象状态为『失败』 48 | reject(e); 49 | } 50 | } 51 | 52 | //then 方法封装 53 | then(onResolved,onRejected){ 54 | const self = this; 55 | //判断回调函数参数 56 | if(typeof onRejected !== 'function'){ 57 | onRejected = reason => { 58 | throw reason; 59 | } 60 | } 61 | if(typeof onResolved !== 'function'){ 62 | onResolved = value => value; 63 | //value => { return value}; 64 | } 65 | return new Promise((resolve, reject) => { 66 | //封装函数 67 | function callback(type){ 68 | try{ 69 | //获取回调函数的执行结果 70 | let result = type(self.PromiseResult); 71 | //判断 72 | if(result instanceof Promise){ 73 | //如果是 Promise 类型的对象 74 | result.then(v => { 75 | resolve(v); 76 | }, r=>{ 77 | reject(r); 78 | }) 79 | }else{ 80 | //结果的对象状态为『成功』 81 | resolve(result); 82 | } 83 | }catch(e){ 84 | reject(e); 85 | } 86 | } 87 | //调用回调函数 PromiseState 88 | if(this.PromiseState === 'fulfilled'){ 89 | setTimeout(() => { 90 | callback(onResolved); 91 | }); 92 | } 93 | if(this.PromiseState === 'rejected'){ 94 | setTimeout(() => { 95 | callback(onRejected); 96 | }); 97 | } 98 | //判断 pending 状态 99 | if(this.PromiseState === 'pending'){ 100 | //保存回调函数 101 | this.callbacks.push({ 102 | onResolved: function(){ 103 | callback(onResolved); 104 | }, 105 | onRejected: function(){ 106 | callback(onRejected); 107 | } 108 | }); 109 | } 110 | }) 111 | } 112 | 113 | //catch 方法 114 | catch(onRejected){ 115 | return this.then(undefined, onRejected); 116 | } 117 | 118 | //添加 resolve 方法 119 | static resolve(value){ 120 | //返回promise对象 121 | return new Promise((resolve, reject) => { 122 | if(value instanceof Promise){ 123 | value.then(v=>{ 124 | resolve(v); 125 | }, r=>{ 126 | reject(r); 127 | }) 128 | }else{ 129 | //状态设置为成功 130 | resolve(value); 131 | } 132 | }); 133 | } 134 | 135 | //添加 reject 方法 136 | static reject(reason){ 137 | return new Promise((resolve, reject)=>{ 138 | reject(reason); 139 | }); 140 | } 141 | 142 | //添加 all 方法 143 | static all(promises){ 144 | //返回结果为promise对象 145 | return new Promise((resolve, reject) => { 146 | //声明变量 147 | let count = 0; 148 | let arr = []; 149 | //遍历 150 | for(let i=0;i { 153 | //得知对象的状态是成功 154 | //每个promise对象 都成功 155 | count++; 156 | //将当前promise对象成功的结果 存入到数组中 157 | arr[i] = v; 158 | //判断 159 | if(count === promises.length){ 160 | //修改状态 161 | resolve(arr); 162 | } 163 | }, r => { 164 | reject(r); 165 | }); 166 | } 167 | }); 168 | } 169 | 170 | //添加 race 方法 171 | static race (promises){ 172 | return new Promise((resolve, reject) => { 173 | for(let i=0;i { 175 | //修改返回对象的状态为 『成功』 176 | resolve(v); 177 | },r=>{ 178 | //修改返回对象的状态为 『失败』 179 | reject(r); 180 | }) 181 | } 182 | }); 183 | } 184 | } 185 | 186 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/2-resolve与reject结构搭建/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 2 - resolve 与 reject 7 | 8 | 9 | 10 | 21 | 22 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/2-resolve与reject结构搭建/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //resolve 函数 4 | function resolve(data){ 5 | 6 | } 7 | //reject 函数 8 | function reject(data){ 9 | 10 | } 11 | 12 | //同步调用『执行器函数』 13 | executor(resolve, reject); 14 | } 15 | 16 | //添加 then 方法 17 | Promise.prototype.then = function(onResolved, onRejected){ 18 | 19 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/3-resolve与reject函数实现/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 2 - resolve 与 reject 7 | 8 | 9 | 10 | 24 | 25 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/3-resolve与reject函数实现/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //保存实例对象的 this 的值 7 | const self = this;// self _this that 8 | //resolve 函数 9 | function resolve(data){ 10 | //1. 修改对象的状态 (promiseState) 11 | self.PromiseState = 'fulfilled';// resolved 12 | //2. 设置对象结果值 (promiseResult) 13 | self.PromiseResult = data; 14 | } 15 | //reject 函数 16 | function reject(data){ 17 | //1. 修改对象的状态 (promiseState) 18 | self.PromiseState = 'rejected';// 19 | //2. 设置对象结果值 (promiseResult) 20 | self.PromiseResult = data; 21 | } 22 | 23 | //同步调用『执行器函数』 24 | executor(resolve, reject); 25 | } 26 | 27 | //添加 then 方法 28 | Promise.prototype.then = function(onResolved, onRejected){ 29 | 30 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/4-throw抛出错误改变状态/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 4 - throw 抛出异常改变状态 7 | 8 | 9 | 10 | 26 | 27 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/4-throw抛出错误改变状态/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //保存实例对象的 this 的值 7 | const self = this;// self _this that 8 | //resolve 函数 9 | function resolve(data){ 10 | //1. 修改对象的状态 (promiseState) 11 | self.PromiseState = 'fulfilled';// resolved 12 | //2. 设置对象结果值 (promiseResult) 13 | self.PromiseResult = data; 14 | } 15 | //reject 函数 16 | function reject(data){ 17 | //1. 修改对象的状态 (promiseState) 18 | self.PromiseState = 'rejected';// 19 | //2. 设置对象结果值 (promiseResult) 20 | self.PromiseResult = data; 21 | } 22 | try{ 23 | //同步调用『执行器函数』 24 | executor(resolve, reject); 25 | }catch(e){ 26 | //修改 promise 对象状态为『失败』 27 | reject(e); 28 | } 29 | } 30 | 31 | //添加 then 方法 32 | Promise.prototype.then = function(onResolved, onRejected){ 33 | 34 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/5-状态只能修改一次/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 5 - 状态只能修改一次 7 | 8 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/5-状态只能修改一次/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //保存实例对象的 this 的值 7 | const self = this;// self _this that 8 | //resolve 函数 9 | function resolve(data){ 10 | //判断状态 11 | if(self.PromiseState !== 'pending') return; 12 | //1. 修改对象的状态 (promiseState) 13 | self.PromiseState = 'fulfilled';// resolved 14 | //2. 设置对象结果值 (promiseResult) 15 | self.PromiseResult = data; 16 | } 17 | //reject 函数 18 | function reject(data){ 19 | //判断状态 20 | if(self.PromiseState !== 'pending') return; 21 | //1. 修改对象的状态 (promiseState) 22 | self.PromiseState = 'rejected';// 23 | //2. 设置对象结果值 (promiseResult) 24 | self.PromiseResult = data; 25 | } 26 | try{ 27 | //同步调用『执行器函数』 28 | executor(resolve, reject); 29 | }catch(e){ 30 | //修改 promise 对象状态为『失败』 31 | reject(e); 32 | } 33 | } 34 | 35 | //添加 then 方法 36 | Promise.prototype.then = function(onResolved, onRejected){ 37 | 38 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/6-then方法执行回调/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 6 - then 方法执行回调 7 | 8 | 9 | 10 | 24 | 25 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/6-then方法执行回调/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //保存实例对象的 this 的值 7 | const self = this;// self _this that 8 | //resolve 函数 9 | function resolve(data){ 10 | //判断状态 11 | if(self.PromiseState !== 'pending') return; 12 | //1. 修改对象的状态 (promiseState) 13 | self.PromiseState = 'fulfilled';// resolved 14 | //2. 设置对象结果值 (promiseResult) 15 | self.PromiseResult = data; 16 | } 17 | //reject 函数 18 | function reject(data){ 19 | //判断状态 20 | if(self.PromiseState !== 'pending') return; 21 | //1. 修改对象的状态 (promiseState) 22 | self.PromiseState = 'rejected';// 23 | //2. 设置对象结果值 (promiseResult) 24 | self.PromiseResult = data; 25 | } 26 | try{ 27 | //同步调用『执行器函数』 28 | executor(resolve, reject); 29 | }catch(e){ 30 | //修改 promise 对象状态为『失败』 31 | reject(e); 32 | } 33 | } 34 | 35 | //添加 then 方法 36 | Promise.prototype.then = function(onResolved, onRejected){ 37 | //调用回调函数 PromiseState 38 | if(this.PromiseState === 'fulfilled'){ 39 | onResolved(this.PromiseResult); 40 | } 41 | if(this.PromiseState === 'rejected'){ 42 | onRejected(this.PromiseResult); 43 | } 44 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/7-异步任务then方法执行回调/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 7 - 异步任务 then 方法实现 7 | 8 | 9 | 10 | 27 | 28 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/7-异步任务then方法执行回调/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callback = {}; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | if(self.callback.onResolved){ 20 | self.callback.onResolved(data); 21 | } 22 | } 23 | //reject 函数 24 | function reject(data){ 25 | //判断状态 26 | if(self.PromiseState !== 'pending') return; 27 | //1. 修改对象的状态 (promiseState) 28 | self.PromiseState = 'rejected';// 29 | //2. 设置对象结果值 (promiseResult) 30 | self.PromiseResult = data; 31 | //执行回调 32 | if(self.callback.onResolved){ 33 | self.callback.onResolved(data); 34 | } 35 | } 36 | try{ 37 | //同步调用『执行器函数』 38 | executor(resolve, reject); 39 | }catch(e){ 40 | //修改 promise 对象状态为『失败』 41 | reject(e); 42 | } 43 | } 44 | 45 | //添加 then 方法 46 | Promise.prototype.then = function(onResolved, onRejected){ 47 | //调用回调函数 PromiseState 48 | if(this.PromiseState === 'fulfilled'){ 49 | onResolved(this.PromiseResult); 50 | } 51 | if(this.PromiseState === 'rejected'){ 52 | onRejected(this.PromiseResult); 53 | } 54 | //判断 pending 状态 55 | if(this.PromiseState === 'pending'){ 56 | //保存回调函数 57 | this.callback = { 58 | onResolved: onResolved, 59 | onRejected: onRejected 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/8-指定多个回调/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 8 - 指定多个回调 7 | 8 | 9 | 10 | 35 | 36 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/8-指定多个回调/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callbacks = []; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | self.callbacks.forEach(item => { 20 | item.onResolved(data); 21 | }); 22 | } 23 | //reject 函数 24 | function reject(data){ 25 | //判断状态 26 | if(self.PromiseState !== 'pending') return; 27 | //1. 修改对象的状态 (promiseState) 28 | self.PromiseState = 'rejected';// 29 | //2. 设置对象结果值 (promiseResult) 30 | self.PromiseResult = data; 31 | //执行失败的回调 32 | self.callbacks.forEach(item => { 33 | item.onRejected(data); 34 | }); 35 | } 36 | try{ 37 | //同步调用『执行器函数』 38 | executor(resolve, reject); 39 | }catch(e){ 40 | //修改 promise 对象状态为『失败』 41 | reject(e); 42 | } 43 | } 44 | 45 | //添加 then 方法 46 | Promise.prototype.then = function(onResolved, onRejected){ 47 | //调用回调函数 PromiseState 48 | if(this.PromiseState === 'fulfilled'){ 49 | onResolved(this.PromiseResult); 50 | } 51 | if(this.PromiseState === 'rejected'){ 52 | onRejected(this.PromiseResult); 53 | } 54 | //判断 pending 状态 55 | if(this.PromiseState === 'pending'){ 56 | //保存回调函数 57 | this.callbacks.push({ 58 | onResolved: onResolved, 59 | onRejected: onRejected 60 | }); 61 | } 62 | } -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/9-同步修改状态then方法返回结果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise-封装 | 9 - 同步任务 then 返回结果 7 | 8 | 9 | 10 | 24 | 25 | -------------------------------------------------------------------------------- /tests/4-Promise自定义封装/9-同步修改状态then方法返回结果/promise.js: -------------------------------------------------------------------------------- 1 | //声明构造函数 2 | function Promise(executor){ 3 | //添加属性 4 | this.PromiseState = 'pending'; 5 | this.PromiseResult = null; 6 | //声明属性 7 | this.callbacks = []; 8 | //保存实例对象的 this 的值 9 | const self = this;// self _this that 10 | //resolve 函数 11 | function resolve(data){ 12 | //判断状态 13 | if(self.PromiseState !== 'pending') return; 14 | //1. 修改对象的状态 (promiseState) 15 | self.PromiseState = 'fulfilled';// resolved 16 | //2. 设置对象结果值 (promiseResult) 17 | self.PromiseResult = data; 18 | //调用成功的回调函数 19 | self.callbacks.forEach(item => { 20 | item.onResolved(data); 21 | }); 22 | } 23 | //reject 函数 24 | function reject(data){ 25 | //判断状态 26 | if(self.PromiseState !== 'pending') return; 27 | //1. 修改对象的状态 (promiseState) 28 | self.PromiseState = 'rejected';// 29 | //2. 设置对象结果值 (promiseResult) 30 | self.PromiseResult = data; 31 | //执行失败的回调 32 | self.callbacks.forEach(item => { 33 | item.onRejected(data); 34 | }); 35 | } 36 | try{ 37 | //同步调用『执行器函数』 38 | executor(resolve, reject); 39 | }catch(e){ 40 | //修改 promise 对象状态为『失败』 41 | reject(e); 42 | } 43 | } 44 | 45 | //添加 then 方法 46 | Promise.prototype.then = function(onResolved, onRejected){ 47 | return new Promise((resolve, reject) => { 48 | //调用回调函数 PromiseState 49 | if(this.PromiseState === 'fulfilled'){ 50 | try{ 51 | //获取回调函数的执行结果 52 | let result = onResolved(this.PromiseResult); 53 | //判断 54 | if(result instanceof Promise){ 55 | //如果是 Promise 类型的对象 56 | result.then(v => { 57 | resolve(v); 58 | }, r=>{ 59 | reject(r); 60 | }) 61 | }else{ 62 | //结果的对象状态为『成功』 63 | resolve(result); 64 | } 65 | }catch(e){ 66 | reject(e); 67 | } 68 | } 69 | if(this.PromiseState === 'rejected'){ 70 | onRejected(this.PromiseResult); 71 | } 72 | //判断 pending 状态 73 | if(this.PromiseState === 'pending'){ 74 | //保存回调函数 75 | this.callbacks.push({ 76 | onResolved: onResolved, 77 | onRejected: onRejected 78 | }); 79 | } 80 | }) 81 | } -------------------------------------------------------------------------------- /tests/5-async和await/1-async.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | async函数 7 | 8 | 9 | 27 | 28 | -------------------------------------------------------------------------------- /tests/5-async和await/2-await.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | await 7 | 8 | 9 | 29 | 30 | -------------------------------------------------------------------------------- /tests/5-async和await/3-async与await结合.js: -------------------------------------------------------------------------------- 1 | /** 2 | * resource 1.html 2.html 3.html 文件内容 3 | */ 4 | 5 | const fs = require('fs'); 6 | const util = require('util'); 7 | const mineReadFile = util.promisify(fs.readFile); 8 | 9 | //回调函数的方式 10 | // fs.readFile('./resource/1.html', (err, data1) => { 11 | // if(err) throw err; 12 | // fs.readFile('./resource/2.html', (err, data2) => { 13 | // if(err) throw err; 14 | // fs.readFile('./resource/3.html', (err, data3) => { 15 | // if(err) throw err; 16 | // console.log(data1 + data2 + data3); 17 | // }); 18 | // }); 19 | // }); 20 | 21 | //async 与 await 22 | async function main(){ 23 | try{ 24 | //读取第一个文件的内容 25 | let data1 = await mineReadFile('./resource/1x.html'); 26 | let data2 = await mineReadFile('./resource/2.html'); 27 | let data3 = await mineReadFile('./resource/3.html'); 28 | console.log(data1 + data2 + data3); 29 | }catch(e){ 30 | console.log(e.code); 31 | } 32 | } 33 | 34 | main(); -------------------------------------------------------------------------------- /tests/5-async和await/4-async与await结合.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | async与await结合发送AJAX 7 | 8 | 9 | 10 | 42 | 43 | -------------------------------------------------------------------------------- /tests/5-async和await/resource/1.html: -------------------------------------------------------------------------------- 1 | 观书有感 2 | -朱熹 3 | 半亩方塘一鉴开 4 | 天光云影共徘徊。 5 | -------------------------------------------------------------------------------- /tests/5-async和await/resource/2.html: -------------------------------------------------------------------------------- 1 | 问渠那得清如许？ 2 | 为有源头活水来。 -------------------------------------------------------------------------------- /tests/5-async和await/resource/3.html: -------------------------------------------------------------------------------- 1 | 2 | --------- 3 | 中华古诗词 4 | 5 | -------------------------------------------------------------------------------- /tests/笔记.md: -------------------------------------------------------------------------------- 1 | # 笔记 2 | 3 | ## 异步编程 4 | * fs 文件操作 5 | ```js 6 | require('fs').readFile('./index.html', (err,data)=>{}) 7 | ``` 8 | * 数据库操作 9 | * AJAX 10 | ```js 11 | $.get('/server', (data)=>{}) 12 | ``` 13 | * 定时器 14 | ```js 15 | setTimeout(()=>{}, 2000); 16 | ``` 17 | 18 | ## Promise 的状态 19 | 实例对象中的一个属性 『PromiseState』 20 | * pending 未决定的 21 | * resolved / fullfilled 成功 22 | * rejected 失败 23 | 24 | ## Promise 对象的值 25 | 实例对象中的另一个属性 『PromiseResult』 26 | 保存着异步任务『成功/失败』的结果 27 | * resolve 28 | * reject --------------------------------------------------------------------------------