├── .gitignore ├── 01mine-sweeper ├── README.md ├── demo.css ├── demo.js ├── favicon.ico ├── img │ ├── TNT.png │ ├── redFlag.png │ ├── wiktor.jpg │ └── xiaoguo.png ├── index.html └── reset.css ├── 02vue-todo ├── .babelrc ├── .gitignore ├── README.md ├── build │ ├── webpack.base.js │ ├── webpack.dev.js │ └── webpack.prod.js ├── index.html ├── package.json ├── src │ ├── app.vue │ ├── assets │ │ └── images │ │ │ ├── check.svg │ │ │ ├── city.jpg │ │ │ └── yuan.svg │ ├── components │ │ ├── MainHeader.vue │ │ └── MainTodo │ │ │ ├── MainTodo.vue │ │ │ └── coms │ │ │ ├── TodoInfo.vue │ │ │ └── TodoItem.vue │ ├── main.js │ └── styles │ │ ├── reset.css │ │ └── style.css └── todo.png ├── 03qaz-translate ├── README.md ├── css │ ├── reset.css │ └── style.css ├── erweima.html ├── font │ └── webfont.ttf ├── img │ ├── copy.png │ └── logo.png ├── index.html └── js │ ├── arab.js │ └── style.js ├── 04player ├── README.md ├── css │ ├── index.css │ └── reset.css ├── icon&&img │ ├── 1.jpg │ ├── player.png │ ├── 上一首.png │ ├── 下一首.png │ ├── 分享.png │ ├── 已喜欢.png │ ├── 播放.png │ ├── 收藏.png │ ├── 暂停.png │ ├── 更多.png │ ├── 未喜欢.png │ └── 美图帅哥‘.jpg ├── index.html ├── js │ ├── index.js │ └── utils.js └── music │ └── latte.mp3 ├── 05rate ├── README.md ├── index.html ├── star.png ├── star1.png └── 效果.png ├── 06toolkit ├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ ├── font │ │ │ ├── font.css │ │ │ └── webfont.ttf │ │ └── logo.png │ ├── components │ │ ├── HelloWorld.vue │ │ ├── Nav.vue │ │ └── Spase.vue │ ├── main.js │ ├── router │ │ └── index.js │ ├── util │ │ └── util.js │ └── views │ │ ├── About.vue │ │ ├── Form.vue │ │ └── Home.vue └── vue.config.js ├── 07flex-xie-cheng ├── README.md.md ├── css │ ├── index.css │ └── reset.css ├── img │ ├── grid-nav-items-flight@v7.15.png │ ├── grid-nav-items-hot.png │ ├── grid-nav-items-hotel@v7.15.png │ ├── grid-nav-items-minsu@v7.15.png │ ├── home-common.png │ ├── home-fivemain.15.png │ ├── un_ico_subnav2x@v7.152.png │ └── zg0p1d000001eno3o7583.jpg └── index.html ├── 08websocket-test-tool ├── README.md └── index.html ├── 09create-bas64-img └── index.html ├── 10react-tailwind ├── .zshrc ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src │ ├── App.jsx │ ├── favicon.svg │ ├── index.css │ ├── logo.svg │ ├── main.jsx │ ├── pages │ │ └── Index.jsx │ └── widgets │ │ ├── Header.jsx │ │ ├── Hero.jsx │ │ ├── SectiionHeading.jsx │ │ └── Solutions.jsx ├── tailwind.config.js └── vite.config.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /01mine-sweeper/README.md: -------------------------------------------------------------------------------- 1 | ### 简介 2 | 3 | 🏷基于原生JavaScript的[扫雷游戏](https://elgara.gitee.io/demo/Mine-sweeper/)。 4 | 🔐功能： 5 | - 三种不同等级的模式 6 | - 记录游戏时间 7 | 8 | ![效果图](./img/xiaoguo.png) 9 | 10 | #### 介绍开发思路 11 | 12 | 使用构造函数编写，这样很容以创建实例对象，比如游戏中有三种不同等级的实例。 -------------------------------------------------------------------------------- /01mine-sweeper/demo.css: -------------------------------------------------------------------------------- 1 | #mine { 2 | margin: 50px auto; 3 | 4 | } 5 | 6 | body { 7 | background-image: url(./img/wiktor.jpg); 8 | background-attachment: fixed; 9 | background-repeat: no-repeat; 10 | background-position: center center; 11 | /* 背景铺盖整个视野 */ 12 | background-size: cover; 13 | background-color: #fff; 14 | font-size: 14px 'microsoft yehei '; 15 | font-weight: 300; 16 | } 17 | 18 | .time{ 19 | text-align: center; 20 | font-size: 15px; 21 | font-weight: 700; 22 | color: #fff; 23 | margin-bottom: 10px; 24 | } 25 | 26 | button { 27 | font-family: sans-serif, '黑体'; 28 | letter-spacing: 1px; 29 | text-transform: uppercase; 30 | /*文字大小写 ： 全部大写*/ 31 | text-align: center; 32 | border: 2px solid rgba(0, 0, 200, 0.7); 33 | background: rgba(0, 0, 200, 0.3); 34 | color: white; 35 | /* rgba(0, 0, 200, 0.6); */ 36 | box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4); 37 | /*盒子阴影*/ 38 | border-radius: 10px; 39 | padding: 3px 10px; 40 | display: inline-block; 41 | cursor: pointer; 42 | text-align: center; 43 | outline: none; 44 | } 45 | 46 | .level { 47 | text-align: center; 48 | margin-bottom: 10px; 49 | } 50 | 51 | .active { 52 | background: rgba(0, 0, 200, 0.7); 53 | } 54 | 55 | table { 56 | border-spacing: 1px; 57 | background: #929196; 58 | margin: 0 auto; 59 | } 60 | 61 | td { 62 | width: 20px; 63 | height: 20px; 64 | background: #ccc; 65 | border: 2px solid; 66 | border-color: #fff #a1a1a1 #a1a1a1 #fff; 67 | 68 | text-align: center; 69 | line-height: 20px; 70 | font-weight: bold; 71 | } 72 | 73 | .info { 74 | margin: 5px auto; 75 | text-align: center; 76 | } 77 | 78 | .mine1 { 79 | background: #d9d9d9 url(img/TNT.png) no-repeat center; 80 | background-size: cover; 81 | } 82 | 83 | .flag { 84 | background: #ccc url(img/redFlag.png); 85 | background-size: cover; 86 | } 87 | 88 | .zero { 89 | border-color: #ddd; 90 | background-color: #ddd; 91 | } 92 | 93 | .one { 94 | border-color: #ddd; 95 | background-color: #ddd; 96 | color: #0332fe; 97 | } 98 | 99 | .two { 100 | border-color: #ddd; 101 | background-color: #ddd; 102 | color: #038103; 103 | } 104 | 105 | .tree { 106 | border-color: #ddd; 107 | background-color: #ddd; 108 | color: #ff0000; 109 | } 110 | 111 | .four { 112 | border-color: #ddd; 113 | background-color: #ddd; 114 | } 115 | 116 | .five { 117 | border-color: #ddd; 118 | background-color: #ddd; 119 | } 120 | 121 | .six { 122 | border-color: #ddd; 123 | background-color: #ddd; 124 | } 125 | 126 | .seve { 127 | border-color: #ddd; 128 | background-color: #ddd; 129 | } 130 | 131 | .eight { 132 | border-color: #ddd; 133 | background-color: #ddd; 134 | } -------------------------------------------------------------------------------- /01mine-sweeper/demo.js: -------------------------------------------------------------------------------- 1 | //构造函数 2 | function Mine(tr, td, mineNum) { 3 | this.tr = tr; //行数 4 | this.td = td; //列数 5 | this.mainTntNum = mineNum; //雷的数量 6 | this.squares = []; //存储方块的信息，二维数组 行与列的信息 7 | this.tds = []; //存储don对象 8 | this.surplusMine = mineNum; //剩余雷的数量 9 | this.allRight = false; //右击标注的小红旗是否全是雷，用 10 | 11 | this.parent = document.querySelector('.gameBox'); 12 | this.mineNumDom = document.querySelector('.mineNum'); 13 | } 14 | 15 | //生成n个不重复的数字 16 | Mine.prototype.randomNum = function () { 17 | var square = new Array(this.td * this.tr) //生成一个空数组，长度为总 18 | for (var i = 0; i < square.length; i++) { 19 | square[i] = i; 20 | } 21 | //*************给数组随机排序****************** 22 | square.sort(function () { 23 | return 0.5 - Math.random() 24 | }); 25 | return square.slice(0, this.mainTntNum); 26 | } 27 | 28 | Mine.prototype.init = function () { 29 | // rn是随机生成的数组，雷的位置 30 | var rn = this.randomNum(); 31 | var n = 0; //用来找到索引，二维数组对应的编号 32 | for (var i = 0; i < this.tr; i++) { 33 | this.squares[i] = []; 34 | for (var j = 0; j < this.td; j++) { 35 | if (rn.indexOf(++n) != -1) { //查找数组中有没有n,找到n返回索引，找不到返回-1**************** 36 | //条件成立表示有雷 37 | this.squares[i][j] = { 38 | type: 'mine', 39 | x: j, 40 | y: i 41 | }; 42 | } else { 43 | this.squares[i][j] = { 44 | type: 'number', 45 | x: j, 46 | y: i, 47 | value: 0 48 | }; 49 | } 50 | } 51 | } 52 | //阻止鼠标右击 53 | this.parent.oncontextmenu = function () { 54 | return false 55 | } 56 | this.updateNum(); 57 | this.createDom(); 58 | mine.mineNumDom.innerHTML = this.mainTntNum; 59 | }; 60 | 61 | 62 | //创建表格 63 | Mine.prototype.createDom = function () { 64 | var This = this; 65 | var table = document.createElement('table'); 66 | 67 | for (var i = 0; i < this.tr; i++) { 68 | var domTr = document.createElement('tr'); 69 | this.tds[i] = []; 70 | 71 | for (var j = 0; j < this.td; j++) { 72 | var domTd = document.createElement('td'); 73 | 74 | domTd.pos = [i, j]; //格子对应的行与列存到身上 75 | domTd.onmousedown = function () { 76 | This.play(event, this); 77 | } 78 | this.tds[i][j] = domTd; 79 | 80 | // if (this.squares[i][j].type == 'mine') { 81 | // domTd.className = "mine1"; 82 | // } 83 | // if (this.squares[i][j].type == 'number') { 84 | // domTd.innerHTML = this.squares[i][j].value; 85 | // } 86 | 87 | domTr.appendChild(domTd); 88 | } 89 | 90 | table.appendChild(domTr); 91 | } 92 | this.parent.innerHTML = '' 93 | this.parent.appendChild(table); 94 | } 95 | 96 | 97 | // 找周围的雷 98 | // 传入的参数是对象如{type: "number", x: 9, y: 4, value: 1} 99 | Mine.prototype.getAround = function (square) { 100 | var x = square.x; 101 | var y = square.y; 102 | var result = []; //返回找到的格子的坐标返回出去 103 | /* 104 | x-1,y-1 x,y-1 x+1,y-1 105 | x-1,y x,y x+1，y 106 | x-1,y+1 x,y+1 x+1,y+1 107 | */ 108 | for (var i = x - 1; i <= x + 1; i++) { 109 | for (var j = y - 1; j <= y + 1; j++) { 110 | if ( 111 | i < 0 || //左边格子超出范围 112 | j < 0 || //上边格子超出范围 113 | i > this.td - 1 || //右格子超出范围 114 | j > this.tr - 1 || //下边格子超出范围 115 | (i == x && j == y) || //排除本身 116 | this.squares[j][i].type == 'mine' //排除雷 117 | ) { 118 | continue; 119 | } 120 | result.push([j, i]); 121 | } 122 | } 123 | return result; 124 | } 125 | 126 | //添加方法更新数字 127 | Mine.prototype.updateNum = function () { 128 | 129 | for (var i = 0; i < this.tr; i++) { 130 | for (var j = 0; j < this.td; j++) { 131 | //只更新雷附近的数量 132 | if (this.squares[i][j].type == 'number') { 133 | continue 134 | } else { 135 | // 获取附近的雷 136 | var num = this.getAround(this.squares[i][j]) 137 | 138 | for (var k = 0; k < num.length; k++) { 139 | //***************************************** 140 | this.squares[num[k][0]][num[k][1]].value += 1 141 | } 142 | } 143 | } 144 | } 145 | } 146 | 147 | // 开始游戏(⭐⭐⭐⭐⭐) 148 | Mine.prototype.play = function (ev, obj) { 149 | This = this; 150 | // 获取被点击的td的值格式： {type: "bumber", x: 2, y: 3, valve: 2} 151 | var curSquere = this.squares[obj.pos[0]][obj.pos[1]]; 152 | //判断鼠标右击事件 153 | if (ev.which === 3) { 154 | // 判断右击区域是没有被打开的区域 155 | if (obj.className && obj.className != 'flag') { 156 | return; 157 | } 158 | // 反转状态♥ 159 | obj.className = (obj.className == 'flag' ? '' : 'flag'); 160 | if (curSquere.type === "mine") { 161 | this.allRight = true; 162 | } else { 163 | // 有一个插的旗子不是雷就false 164 | this.allRight = false; 165 | } 166 | // 处理剩余雷数 167 | if (obj.className == 'flag') { 168 | mine.mineNumDom.innerHTML = --this.surplusMine 169 | } else { 170 | mine.mineNumDom.innerHTML = ++this.surplusMine 171 | } 172 | if (mine.surplusMine === 0) { 173 | // 剩余的雷数为零时判断 174 | if (this.allRight) { 175 | // 游戏胜利 176 | alert('恭喜你！！使用' + time + "s赢得了游戏") 177 | } else { 178 | // gameOver 179 | this.gameOver() 180 | } 181 | } 182 | } 183 | // 判断鼠标左击事件 184 | if (ev.which === 1 && obj.className !== "flag") { 185 | var color = ['zero', 'one', 'two', 'tree', 'four', 'five', 'six', 'seven', 'eight']; 186 | //判断点击的是雷还是数字 187 | if (curSquere.type === "number") { 188 | obj.innerHTML = curSquere.value 189 | obj.className = color[curSquere.value]; 190 | //用户第一次点击的是 191 | if (curSquere.value === 0) { 192 | obj.innerHTML = '' 193 | 194 | //1.用递归实现找周围的0⭐⭐⭐⭐⭐ 195 | function getAllZero(square) { 196 | // around获取值为0点的周围格子的坐标：二维数组 197 | var around = This.getAround(square) 198 | for (var c = 0; c < around.length; c++) { 199 | var x = around[c][0]; //周围的x坐标 200 | var y = around[c][1]; 201 | 202 | This.tds[x][y].className = color[This.squares[x][y].value] 203 | 204 | if (This.squares[x][y].value === 0) { 205 | // 判断属性设否被访问到 206 | if (!This.tds[x][y].ckeck) { 207 | // 这属性决定各自是否被找过找过值为true 208 | This.tds[x][y].ckeck = true; 209 | getAllZero(This.squares[x][y]) 210 | } 211 | } else { 212 | // 如果以某个格子为中心找到的四周各自的值不为0， 显示对应的数字 213 | This.tds[x][y].innerHTML = This.squares[x][y].value; 214 | } 215 | } 216 | 217 | } 218 | getAllZero(curSquere) 219 | } 220 | } else { 221 | this.gameOver(obj); 222 | alert('很遗憾游戏结束🔚'); 223 | } 224 | } 225 | 226 | } 227 | 228 | // 游戏失败 229 | Mine.prototype.gameOver = function (obj) { 230 | // 1. 显示所有的雷 231 | for (var i = 0; i < this.tr; i++) { 232 | for (var j = 0; j < this.td; j++) { 233 | if (this.squares[i][j].type == 'mine') { 234 | this.tds[i][j].className = "mine1"; 235 | // obj.className = 236 | } 237 | this.tds[i][j].onmousedown = null; 238 | } 239 | } 240 | // 2. 当前雷的背景变红 241 | obj.style.backgroundColor = "red"; 242 | // 3. 取消所有格子的点击事件 243 | obj.className = "mine1"; 244 | } 245 | 246 | 247 | 248 | 249 | // 上边button的功能 250 | var btns = document.querySelectorAll('.level button'); 251 | var timeNode = document.querySelector('.time') 252 | // 存储实例 253 | var time = 0; 254 | var startTime = setInterval(function () { 255 | time++; 256 | timeNode.innerHTML = "游戏开始" + time + 's'; 257 | }, 1000) 258 | var mine = null; 259 | var ln = 0; // 存放当前选中的状态 260 | var arr = [ 261 | [9, 9, 10], 262 | [16, 16, 40], 263 | [28, 28, 99] 264 | ] 265 | 266 | for (let i = 0; i < btns.length - 1; i++) { 267 | btns[i].onclick = function () { 268 | btns[ln].className = ''; 269 | this.className = 'active'; 270 | mine = new Mine(...arr[i]) 271 | mine.init() 272 | time = 0; 273 | ln = i; 274 | } 275 | } 276 | timeNode.innerHTML = '开始游戏🚀' 277 | btns[0].onclick() 278 | btns[3].onclick = function () { 279 | mine.init(); 280 | time = 0; 281 | } 282 | /* 283 | 1. 创建表格 284 | 2. 随机数生成 285 | 3. 在主函数init里将随机数映射到各个点，赋点的坐标 286 | 4. 处理雷周围的数字 287 | 5. 添加方法更新数字 288 | 6. 添加play 289 | 7. 难点：点击0时出现一大片空白；使用递归 290 | */ -------------------------------------------------------------------------------- /01mine-sweeper/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/01mine-sweeper/favicon.ico -------------------------------------------------------------------------------- /01mine-sweeper/img/TNT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/01mine-sweeper/img/TNT.png -------------------------------------------------------------------------------- /01mine-sweeper/img/redFlag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/01mine-sweeper/img/redFlag.png -------------------------------------------------------------------------------- /01mine-sweeper/img/wiktor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/01mine-sweeper/img/wiktor.jpg -------------------------------------------------------------------------------- /01mine-sweeper/img/xiaoguo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/01mine-sweeper/img/xiaoguo.png -------------------------------------------------------------------------------- /01mine-sweeper/index.html: -------------------------------------------------------------------------------- 1 | 2 | 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 | -------------------------------------------------------------------------------- /01mine-sweeper/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, font, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td { 10 | margin: 0; 11 | padding: 0; 12 | border: 0; 13 | outline: 0; 14 | font-size: 100%; 15 | vertical-align: baseline; 16 | background: transparent; 17 | } 18 | body { 19 | line-height: 1; 20 | } 21 | ol, ul { 22 | list-style: none; 23 | } 24 | blockquote, q { 25 | quotes: none; 26 | } 27 | blockquote:before, blockquote:after, 28 | q:before, q:after { 29 | content: ”; 30 | content: none; 31 | } -------------------------------------------------------------------------------- /02vue-todo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /02vue-todo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /02vue-todo/README.md: -------------------------------------------------------------------------------- 1 | ## 一、Easy Go Todo 2 | 3 | ### 1. 简介 4 | - 这是一篇基于vue + webpack的todo[点我查看](https://elgara.gitee.io/demo/todo/) 5 | - 项目很简单, 很适合入门 6 | - 难度系数:(⭐) 7 | 8 | ### 2. 效果图 9 | ![avatar](todo.png) 10 | 11 | -------------------------------------------------------------------------------- /02vue-todo/build/webpack.base.js: -------------------------------------------------------------------------------- 1 | // 导入path模块 2 | const path = require('path') 3 | 4 | // 引入vue-loadre插件 5 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 6 | 7 | // 引入插件 8 | const HtmlWebpackPlugin = require('html-webpack-plugin') 9 | 10 | module.exports = { 11 | // 打包入口 12 | entry: './src/main.js', 13 | // 打包出口文件 14 | output: { 15 | filename: 'bundle.js', 16 | path: path.resolve(__dirname, '../dist') 17 | }, 18 | // 打包规则 19 | module: { 20 | rules: [{ 21 | test: /\.vue$/, 22 | loader: 'vue-loader' 23 | }, 24 | { 25 | test: /\.(jpg|jpeg|png|svg)$/, 26 | loader: 'url-loader', 27 | options: { 28 | name: '[name].[ext]', 29 | limit: 2048 30 | } 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: ['style-loader', 'css-loader'] 35 | } 36 | 37 | ] 38 | }, 39 | // 插件 40 | plugins: [ 41 | new VueLoaderPlugin(), 42 | new HtmlWebpackPlugin({ 43 | template: './index.html' 44 | }) 45 | ], 46 | resolve: { 47 | alias: { 48 | 'vue': 'vue/dist/vue.js', 49 | '@': path.resolve(__dirname, '../src'), 50 | 'imgs': path.resolve(__dirname, '../src/assets/images') 51 | } 52 | }, 53 | 54 | } -------------------------------------------------------------------------------- /02vue-todo/build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('./webpack.base') 2 | const merge = require('webpack-merge') 3 | 4 | const divConfig = { 5 | 6 | // 打包模式 7 | mode: 'development', 8 | devtool: 'cheap-module-eval-source-map', 9 | // devServer配置 10 | devServer: { 11 | // 指定服务器根目录 12 | contentBase: '../dist', 13 | // 自动打开浏览器 14 | open: true 15 | }, 16 | 17 | } 18 | 19 | module.exports = merge(baseConfig,divConfig) -------------------------------------------------------------------------------- /02vue-todo/build/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('./webpack.base') 2 | const merge = require('webpack-merge') 3 | 4 | 5 | const prodConfig= { 6 | // 打包模式 7 | mode: 'production', 8 | } 9 | module.exports = merge(baseConfig,prodConfig) -------------------------------------------------------------------------------- /02vue-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue-ToDo 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /02vue-todo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-ToDo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --config ./build/webpack.dev.js", 8 | "build": "webpack --config ./build/webpack.prod.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@babel/cli": "^7.8.4", 15 | "@babel/core": "^7.9.6", 16 | "babel-loader": "^8.1.0", 17 | "css-loader": "^3.5.3", 18 | "file-loader": "^6.0.0", 19 | "html-webpack-plugin": "^4.3.0", 20 | "style-loader": "^1.2.1", 21 | "url-loader": "^4.1.0", 22 | "vue-loader": "^15.9.2", 23 | "vue-template-compiler": "^2.6.11", 24 | "webpack": "^4.43.0", 25 | "webpack-cli": "^3.3.11", 26 | "webpack-dev-server": "^3.11.0", 27 | "webpack-merge": "^4.2.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /02vue-todo/src/app.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | 28 | -------------------------------------------------------------------------------- /02vue-todo/src/assets/images/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02vue-todo/src/assets/images/city.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/02vue-todo/src/assets/images/city.jpg -------------------------------------------------------------------------------- /02vue-todo/src/assets/images/yuan.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02vue-todo/src/components/MainHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 26 | 27 | -------------------------------------------------------------------------------- /02vue-todo/src/components/MainTodo/MainTodo.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 88 | 89 | -------------------------------------------------------------------------------- /02vue-todo/src/components/MainTodo/coms/TodoInfo.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 54 | 55 | -------------------------------------------------------------------------------- /02vue-todo/src/components/MainTodo/coms/TodoItem.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | 25 | -------------------------------------------------------------------------------- /02vue-todo/src/main.js: -------------------------------------------------------------------------------- 1 | // 创建VUE根实例 2 | import Vue from 'vue' 3 | 4 | // 导入app组件 5 | import App from './app.vue' 6 | 7 | // 创建VUE根实例 8 | new Vue({ 9 | el: '#app', 10 | components:{ 11 | App 12 | }, 13 | template: '' 14 | }) 15 | 16 | // 挂在app组件 17 | -------------------------------------------------------------------------------- /02vue-todo/src/styles/reset.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | background-color: #ccc; 5 | } -------------------------------------------------------------------------------- /02vue-todo/src/styles/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-image: url(../assets/images/city.jpg); 3 | /* 背景图片固定位置 */ 4 | background-attachment: fixed; 5 | background-repeat: no-repeat; 6 | background-position: center center; 7 | /* 背景铺盖整个视野 */ 8 | background-size: cover; 9 | background-color: #fff; 10 | font-size: 14px 'microsoft yehei '; 11 | font-weight: 300; 12 | } -------------------------------------------------------------------------------- /02vue-todo/todo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/02vue-todo/todo.png -------------------------------------------------------------------------------- /03qaz-translate/README.md: -------------------------------------------------------------------------------- 1 | ### 文字转换工具 2 | 3 | ## 简介 4 | 5 | 这是一款哈萨克文字转换工具，有三种哈萨克文字可以相互转换，目前支持转换以下文字： 6 | 7 | 1、✅ 西里尔文 🔃 旧体文 8 | 9 | 2、✅ 西里尔文 🔃 拉丁文 10 | 11 | 3、❌ 旧体文 🔃 西里尔文 12 | 13 | 4、❌ 旧体文 🔃 拉丁文 14 | 15 | 5、❌ 拉丁文 🔃 西里尔文 16 | 17 | 6、❌ 拉丁文 🔃 旧体 18 | 19 | 其他功能正在完善中，进行期待。 -------------------------------------------------------------------------------- /03qaz-translate/css/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, font, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td { 10 | margin: 0; 11 | padding: 0; 12 | border: 0; 13 | outline: 0; 14 | font-size: 100%; 15 | vertical-align: baseline; 16 | background: transparent; 17 | } 18 | body { 19 | line-height: 1; 20 | } 21 | ol, ul { 22 | list-style: none; 23 | } 24 | blockquote, q { 25 | quotes: none; 26 | } 27 | blockquote:before, blockquote:after, 28 | q:before, q:after { 29 | content: ”; 30 | content: none; 31 | } 32 | a{ 33 | color: inherit; 34 | text-decoration: none !important; 35 | 36 | } 37 | a:hover{ 38 | color: inherit; 39 | } 40 | -------------------------------------------------------------------------------- /03qaz-translate/css/style.css: -------------------------------------------------------------------------------- 1 | @font-face 2 | { 3 | font-family: kaz; 4 | src: url('../font/webfont.ttf') 5 | } 6 | 7 | /******************** 8 | head 9 | ********************/ 10 | @media screen and (max-width: 895px) { 11 | .trans-box { 12 | display: block; 13 | width: 100%; 14 | border: 0 !important; 15 | padding: 15px !important; 16 | } 17 | .trans-box>textarea{ 18 | border: 0 !important;; 19 | } 20 | .clear-buttom{ 21 | right: 35px !important; 22 | } 23 | .menu{ 24 | padding-right: 14px; 25 | } 26 | .trans-box2 { 27 | display: block; 28 | border-radius: 0 !important; 29 | width: 100%; 30 | padding: 15px !important; 31 | } 32 | } 33 | 34 | body{ 35 | background-color: #f9f9f9; 36 | } 37 | 38 | .navbar .logo { 39 | height: 100%; 40 | } 41 | 42 | h1 { 43 | display: block; 44 | float: left; 45 | } 46 | 47 | .menu { 48 | position: relative; 49 | float: right; 50 | text-align: right; 51 | line-height: 3; 52 | font-size: 16px; 53 | cursor: pointer; 54 | } 55 | 56 | .down-menu { 57 | line-height: normal; 58 | text-align: left; 59 | position: absolute; 60 | top: 40px; 61 | right: 0; 62 | background-color: #fff; 63 | width: 92px; 64 | border: 1px solid; 65 | display: none; 66 | z-index: 9; 67 | } 68 | 69 | .down-menu li { 70 | height: 25px; 71 | line-height: 25px; 72 | padding: 0 5px 0 5px; 73 | } 74 | 75 | .down-menu li:hover { 76 | background-color: rgb(51, 136, 255); 77 | color: #fff; 78 | } 79 | 80 | .menu:hover .down-menu { 81 | display: block; 82 | background-color: #fff; 83 | } 84 | 85 | .top-arrow { 86 | position: absolute; 87 | right: 0; 88 | top: -12px; 89 | } 90 | 91 | 92 | 93 | 94 | /******************** 95 | article 96 | ********************/ 97 | 98 | 99 | .tran-head { 100 | height: 40px; 101 | } 102 | .box{ 103 | background-color: #f9f9f9; 104 | } 105 | 106 | article .trans-box { 107 | float: left; 108 | position: relative; 109 | display: block; 110 | padding-top: 15px; 111 | border-radius: 20px 0 0 20px; 112 | padding-right: 0; 113 | } 114 | .clear-buttom{ 115 | position: absolute; 116 | right: 15px; 117 | top: 30px; 118 | font-weight: bold; 119 | } 120 | .clear-buttom:hover{ 121 | cursor: pointer; 122 | } 123 | 124 | .trans-box textarea { 125 | padding-right: 30px; 126 | border: 1px solid #ddd; 127 | box-sizing: border-box; 128 | } 129 | .trans-box textarea:focus{ 130 | border: 1px solid #0094ff; 131 | } 132 | .btn-default{ 133 | font-family: kaz; 134 | } 135 | /* .trans-box2 textarea { 136 | padding-left: 0; 137 | } */ 138 | 139 | textarea { 140 | width: 100%; 141 | vertical-align: middle; 142 | resize: none; 143 | outline: none; 144 | word-wrap: break-word; 145 | overflow-x: hidden; 146 | overflow-y: auto; 147 | font-size: 18mm; 148 | box-sizing: border-box; 149 | padding: 20px; 150 | border: none; 151 | font-family: kaz; 152 | } 153 | 154 | article .trans-box2 { 155 | float: left; 156 | height: 100%; 157 | overflow-y: hidden; 158 | position: relative; 159 | display: block; 160 | padding: 15px 15px 0 0; 161 | border-radius: 0 20px 20px 0; 162 | } 163 | 164 | .align-right{ 165 | text-align: right; 166 | } 167 | 168 | .footNav{ 169 | height: 40px; 170 | background-color: #fff; 171 | line-height: 40px; 172 | text-align: right; 173 | padding-right: 20px; 174 | } 175 | .footNav2{ 176 | height: 42px; 177 | } 178 | .footNav>span{ 179 | cursor: pointer; 180 | } 181 | .footNav .copy{ 182 | height: 32px; 183 | width: 32px; 184 | display: inline-block; 185 | background: url(../img/copy.png) no-repeat; 186 | transform: scale(.6,.6); 187 | } 188 | 189 | /******************** 190 | footer 191 | ********************/ 192 | 193 | footer { 194 | padding: 10px 0; 195 | float: right; 196 | bottom: 0; 197 | 198 | } 199 | 200 | footer a { 201 | text-align: right; 202 | font-size: 11px; 203 | color: #80868b; 204 | font-style: italic; 205 | } 206 | 207 | footer a:hover { 208 | text-decoration: underline !important; 209 | color: #80868b; 210 | } -------------------------------------------------------------------------------- /03qaz-translate/erweima.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | {{img}} 12 |
13 | 14 | 22 | 23 | -------------------------------------------------------------------------------- /03qaz-translate/font/webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/03qaz-translate/font/webfont.ttf -------------------------------------------------------------------------------- /03qaz-translate/img/copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/03qaz-translate/img/copy.png -------------------------------------------------------------------------------- /03qaz-translate/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/03qaz-translate/img/logo.png -------------------------------------------------------------------------------- /03qaz-translate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HARAHOZI-字符转换工具 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 |
25 | 48 |
49 | 52 |
53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 |
61 |
62 | 63 |
64 | X 65 | 66 |
{{inputVlue.length}}/5000 ⌨
67 |
68 |
69 |
70 | 72 |
73 |
74 |
75 |
76 | 79 |
80 | 83 | 84 | 85 | 128 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /03qaz-translate/js/arab.js: -------------------------------------------------------------------------------- 1 | var syMap = { 2 | ا: ["а", "a"], 3 | ءا: ["ә", "á"], 4 | ب: ["б", "b"], 5 | ۆ: ["в", "v"], 6 | گ: ["г", "g"], 7 | ع: ["ғ", "ǵ"], 8 | د: ["д", "d"], 9 | ە: ["е", "e"], 10 | ج: ["ж", "j"], 11 | ز: ["з", "z"], 12 | ي: ["и", "i"], 13 | ي: ["й", "i"], 14 | ك: ["к", "k"], 15 | ق: ["қ", "q"], 16 | ل: ["л", "l"], 17 | م: ["м", "m"], 18 | ن: ["н", "n"], 19 | ڭ: ["ң", "ń"], 20 | و: ["о", "o"], 21 | ءو: ["ө", "ó"], 22 | پ: ["п", "p"], 23 | ر: ["р", "r"], 24 | س: ["с", "s"], 25 | ت: ["т", "t"], 26 | ۋ: ["у", "ý"], 27 | ۇ: ["ұ", "u"], 28 | ءۇ: ["ү", "ú"], 29 | ف: ["ф", "f"], 30 | ح: ["х", "h"], 31 | ھ: ["һ", "h"], 32 | چ: ["ц", "ch"], 33 | ش: ["ш", "sh"], 34 | شش: ["щ", "shsh"], 35 | // ъ: ["", ""], 36 | ы: ["ى", "y"], 37 | ءى: ["і", "ı"], 38 | // ь: ["", ""], 39 | يە: ["э", "ie"], 40 | يۋ: ["ю", "iý"], 41 | يا: ["я", "ia"], 42 | يو: ["ё", "io"], 43 | تس: ["ч", "ts"], 44 | } 45 | 46 | var str = "ەلعار " 47 | 48 | function arabTrans(srt, isSy) { 49 | var num = 0; 50 | isSy == true ? '' : num = 1; 51 | var newStr = '' 52 | for (var i = 0; i < str.length;) { 53 | if (syMap[str[i]] == undefined) { 54 | newStr += str[i]; 55 | i++; 56 | continue; 57 | } 58 | // console.log(str.substring(i, 1)) 59 | if (str[i + 1] && syMap[str.substring(i, 2)] && syMap[str.substring(i, 2)][num]) { //i + 1 < str.length && 60 | newStr += syMap[str.substring(i, i + 2)][num] 61 | i += 2; 62 | } else { 63 | newStr += syMap[str[i]][num] 64 | i += 1; 65 | // console.log(str.substring(i, 1), i) 66 | } 67 | } 68 | return newStr; 69 | } 70 | 71 | console.log(arabTrans(str, 1)) -------------------------------------------------------------------------------- /03qaz-translate/js/style.js: -------------------------------------------------------------------------------- 1 | var syMap = { 2 | а: ["ا", "a"], 3 | ә: ["ءا", "á"], 4 | б: ["ب", "b"], 5 | в: ["ۆ", "v"], 6 | г: ["گ", "g"], 7 | ғ: ["ع", "ǵ"], 8 | д: ["د", "d"], 9 | е: ["ە", "e"], 10 | ж: ["ج", "j"], 11 | з: ["ز", "z"], 12 | и: ["ي", "i"], 13 | й: ["ي", "i"], 14 | к: ["ك", "k"], 15 | қ: ["ق", "q"], 16 | л: ["ل", "l"], 17 | м: ["م", "m"], 18 | н: ["ن", "n"], 19 | ң: ["ڭ", "ń"], 20 | о: ["و", "o"], 21 | ө: ["ءو", "ó"], 22 | п: ["پ", "p"], 23 | р: ["ر", "r"], 24 | с: ["س", "s"], 25 | т: ["ت", "t"], 26 | у: ["ۋ", "ý"], 27 | ұ: ["ۇ", "u"], 28 | ү: ["ءۇ", "ú"], 29 | ф: ["ف", "f"], 30 | х: ["ح", "h"], 31 | һ: ["ھ", "h"], 32 | ц: ["چ", "ch"], 33 | ш: ["ش", "sh"], 34 | щ: ["شش", "shsh"], 35 | ъ: ["", ""], 36 | ы: ["ى", "y"], 37 | і: ["ءى", "ı"], 38 | ь: ["", ""], 39 | э: ["يە", "ie"], 40 | ю: ["يۋ", "iý"], 41 | я: ["يا", "ia"], 42 | ё: ["يو", "io"], 43 | ч: ["تس", "ts"], 44 | } 45 | 46 | var syStr = "күйдім" 47 | 48 | console.log(wordTran(syStr, 0)) 49 | 50 | 51 | 52 | function wordTran(str) { 53 | var newStr = ''; 54 | 55 | for (var i = 0; i < str.length; i++) { 56 | if (syMap[str[i]] == undefined) { 57 | newStr += str[i]; 58 | continue; 59 | } 60 | if (i === 0) { 61 | newStr += syMap[str[i]][0] 62 | } else { 63 | if (str[i] == 'ү') { 64 | newStr += 'ۇ'; 65 | } else if (str[i] == 'і') { 66 | newStr += 'ى'; 67 | } else if (str[i] == 'ө') { 68 | newStr += 'و'; 69 | } else { 70 | newStr += syMap[str[i]][0] 71 | } 72 | } 73 | 74 | } 75 | return newStr 76 | } 77 | 78 | // 参数1： 转换的字符串 79 | // 参数2： 如果为 true 为转化成 拉丁 否则转化成 阿拉伯 80 | 81 | function syTranQaz(str, isLaten) { 82 | var isLa = 0; 83 | if (isLaten) { 84 | isLa = 1; 85 | } 86 | var qazStr = "" 87 | var len = str.length; 88 | for (var i = 0; i < len; i++) { 89 | if (syMap[str[i]] == undefined) { 90 | qazStr += str[i] 91 | continue; 92 | } 93 | qazStr += syMap[str[i]][isLa]; 94 | } 95 | return qazStr; 96 | } 97 | 98 | // var qaz = syTranQaz(syStr,1) 99 | // console.log(qaz) 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | //西里尔文 unicod 114 | 115 | // var xiUNArr = new Array("\u0430","\u04d9","\u0431", 116 | // "\u0432","\u0433","\u0493", 117 | // "\u043b","\u043c","\u043d", 118 | // "\u04a3","\u043e","\u04e9", 119 | // "\u043f "\u0434","\u0435","\u0451", 120 | // "\u0436","\u044d","\u0438", 121 | // "\u0439","\u043a","\u049b", 122 | // ","\u0440","\u0441", 123 | // "\u0442","\u0443","\u04b1", 124 | // "\u04af","\u0444","\u0445", 125 | // "\u04bb","\u0446","\u0447", 126 | // "\u0448","\u0449","\u044c", 127 | // "\u044b","\u0456","\u044c", 128 | // "\u044d","\u044e","\u044f" 129 | // ) 130 | 131 | 132 | var arapArr = new Array("ا", "ٴا", "", "", 133 | "", "", "", "", 134 | "", "", "", "", 135 | "", "", "", "", 136 | "", "", "", "", 137 | "", "", "", "", 138 | "", "", "", "", 139 | "", "", "", "", 140 | ) 141 | 142 | 143 | var xiArr = new Array("а", "ә", "б", "в", 144 | "г", "ғ", "д", "е", 145 | " ", "ж", "э", "и", 146 | "й", "к", "қ", "л", 147 | "м", "н", "ң", "о", 148 | "ө", "п", "р", "с", 149 | "т", "у", "ұ", "ү", 150 | "ф", "х", "һ", "ц", 151 | "ч", "ш", "щ", "ь", 152 | "ы", "і", "ь", "э", 153 | "ю", "я" 154 | ) -------------------------------------------------------------------------------- /04player/README.md: -------------------------------------------------------------------------------- 1 | ### player 2 | 3 | 1、简介： 4 | 5 | 一款基于原生 JavaScript 的移动端音乐播放器 6 | 7 | ![页面](./icon&&img/player.png) 8 | 9 | 2、功能： 10 | 11 | - ✅播放/暂停 12 | - ✅显示自定义播放/总时间 13 | - ✅显示自定义进度条 14 | - ✅点赞 15 | 16 | -------------------------------------------------------------------------------- /04player/css/index.css: -------------------------------------------------------------------------------- 1 | #wrapper { 2 | max-width: 350px; 3 | width: 100%; 4 | 5 | margin: 0 auto; 6 | 7 | } 8 | 9 | .b-g-img-box { 10 | width: 100%; 11 | height: 270px; 12 | background-image: url(../icon&&img/美图帅哥‘.jpg); 13 | background-size: cover; 14 | background-repeat: no-repeat; 15 | /* filter: blur(0px); */ 16 | } 17 | 18 | .fuzzy { 19 | width: 100%; 20 | height: 100%; 21 | } 22 | 23 | 24 | #palyer-box { 25 | /* width: 100%; 26 | height: 400px; */ 27 | background-color: #fff; 28 | border-radius: 50px 50px 0 0; 29 | margin-top: -55px; 30 | } 31 | 32 | .main-img { 33 | width: 135px; 34 | height: 180px; 35 | margin: 0 auto; 36 | margin-top: -50px; 37 | } 38 | 39 | .main-img img { 40 | width: 135px; 41 | height: 180px; 42 | margin-top: -50px; 43 | border-radius: 12px; 44 | } 45 | 46 | .sing-name-warapper { 47 | padding: 0 20px; 48 | } 49 | 50 | .sing-name-warapper .sing-name { 51 | font-size: 20px; 52 | font-weight: bold; 53 | } 54 | .sing-name-warapper .collection { 55 | float: right; 56 | display: block; 57 | width: 20px; 58 | height: 20px; 59 | background: url(../icon&&img/未喜欢.png); 60 | background-size: 100%; 61 | background-repeat: no-repeat; 62 | } 63 | .sing-name-warapper .liked{ 64 | float: right; 65 | display: block; 66 | width: 20px; 67 | height: 20px; 68 | background: url(../icon&&img/已喜欢.png); 69 | background-size: 100%; 70 | background-repeat: no-repeat; 71 | } 72 | .sing-name-warapper .unlike{ 73 | float: right; 74 | display: block; 75 | width: 20px; 76 | height: 20px; 77 | background: url(../icon&&img/未喜欢.png); 78 | background-size: 100%; 79 | background-repeat: no-repeat; 80 | } 81 | .sing-name-warapper .more{ 82 | float: right; 83 | display: block; 84 | width: 20px; 85 | height: 20px; 86 | margin-left: 2px; 87 | background: url(../icon&&img/更多.png); 88 | background-size: 100%; 89 | background-repeat: no-repeat; 90 | } 91 | 92 | 93 | .sing-name-warapper .auther { 94 | margin-top: 5px; 95 | font-size: 13px; 96 | color: #ff4e4b; 97 | } 98 | 99 | 100 | 101 | /* 进度条 */ 102 | #sing-time-box{ 103 | width: 100%; 104 | height: 50px; 105 | padding: 10px 0; 106 | } 107 | #sing-time-box #jindutiao{ 108 | height: 4px; 109 | background-color: #ccc; 110 | } 111 | #sing-time-box #jindutiao1{ 112 | float: left; 113 | width: 1%; 114 | height: 4px; 115 | background-color: #ff4e4b; 116 | } 117 | 118 | #sing-time-box .time-box{ 119 | display: flex; 120 | justify-content: space-between; 121 | padding: 5px 10px; 122 | } 123 | 124 | 125 | 126 | 127 | 128 | /* 播放列表 */ 129 | 130 | #play div{ 131 | width: 20px; 132 | height: 20px; 133 | } 134 | #play .add{ 135 | background: url(../icon&&img/收藏.png) no-repeat; 136 | background-size: 100%; 137 | } 138 | #play .left{ 139 | background: url(../icon&&img/上一首.png); 140 | background-size: 100%; 141 | } 142 | #play .left{ 143 | background: url(../icon&&img/上一首.png); 144 | background-size: 100%; 145 | } 146 | #play .play-mu{ 147 | width: 50px; 148 | height: 50px; 149 | background: url(../icon&&img/播放.png) no-repeat; 150 | background-size: 100%; 151 | } 152 | #play .stop-mu{ 153 | width: 50px; 154 | height: 50px; 155 | background: url(../icon&&img/暂停.png) no-repeat; 156 | background-size: 100%; 157 | } 158 | #play .right{ 159 | background: url(../icon&&img/下一首.png); 160 | background-size: 100%; 161 | } 162 | #play .share{ 163 | background: url(../icon&&img/分享.png); 164 | background-size: 100%; 165 | } -------------------------------------------------------------------------------- /04player/css/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, font, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td { 10 | margin: 0; 11 | padding: 0; 12 | border: 0; 13 | outline: 0; 14 | font-size: 100%; 15 | vertical-align: baseline; 16 | background: transparent; 17 | } 18 | body { 19 | line-height: 1; 20 | } 21 | ol, ul { 22 | list-style: none; 23 | } 24 | blockquote, q { 25 | quotes: none; 26 | } 27 | blockquote:before, blockquote:after, 28 | q:before, q:after { 29 | content: ''; 30 | content: none; 31 | } 32 | -------------------------------------------------------------------------------- /04player/icon&&img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/1.jpg -------------------------------------------------------------------------------- /04player/icon&&img/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/player.png -------------------------------------------------------------------------------- /04player/icon&&img/上一首.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/上一首.png -------------------------------------------------------------------------------- /04player/icon&&img/下一首.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/下一首.png -------------------------------------------------------------------------------- /04player/icon&&img/分享.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/分享.png -------------------------------------------------------------------------------- /04player/icon&&img/已喜欢.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/已喜欢.png -------------------------------------------------------------------------------- /04player/icon&&img/播放.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/播放.png -------------------------------------------------------------------------------- /04player/icon&&img/收藏.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/收藏.png -------------------------------------------------------------------------------- /04player/icon&&img/暂停.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/暂停.png -------------------------------------------------------------------------------- /04player/icon&&img/更多.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/更多.png -------------------------------------------------------------------------------- /04player/icon&&img/未喜欢.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/未喜欢.png -------------------------------------------------------------------------------- /04player/icon&&img/美图帅哥‘.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/icon&&img/美图帅哥‘.jpg -------------------------------------------------------------------------------- /04player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HoziFM 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 |
18 |
19 |
20 | 23 |
24 | 25 |
26 |
27 | Another Ghost 28 | 29 | 30 |
Elgar
31 |
32 | 33 | 34 |
35 |
36 |
37 |
38 |
39 |
40 | 00:00 41 | 00:00 42 |
43 | 44 |
45 | 46 |
47 |
48 |
49 |
50 |
51 | 52 |
53 |
54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /04player/js/index.js: -------------------------------------------------------------------------------- 1 | // 赞 2 | var heart = document.getElementsByClassName("collection") 3 | 4 | var audio = document.getElementById("audio") 5 | var playBTN = document.getElementById("play-mu") 6 | var flag = false; // 保存播放状态 7 | var like = true; 8 | 9 | // 进度条处理 10 | var jindutiao1 = document.getElementById("jindutiao1") 11 | var jindutiao = document.getElementById("jindutiao") 12 | var startTime = document.getElementsByClassName("start-time")[0] 13 | var endTime = document.getElementsByClassName("end-time")[0] 14 | 15 | 16 | // 控制进度条和时间 17 | function jindu() { 18 | //用秒数来显示当前播放进度 19 | var timeDisplay = Math.floor(audio.currentTime); //获取实时时间 20 | // 总长的处理 21 | var totalTime = Math.floor(audio.duration) 22 | var totalMinute = totalTime / 60; 23 | var totalMinutes = parseInt(totalMinute) 24 | if(totalMinutes < 10){ 25 | totalMinutes = "0" + totalMinutes 26 | } 27 | // 秒 28 | var tSecond = totalTime % 60; 29 | var tSeconds = Math.round(tSecond); 30 | if (tSeconds < 10) { 31 | tSeconds = "0" + tSeconds; 32 | } 33 | 34 | 35 | //处理开始时间 36 | //分钟 37 | let minute = timeDisplay / 60; 38 | let minutes = parseInt(minute); 39 | if (minutes < 10) { 40 | minutes = "0" + minutes; 41 | } 42 | //秒 43 | let second = timeDisplay % 60; 44 | let seconds = Math.round(second); 45 | if (seconds < 10) { 46 | seconds = "0" + seconds; 47 | } 48 | 49 | // 进度条 50 | // 更新开始时间 51 | startTime.innerHTML = `${minutes}:${seconds}` 52 | endTime.innerHTML = `${totalMinutes}:${tSecond}` 53 | jindutiao1.style.width = `${ parseInt(jindutiao.offsetWidth * (timeDisplay/totalTime)).toFixed(1)}px` 54 | 55 | 56 | } 57 | //监听音频播放的实时时间事件 58 | audio.addEventListener("timeupdate", throttle(jindu, 1000)); 59 | 60 | function start() { 61 | if (flag) { 62 | playBTN.className = "play-mu" 63 | audio.pause() 64 | flag = false 65 | } else { 66 | playBTN.className = "stop-mu" 67 | audio.play() 68 | flag = true 69 | } 70 | } 71 | 72 | playBTN.onclick = function () { 73 | start() 74 | } 75 | 76 | heart[0].onclick = function () { 77 | if (like) { 78 | heart[0].className += " liked" 79 | like = false 80 | console.log(heart[0].className) 81 | } else { 82 | heart[0].className = "collection" 83 | like = true 84 | } 85 | } 86 | 87 | 88 | 89 | 90 | 91 | // 节流函数 92 | function throttle(func, delay) { 93 | var prev = Date.now(); 94 | return function () { 95 | var context = this; 96 | var args = arguments; 97 | var now = Date.now(); 98 | if (now - prev >= delay) { 99 | func.apply(context, args); 100 | prev = Date.now(); 101 | } 102 | } 103 | } -------------------------------------------------------------------------------- /04player/js/utils.js: -------------------------------------------------------------------------------- 1 | 2 | // 节流函数 3 | var throttle = function (func, delay) { 4 | var prev = Date.now(); 5 | return function () { 6 | var context = this; 7 | var args = arguments; 8 | var now = Date.now(); 9 | if (now - prev >= delay) { 10 | func.apply(context, args); 11 | prev = Date.now(); 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /04player/music/latte.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/04player/music/latte.mp3 -------------------------------------------------------------------------------- /05rate/README.md: -------------------------------------------------------------------------------- 1 | ### 交互式评论 2 | 3 | 1、简介： 4 | 5 | 原生 JavaScript 实现交互式评论，根据星星的数量手势也会跟着改变。 6 | 7 | ![页面](./效果.png) 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /05rate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 68 | 69 | 70 | 71 |
72 |
73 | 74 |
75 |

Tell us how was your Experience?

76 |
77 | 78 | 79 | 80 | 81 | 82 |
83 |

Good

84 |
85 | 86 | 87 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /05rate/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/05rate/star.png -------------------------------------------------------------------------------- /05rate/star1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/05rate/star1.png -------------------------------------------------------------------------------- /05rate/效果.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/05rate/效果.png -------------------------------------------------------------------------------- /06toolkit/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /06toolkit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /06toolkit/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /06toolkit/README.md: -------------------------------------------------------------------------------- 1 | ## 简介 2 | 3 | 这是一个工具箱，会写一些工具。目前有这些功能： 4 | 5 | - 哈萨克西里尔文字转拉丁文字 6 | - 哈萨克西里尔文字转阿拉伯文字 7 | - 哈萨克语 西里尔，阿拉伯，拉丁字母表 8 | -------------------------------------------------------------------------------- /06toolkit/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /06toolkit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hat-trans", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "element-ui": "^2.14.0", 13 | "vue": "^2.6.11", 14 | "vue-router": "^3.2.0" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "~4.5.0", 18 | "@vue/cli-plugin-eslint": "~4.5.0", 19 | "@vue/cli-plugin-router": "~4.5.0", 20 | "@vue/cli-service": "~4.5.0", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^6.7.2", 23 | "eslint-plugin-vue": "^6.2.2", 24 | "less": "^3.0.4", 25 | "less-loader": "^5.0.0", 26 | "vue-template-compiler": "^2.6.11" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /06toolkit/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/06toolkit/public/favicon.ico -------------------------------------------------------------------------------- /06toolkit/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /06toolkit/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | 24 | 43 | -------------------------------------------------------------------------------- /06toolkit/src/assets/font/font.css: -------------------------------------------------------------------------------- 1 | @font-face{ 2 | font-family: qaz; 3 | src: url(webfont.ttf); 4 | font-weight: normal; 5 | font-style: normal; 6 | } -------------------------------------------------------------------------------- /06toolkit/src/assets/font/webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/06toolkit/src/assets/font/webfont.ttf -------------------------------------------------------------------------------- /06toolkit/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/06toolkit/src/assets/logo.png -------------------------------------------------------------------------------- /06toolkit/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 17 | 20 | -------------------------------------------------------------------------------- /06toolkit/src/components/Nav.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 24 | 25 | -------------------------------------------------------------------------------- /06toolkit/src/components/Spase.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /06toolkit/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import ElementUI from 'element-ui'; 5 | import 'element-ui/lib/theme-chalk/index.css'; 6 | import './assets/font/font.css' 7 | Vue.use(ElementUI); 8 | 9 | Vue.config.productionTip = false 10 | 11 | new Vue({ 12 | router, 13 | render: h => h(App) 14 | }).$mount('#app') 15 | -------------------------------------------------------------------------------- /06toolkit/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import Home from '../views/Home.vue' 4 | 5 | Vue.use(VueRouter) 6 | 7 | const routes = [{ 8 | path: '/', 9 | name: 'Home', 10 | component: Home 11 | }, 12 | { 13 | path: '/form', 14 | name: 'Form', 15 | component: () => import('../views/Form.vue') 16 | }, 17 | { 18 | path: '/about', 19 | name: 'About', 20 | component: () => import('../views/About.vue') 21 | } 22 | ] 23 | 24 | const router = new VueRouter({ 25 | routes 26 | }) 27 | 28 | export default router -------------------------------------------------------------------------------- /06toolkit/src/util/util.js: -------------------------------------------------------------------------------- 1 | var syMap = { 2 | а: ["ا", "a"], 3 | ә: ["ءا", "á"], 4 | б: ["ب", "b"], 5 | в: ["ۆ", "v"], 6 | г: ["گ", "g"], 7 | ғ: ["ع", "ǵ"], 8 | д: ["د", "d"], 9 | е: ["ە", "e"], 10 | ж: ["ج", "j"], 11 | з: ["ز", "z"], 12 | и: ["ي", "i"], 13 | й: ["ي", "i"], 14 | к: ["ك", "k"], 15 | қ: ["ق", "q"], 16 | л: ["ل", "l"], 17 | м: ["م", "m"], 18 | н: ["ن", "n"], 19 | ң: ["ڭ", "ń"], 20 | о: ["و", "o"], 21 | ө: ["ءو", "ó"], 22 | п: ["پ", "p"], 23 | р: ["ر", "r"], 24 | с: ["س", "s"], 25 | т: ["ت", "t"], 26 | у: ["ۋ", "ý"], 27 | ұ: ["ۇ", "u"], 28 | ү: ["ءۇ", "ú"], 29 | ф: ["ف", "f"], 30 | х: ["ح", "h"], 31 | һ: ["ھ", "h"], 32 | ц: ["چ", "ch"], 33 | ш: ["ش", "sh"], 34 | щ: ["شش", "shsh"], 35 | ъ: ["", ""], 36 | ы: ["ى", "y"], 37 | і: ["ءى", "ı"], 38 | ь: ["", ""], 39 | э: ["يە", "ie"], 40 | ю: ["يۋ", "iý"], 41 | я: ["يا", "ia"], 42 | ё: ["يو", "io"], 43 | ч: ["تس", "ts"], 44 | } 45 | 46 | // var syStr = "күйдім" 47 | 48 | // console.log(wordTran(syStr, 0)) 49 | 50 | 51 | 52 | function wordTran(str) { 53 | var newStr = ''; 54 | 55 | for (var i = 0; i < str.length; i++) { 56 | if (syMap[str[i]] == undefined) { 57 | newStr += str[i]; 58 | continue; 59 | } 60 | if (i === 0) { 61 | newStr += syMap[str[i]][0] 62 | } else { 63 | if (str[i] == 'ү') { 64 | newStr += 'ۇ'; 65 | } else if (str[i] == 'і') { 66 | newStr += 'ى'; 67 | } else if (str[i] == 'ө') { 68 | newStr += 'و'; 69 | } else { 70 | newStr += syMap[str[i]][0] 71 | } 72 | } 73 | 74 | } 75 | return newStr 76 | } 77 | 78 | // 参数1： 转换的字符串 79 | // 参数2： 如果为 true 为转化成 拉丁 否则转化成 阿拉伯 80 | 81 | function syTranQaz(str, isLaten) { 82 | var isLa = 0; 83 | if (isLaten) { 84 | isLa = 1; 85 | } 86 | var qazStr = "" 87 | var len = str.length; 88 | for (var i = 0; i < len; i++) { 89 | if (syMap[str[i]] == undefined) { 90 | qazStr += str[i] 91 | continue; 92 | } 93 | qazStr += syMap[str[i]][isLa]; 94 | } 95 | return qazStr; 96 | } 97 | 98 | export{ 99 | wordTran, 100 | syTranQaz 101 | } -------------------------------------------------------------------------------- /06toolkit/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 45 | 59 | -------------------------------------------------------------------------------- /06toolkit/src/views/Form.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 282 | 283 | -------------------------------------------------------------------------------- /06toolkit/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 119 | 120 | 189 | -------------------------------------------------------------------------------- /06toolkit/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // 生成的静态文件可以访问 3 | lintOnSave: true, 4 | publicPath: './', 5 | outputDir: 'dist', 6 | assetsDir: 'static', 7 | } 8 | -------------------------------------------------------------------------------- /07flex-xie-cheng/README.md.md: -------------------------------------------------------------------------------- 1 | ## 简介 2 | 3 | 携程网手机端首页，包含以下技术点： 4 | 5 | - flex布局 6 | - css精灵图（雪碧图） -------------------------------------------------------------------------------- /07flex-xie-cheng/css/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | max-width: 540px; 3 | min-width: 320px; 4 | background-color: #f2f2f2; 5 | margin: 0 auto; 6 | color: #000; 7 | font: normal 14px/1.5 Tahoma; 8 | overflow-x: hidden; 9 | -webkit-tap-highlight-color: transparent; 10 | } 11 | 12 | a { 13 | color: #222; 14 | } 15 | 16 | /* 搜索区域 */ 17 | 18 | .search-index { 19 | display: flex; 20 | position: fixed; 21 | left: 50%; 22 | top: 0; 23 | width: 100%; 24 | height: 44px; 25 | -webkit-transform: translateX(-50%); 26 | transform: translateX(-50%); 27 | min-width: 320px; 28 | max-width: 540px; 29 | background-color: #fff; 30 | z-index: 1111; 31 | } 32 | 33 | .search { 34 | flex: 1; 35 | height: 26px; 36 | position: relative; 37 | line-height: 26px; 38 | font-size: 12px; 39 | border: 1px solid #ccc; 40 | margin: 6px 10px; 41 | padding-left: 35px; 42 | border-radius: 14px; 43 | color: #666; 44 | box-shadow: 0 2px 4PX rgba(0, 0, 0, .2); 45 | } 46 | 47 | .search::before { 48 | content: ""; 49 | position: absolute; 50 | top: 0; 51 | left: 0; 52 | width: 30px; 53 | height: 100%; 54 | background: url(../img/home-common.png) no-repeat 13px 5px; 55 | background-size: 21px auto; 56 | } 57 | 58 | .user { 59 | width: 44px; 60 | height: 100%; 61 | color: #222; 62 | font-size: 12px; 63 | text-align: center; 64 | } 65 | 66 | .user::before { 67 | content: ""; 68 | display: block; 69 | width: 22px; 70 | height: 22px; 71 | background: url(../img/home-common.png) no-repeat 0 -77px; 72 | background-size: 21px auto; 73 | margin: 2px auto; 74 | } 75 | 76 | /* 轮播 */ 77 | .focus { 78 | padding-top: 44px; 79 | } 80 | 81 | .focus img { 82 | width: 100%; 83 | } 84 | 85 | /* 局部导航栏 */ 86 | .local-nav { 87 | display: flex; 88 | position: relative; 89 | top: -27px; 90 | width: 96%; 91 | margin: 0 auto; 92 | height: 65px; 93 | background-color: #fff; 94 | border-radius: 10px; 95 | } 96 | 97 | .local-nav li { 98 | flex: 1; 99 | } 100 | 101 | .local-nav a { 102 | display: flex; 103 | flex-direction: column; 104 | align-items: center; 105 | width: 100%; 106 | height: 100%; 107 | } 108 | 109 | .local-nav li a span:nth-child(1) { 110 | width: 40px; 111 | height: 40px; 112 | overflow: hidden; 113 | } 114 | 115 | .local-nav li:nth-child(1) a span:nth-child(1) { 116 | background: url(../img/home-fivemain.15.png) no-repeat 0px 2px; 117 | background-size: 40px auto; 118 | } 119 | 120 | .local-nav li:nth-child(2) a span:nth-child(1) { 121 | background: url(../img/home-fivemain.15.png) no-repeat 0px -38px; 122 | background-size: 40px auto; 123 | } 124 | 125 | .local-nav li:nth-child(3) a span:nth-child(1) { 126 | background: url(../img/home-fivemain.15.png) no-repeat 0px -76px; 127 | background-size: 40px auto; 128 | } 129 | 130 | .local-nav li:nth-child(4) a span:nth-child(1) { 131 | background: url(../img/home-fivemain.15.png) no-repeat 0px -116px; 132 | background-size: 40px auto; 133 | } 134 | 135 | .local-nav li:nth-child(5) a span:nth-child(1) { 136 | background: url(../img/home-fivemain.15.png) no-repeat 0px -154px; 137 | background-size: 40px auto; 138 | } 139 | 140 | 141 | .local-nav a span img { 142 | width: 100%; 143 | } 144 | 145 | /* 主导航栏 */ 146 | .nav { 147 | position: relative; 148 | top: -15px; 149 | border-radius: 8px; 150 | overflow: hidden; 151 | margin: 0 12px 1px; 152 | background-color: #fff; 153 | } 154 | 155 | .nav-common { 156 | display: flex; 157 | height: 65px; 158 | } 159 | 160 | .hotel { 161 | background: -webkit-linear-gradient(left, #ff4b47, #ffcf4f); 162 | } 163 | 164 | .nav-common:nth-child(2) { 165 | margin: 3px 0; 166 | } 167 | 168 | 169 | .nav-common .nav-item:nth-child(1) { 170 | flex: 0 1 31%; 171 | } 172 | .nav-common .nav-item-tejia { 173 | flex: 1 174 | } 175 | .nav-common .nav-item-jiudian{ 176 | background: url(../img/grid-nav-items-hotel@v7.15.png) no-repeat 79px 33px; 177 | background-size: 73px auto; 178 | } 179 | .nav-common .nav-item-minsu{ 180 | background: url(../img/grid-nav-items-minsu@v7.15.png) no-repeat 0px 45px; 181 | background-size: 37px auto; 182 | } 183 | .nav-common .nav-item-tejia{ 184 | background: url(../img/grid-nav-items-hot.png) no-repeat 16px -15px; 185 | background-size: 200px auto; 186 | } 187 | .nav-common .nav-item a{ 188 | color: #fff; 189 | height: 100%; 190 | line-height: 5; 191 | padding-left: 20px; 192 | } 193 | 194 | .nav-common .nav-item:nth-child(2) { 195 | flex: 0 1 23%; 196 | } 197 | .nav-common .nav-item:nth-child(-n+2) { 198 | border-right: 1px solid #fff; 199 | } 200 | 201 | 202 | .nav-two{ 203 | background: -webkit-linear-gradient(left,#0e92ed, #00beee); 204 | } 205 | 206 | .nav-three{ 207 | background: -webkit-linear-gradient(left,#00c6ad, #25d762); 208 | } 209 | 210 | .nav-common .nav-fen{ 211 | flex: 1; 212 | display: flex; 213 | } 214 | .nav-common .nav-fen .qiche{ 215 | border-right: 1px solid #fff; 216 | width: 50%; 217 | } 218 | .nav-common .nav-fen .texi{ 219 | width: 50%; 220 | } 221 | .nav-common .nav-fen .youlun{ 222 | border-right: 1px solid #fff; 223 | width: 50%; 224 | } 225 | .nav-common .nav-fen .zhiding{ 226 | width: 50%; 227 | } 228 | 229 | /* 第四部分 导航 */ 230 | 231 | .nav4{ 232 | display: flex; 233 | flex-wrap: wrap; 234 | } 235 | 236 | .nav4 .item{ 237 | flex: 20%; 238 | } 239 | 240 | .nav4 .item a{ 241 | display: flex; 242 | flex-direction: column; 243 | align-items: center; 244 | } 245 | .nav4 .item .item-icon{ 246 | width: 28px; 247 | height: 28px; 248 | background-color: #ccc; 249 | } 250 | .nav4 .item:nth-child(1) .item-icon{ 251 | background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat 0px 0px ; 252 | background-size: 28px auto; 253 | } 254 | .nav4 .item:nth-child(2) .item-icon{ 255 | background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat 0px -28px ; 256 | background-size: 28px auto; 257 | } 258 | .nav4 .item:nth-child(3) .item-icon{ 259 | background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat 0px -56px ; 260 | background-size: 28px auto; 261 | } 262 | .nav4 .item:nth-child(4) .item-icon{ 263 | background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat 0px -84px ; 264 | background-size: 28px auto; 265 | } 266 | .nav4 .item:nth-child(5) .item-icon{ 267 | background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat 0px -112px ; 268 | background-size: 28px auto; 269 | } 270 | .nav4 .item:nth-child(6) .item-icon{ 271 | background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat 0px -140px ; 272 | background-size: 28px auto; 273 | } 274 | .nav4 .item:nth-child(7) .item-icon{ 275 | background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat 0px -168px ; 276 | background-size: 28px auto; 277 | } 278 | .nav4 .item:nth-child(8) .item-icon{ 279 | background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat 0px -196px ; 280 | background-size: 28px auto; 281 | } 282 | .nav4 .item:nth-child(9) .item-icon{ 283 | background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat 0px -224px ; 284 | background-size: 28px auto; 285 | } 286 | .nav4 .item:nth-child(10) .item-icon{ 287 | background: url(../img/un_ico_subnav2x@v7.152.png) no-repeat 0px -252px ; 288 | background-size: 28px auto; 289 | } 290 | 291 | /* 下载 */ 292 | .download{ 293 | display: flex; 294 | height: 61px; 295 | border-top: 1px solid #ccc; 296 | border-bottom: 1px solid #ccc; 297 | margin-top: 10px; 298 | } 299 | .download a{ 300 | flex: 1; 301 | display: flex; 302 | flex-direction: column; 303 | align-items: center; 304 | } 305 | .download a .down-icon{ 306 | margin: 10px 0 2px; 307 | height: 20px; 308 | width: 20px; 309 | } 310 | 311 | /* footer */ 312 | footer{ 313 | text-align: center; 314 | font-size: 12px; 315 | color: #666; 316 | } 317 | footer .footer-web{ 318 | margin: 5px 0; 319 | font-size: 13px; 320 | } -------------------------------------------------------------------------------- /07flex-xie-cheng/css/reset.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, font, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td { 10 | margin: 0; 11 | padding: 0; 12 | border: 0; 13 | outline: 0; 14 | font-size: 100%; 15 | vertical-align: baseline; 16 | background: transparent; 17 | } 18 | body { 19 | line-height: 1; 20 | } 21 | ol, ul { 22 | list-style: none; 23 | } 24 | blockquote, q { 25 | quotes: none; 26 | } 27 | blockquote:before, blockquote:after, 28 | q:before, q:after { 29 | content: ”; 30 | content: none; 31 | } 32 | a{ 33 | text-decoration: none; 34 | } 35 | 36 | .clear-fix::after{ 37 | content: ""; 38 | display: block; 39 | clear: both; 40 | } -------------------------------------------------------------------------------- /07flex-xie-cheng/img/grid-nav-items-flight@v7.15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/07flex-xie-cheng/img/grid-nav-items-flight@v7.15.png -------------------------------------------------------------------------------- /07flex-xie-cheng/img/grid-nav-items-hot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/07flex-xie-cheng/img/grid-nav-items-hot.png -------------------------------------------------------------------------------- /07flex-xie-cheng/img/grid-nav-items-hotel@v7.15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/07flex-xie-cheng/img/grid-nav-items-hotel@v7.15.png -------------------------------------------------------------------------------- /07flex-xie-cheng/img/grid-nav-items-minsu@v7.15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/07flex-xie-cheng/img/grid-nav-items-minsu@v7.15.png -------------------------------------------------------------------------------- /07flex-xie-cheng/img/home-common.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/07flex-xie-cheng/img/home-common.png -------------------------------------------------------------------------------- /07flex-xie-cheng/img/home-fivemain.15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/07flex-xie-cheng/img/home-fivemain.15.png -------------------------------------------------------------------------------- /07flex-xie-cheng/img/un_ico_subnav2x@v7.152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/07flex-xie-cheng/img/un_ico_subnav2x@v7.152.png -------------------------------------------------------------------------------- /07flex-xie-cheng/img/zg0p1d000001eno3o7583.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Elgar17/web-demos/12beb16c2278118207e8e145179577f376abf7f4/07flex-xie-cheng/img/zg0p1d000001eno3o7583.jpg -------------------------------------------------------------------------------- /07flex-xie-cheng/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 携程旅行-酒店预订,机票预订查询,旅游度假,商旅管理-携程无线官网 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
搜索:目的地/酒店/景点/航班号
16 | 我 的 17 |
18 | 19 |
20 | 21 |
22 | 23 | 55 | 56 | 82 | 83 | 84 |
85 |
86 | 87 | 88 | 自由行 89 | 90 |
91 |
92 | 93 | 94 | WiFi电话卡 95 | 96 |
97 |
98 | 99 | 100 | 保险·签证 101 | 102 |
103 |
104 | 105 | 106 | 换钞·购物 107 | 108 |
109 |
110 | 111 | 112 | 当地向导 113 | 114 |
115 |
116 | 117 | 118 | 特价机票 119 | 120 |
121 |
122 | 123 | 124 | 礼品卡 125 | 126 |
127 |
128 | 129 | 130 | 申卡·借钱 131 | 132 |
133 |
134 | 135 | 136 | 旅拍 137 | 138 |
139 |
140 | 141 | 142 | 更多 143 | 144 |
145 | 146 |
147 | 148 | 149 |
150 | 151 | 152 | 155 | 156 | 电话预定 157 | 158 | 159 | 160 | 163 | 164 | 下载客户端 165 | 166 | 167 | 168 | 169 | 172 | 173 | 174 | 我的 175 | 176 |
177 | 178 | 182 | 183 | 184 | -------------------------------------------------------------------------------- /08websocket-test-tool/README.md: -------------------------------------------------------------------------------- 1 | ## 简介 2 | 3 | 一款给予 Vue.js 的 websocket 测试工具。 4 | 5 | 包含功能： 6 | - 测试连接 7 | - 发送数据 8 | - 接受数据 -------------------------------------------------------------------------------- /08websocket-test-tool/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 |

WebSocket 测试工具🔩

24 |
25 | 26 | 27 | 28 | 29 | 30 | 连接 31 | 32 | 33 | 34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 发送 42 | 关闭 43 | 44 | 45 |
46 | 47 | 49 | 50 | 51 | 52 | 53 |
54 | 55 | 120 | 121 | -------------------------------------------------------------------------------- /09create-bas64-img/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 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 |
71 | 72 | 73 |

使用说明：

74 |

生成图片后，复制输入框中的字符，添加到 img 标签的 src 属性中，就可以网页中显示图片。

75 |
76 | 77 | 116 | 117 | -------------------------------------------------------------------------------- /10react-tailwind/.zshrc: -------------------------------------------------------------------------------- 1 | source ~.bash_profile 2 | -------------------------------------------------------------------------------- /10react-tailwind/README.md: -------------------------------------------------------------------------------- 1 | # React + tailwindcss 2 | 3 | 安装 tailwindcss 4 | 5 | ```bash 6 | npm i -D tailwindcss postcss autoprefixer 7 | ``` 8 | 9 | 初始化 tailwindcss 10 | 11 | ```bash 12 | npx tailwindcss init -p 13 | ``` 14 | -------------------------------------------------------------------------------- /10react-tailwind/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /10react-tailwind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "10react-tailwind", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "react": "^18.0.0", 12 | "react-dom": "^18.0.0" 13 | }, 14 | "devDependencies": { 15 | "@types/react": "^18.0.0", 16 | "@types/react-dom": "^18.0.0", 17 | "@vitejs/plugin-react": "^1.3.0", 18 | "autoprefixer": "^10.4.7", 19 | "postcss": "^8.4.14", 20 | "tailwindcss": "^3.1.6", 21 | "vite": "^2.9.9" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /10react-tailwind/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /10react-tailwind/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Index from "./pages/Index"; 2 | 3 | function App() { 4 | return ; 5 | } 6 | 7 | export default App; 8 | -------------------------------------------------------------------------------- /10react-tailwind/src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /10react-tailwind/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /10react-tailwind/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /10react-tailwind/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /10react-tailwind/src/pages/Index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Header from "../widgets/Header"; 3 | import Hero from "../widgets/Hero"; 4 | import Solutions from "../widgets/Solutions"; 5 | 6 | function Index() { 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 | 14 |
15 |
16 |
17 | ); 18 | } 19 | 20 | export default Index; 21 | -------------------------------------------------------------------------------- /10react-tailwind/src/widgets/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "../logo.svg"; 3 | 4 | function Header() { 5 | return ( 6 |
7 | 8 | 12 |
13 | ); 14 | } 15 | 16 | export default Header; 17 | -------------------------------------------------------------------------------- /10react-tailwind/src/widgets/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Hero() { 4 | return ( 5 |
6 |

7 | 打造一个完美、现象级的、充满创造力的网站。 8 |

9 |

试文案这是测试文是测试文案，这是测试文案 这是测试文案这是测试文案这是测试文案这是测试文案。

10 |
11 | 12 | 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Hero -------------------------------------------------------------------------------- /10react-tailwind/src/widgets/SectiionHeading.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function SectiionHeading({ titile, section }) { 4 | return ( 5 |
6 |

{titile}

7 |

{section}

8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /10react-tailwind/src/widgets/Solutions.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SectiionHeading from "./SectiionHeading"; 3 | const Image = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661091440&t=2a3d6d5229b821b316b6d8298a259b31' 4 | 5 | function Solutions() { 6 | return ( 7 |
8 | 12 |
13 |
14 |

强有力的工具

15 |

16 | 解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案. 17 |

18 |
    19 | {[1, 2].map((i) => ( 20 |
  • 25 |

    简单构建系统

    26 |
    27 |

    28 | 解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案解决方案. 29 |

    30 |
    31 |
    • 32 | ))} 33 |
34 |
35 | 36 |
37 |
38 | ); 39 | } 40 | 41 | export default Solutions; 42 | -------------------------------------------------------------------------------- /10react-tailwind/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./index.js", "./src/**/*.{js,jsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | -------------------------------------------------------------------------------- /10react-tailwind/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 简介 2 | 3 | 这是我在学习过程中写的一些小工具、demo 应用和小游戏。 4 | 5 | ## 📋 目录 6 | 7 | | 序号 | 名称 | 难度 | 描述 | 8 | | ---- | ------------------------------------------------- | ------ | ---------------------------------- | 9 | | 1 | [💣 原生 JS 扫雷](./01mine-sweeper/README.md) | ⭐⭐⭐ | 基于原生 JavaScript 的扫雷游戏 | 10 | | 2 | [✅ Vue-Todo 应用](./02vue-todo/README.md) | ⭐⭐ | 基于 Vue 的待办应用 | 11 | | 3 | [🔨 文字转换工具](./03qaz-translate/README.md) | ⭐⭐ | 西里尔哈萨克文字转化成旧题哈萨克文 | 12 | | 4 | [🎵 音乐播放器](./04player/README.md) | ⭐⭐ | 基于原生 JS 的简单播放器页面 | 13 | | 5 | [👍 好看的评论页面](./05rate/README.md) | ⭐ | 基于原生 JS 的交互式评论页面 | 14 | | 6 | [📊 flex 布局-携程网](./07flex-xie-cheng) | ⭐ | 基于 flex 布局 + css 精灵图的 demo | 15 | | 7 | [🔩 websocket 测试工具](./08websocket-test-tool) | ⭐⭐ | websocket 测试工具 | 16 | | 8 | [🗺 图片生成工具](./09create-bas64-img) | ⭐⭐ | 生成 base64 图片 | 17 | | 8 | [🌈 React + tailwindcss demo](./10react-tailwind) | ⭐⭐ | tailwindcss + React 写的简单页面 | 18 | --------------------------------------------------------------------------------