├── .gitignore ├── EventSrouce ├── client.html ├── readme.md └── server.js ├── Objective-C ├── NSArray常用的方法.md ├── NSDictionary常用方法.md └── NSString的常用方法.md ├── README.md ├── San └── San-demo.html ├── async await ├── a.txt ├── b.txt └── demo.js ├── css3-demo ├── 3D │ ├── 2.jpg │ ├── 3D图片环.html │ ├── 3D图片环2.html │ ├── 3D图片环3.html │ ├── 3D图片环4.html │ ├── 3D图片环5.html │ ├── 3D爆炸效果.html │ ├── 3D翻页效果.html │ ├── 3D翻页效果2.html │ ├── 3D颗粒翻转.html │ ├── 3D颗粒翻转2.html │ ├── img │ │ ├── 0.jpg │ │ ├── 1.jpg │ │ └── 2.jpg │ ├── img2 │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ └── 倒影.html ├── css3进度条.html ├── css3选择器的应用-百度文库.html ├── filter.html ├── font-face-demo.html ├── fonts │ ├── ArtMonsters.ttf │ └── Filxgirl.TTF ├── img │ └── icon.png ├── pointer-events.html ├── position-sticky.html ├── steps │ ├── demo1 │ │ ├── demo.html │ │ └── g.png │ ├── demo2 │ │ ├── demo.html │ │ └── foxtail.png │ ├── ken.png │ ├── person.html │ └── person.jpg ├── waterLines.html ├── 多行文本固定下方.html ├── 改变表单控件光标颜色.html ├── 文字描边.html ├── 文字模糊效果.html ├── 文字浮雕效果.html ├── 文字阴影的几个例子.html ├── 模拟单选框.html ├── 滑动开始解锁.html ├── 燃烧的字.html └── 重复渐变-应用背景纸张.html ├── echarts-demo ├── echarts-柱状图.html ├── echarts-饼图.html ├── echarts-饼图2.html └── echarts.min.js ├── grunt-demo ├── Gruntfile.js ├── Gruntfile1.js ├── Gruntfile2.js ├── Gruntfile4.js ├── Gruntfile5.js ├── Gruntfile6.js ├── app │ ├── index.html │ ├── index.js │ └── style.css ├── package.json └── readme.txt ├── gulp-demo ├── gulpfile.js ├── package.json ├── readme.txt └── src │ ├── css │ ├── main.css │ ├── news.css │ └── style.css │ ├── html │ └── demo.html │ ├── images │ └── 5.png │ └── js │ ├── demo.js │ └── jquery-1.11.3.js ├── gulp-less-pro-temp ├── gulpfile.js ├── package.json └── public │ ├── index.html │ ├── js │ ├── rem.js │ └── zepto.min.js │ └── less │ ├── index.less │ ├── reset.less │ └── variable.less ├── gulp-less-wawa-demo ├── gulpfile.js ├── package.json └── public │ ├── images │ ├── alipay-bg.png │ ├── banner01.png │ ├── banner02.png │ ├── btn-icon.png │ ├── direction-core-bg.png │ ├── go.png │ ├── grab-succ-bg.png │ ├── icon-home.png │ ├── icon-muted.png │ ├── icon-my.png │ ├── img-bear.png │ ├── item-img1.png │ ├── item-img2.png │ ├── room-bg.jpg │ ├── room-bg2.png │ ├── sign-new.png │ ├── user-face.png │ ├── will-play.png │ └── wxpay-bg.png │ ├── index.html │ ├── js │ ├── rem.js │ └── swiper.min.js │ ├── less │ ├── banner.less │ ├── footer.less │ ├── grab-succ.less │ ├── header.less │ ├── index-section.less │ ├── index.less │ ├── recharge.less │ ├── reset.less │ ├── room.less │ └── variable.less │ ├── recharge.html │ ├── room_play.html │ └── room_tourist.html ├── gulp-plugins-demo ├── dest │ ├── css │ │ ├── a.css │ │ └── b.css │ └── js │ │ ├── main.js │ │ └── main.min.js ├── gulpfile-concat用法.js ├── gulpfile-imagemin用法.js ├── gulpfile-jshint用法.js ├── gulpfile-livereload用法.js ├── gulpfile-load-plugins用法.js ├── gulpfile-minify-css用法.js ├── gulpfile-minify-html用法.js ├── gulpfile-rename用法.js ├── gulpfile-uglify用法.js ├── gulpfile.js ├── package.json └── src │ ├── a.css │ ├── a.js │ ├── b.css │ ├── b.js │ ├── index.html │ └── t.png ├── gulp-rem-boilerplate ├── .browserslistrc ├── gulpfile.js ├── package.json ├── public │ ├── conf │ │ └── favicon.ico │ ├── css │ │ ├── header.css │ │ └── index.css │ ├── html │ │ └── index.html │ ├── images │ │ └── logo.png │ ├── js │ │ └── rem.js │ ├── less │ │ ├── header.less │ │ └── index.less │ └── page │ │ ├── include │ │ └── header.html │ │ └── index.html └── readme.md ├── hi-wiki-demo ├── express │ ├── demo1 │ │ ├── package.json │ │ ├── server.js │ │ └── www │ │ │ └── ajax.html │ ├── demo10-router │ │ ├── package.json │ │ ├── router │ │ │ └── user.js │ │ ├── server.js │ │ └── views │ │ │ ├── index.ejs │ │ │ └── user │ │ │ ├── index.ejs │ │ │ └── user_info.ejs │ ├── demo11-vhost │ │ └── server.js │ ├── demo2 │ │ ├── package.json │ │ ├── server.js │ │ └── www │ │ │ └── ajax.html │ ├── demo3 │ │ ├── package.json │ │ ├── server.js │ │ └── www │ │ │ └── ajax.html │ ├── demo4-session │ │ ├── package.json │ │ ├── server.js │ │ └── www │ │ │ └── ajax.html │ ├── demo5-multer │ │ ├── package.json │ │ ├── server.js │ │ └── www │ │ │ └── ajax.html │ ├── demo6-自己编写模板引擎 │ │ ├── server.js │ │ └── views │ │ │ └── index.hi │ ├── demo7-jade │ │ ├── server.js │ │ └── views │ │ │ └── index.jade │ ├── demo8-ejs │ │ ├── server.js │ │ └── views │ │ │ └── index.ejs │ └── demo9-consolidate │ │ ├── server.js │ │ └── views │ │ ├── index.ejs │ │ ├── index.jade │ │ └── index.swig ├── webpack-demo │ ├── app │ │ ├── 404.jpg │ │ ├── a.js │ │ ├── index.js │ │ ├── main.css │ │ ├── main.scss │ │ ├── plugin.js │ │ └── variables.scss │ ├── package.json │ ├── webpack.config.js │ └── webpack.production.config.js ├── webpack-demo2 │ ├── app │ │ ├── 404.jpg │ │ ├── a.js │ │ ├── index.js │ │ ├── main.css │ │ ├── main.scss │ │ ├── mobile.js │ │ ├── plugin.js │ │ ├── templates │ │ │ ├── index.html │ │ │ └── mobile.html │ │ └── variables.scss │ ├── package.json │ ├── webpack.config.js │ └── webpack.production.config.js └── webpack4.x │ ├── .babelrc │ ├── config.json │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── src │ ├── assets │ │ ├── js │ │ │ └── index.js │ │ └── logo.png │ ├── css │ │ └── index.css │ ├── entry.js │ ├── images │ │ └── 404.jpg │ ├── index.html │ ├── js │ │ └── a.js │ ├── less │ │ └── index.less │ └── sass │ │ └── index.scss │ └── webpack.config.js ├── html5-api ├── html5 电池信息.html ├── html5-api-websocket.html ├── html5重力感应-摇一摇demo.html ├── html5震动.html └── server.js ├── img-lazyload ├── layzr.js └── lazyload.html ├── jquery-cropper图像裁剪 ├── demo.html ├── lib │ ├── cropper.min.css │ ├── cropper.min.js │ └── jquery.min.js └── m.jpg ├── jquery-deferred ├── a.txt ├── b.txt ├── deferred.html ├── deferred10.html ├── deferred2.html ├── deferred3.html ├── deferred4.html ├── deferred5.html ├── deferred6.html ├── deferred7.html ├── deferred8.html ├── deferred9.html └── jquery-1.7.2.js ├── jquery-load ├── jquery-1.11.2.js ├── load.html ├── load2.html ├── load3.html ├── load4.html ├── load5.html ├── load6.html ├── php1.php ├── php2.php ├── php3.php ├── php4.php ├── tpl.html └── tpl2.html ├── jquery-mobile-demo ├── jqmobile.html └── res │ ├── 1.jpg │ ├── 2.jpg │ ├── images │ ├── ajax-loader.gif │ ├── icons-18-black.png │ ├── icons-18-white.png │ ├── icons-36-black.png │ └── icons-36-white.png │ ├── jquery-1.8.2.min.js │ ├── jquery-1.9.0.min.js │ ├── jquery.mobile-1.2.0.min.css │ └── jquery.mobile-1.2.0.min.js ├── jquery-tab ├── demo.html ├── jquery-1.7.3.js ├── jquery-tab-1.8.6.js └── readme.md ├── jsmpeg-demo ├── jsmpeg.html ├── jsmpeg.min.js └── readme.md ├── node-Knowledge-points ├── file-down-demo │ ├── download.js │ ├── download2.js │ └── www │ │ ├── 1.txt │ │ └── index.html └── npm-public-module │ ├── README.md │ ├── index.js │ ├── package.json │ └── pqs.js ├── phone_slider ├── demo.html ├── img │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── 4.png ├── js │ └── slider.js └── x.png ├── qrcode ├── qrcode-demo.html ├── qrcode-demo2.html └── qrcode.js ├── react-lib ├── babel.min.js ├── jquery.js ├── react-dom.js └── react.js ├── react-native-demo ├── RN-IOS-demo │ ├── demo1 │ │ ├── index.ios.js │ │ └── ios_view │ │ │ ├── header.js │ │ │ ├── home.js │ │ │ ├── more.js │ │ │ └── news.js │ ├── demo2 │ │ ├── index.ios.js │ │ └── ios_view │ │ │ ├── common.js │ │ │ ├── detail.js │ │ │ ├── header.js │ │ │ ├── home.js │ │ │ ├── more.js │ │ │ └── news.js │ └── readme.md ├── TabBarIos组件的使用.md ├── article-img │ ├── 1.png │ └── 2.png ├── react-native的API预览.md ├── react-native的环境搭建(mac).md ├── react-native的环境搭建(windows).md ├── react-native踩坑之旅.md └── react-navigation-demo │ ├── demo1.md │ ├── demo2.md │ ├── demo3.md │ ├── demo4.md │ └── readme.md ├── react揭秘 ├── 1.准备布局.html ├── 2.复用布局.html ├── 3.复用布局+添加事件.html ├── 4.复用布局+添加事件2.html ├── 5.状态改变DOM重新更新.html ├── 6.状态改变DOM重新更新2.html ├── 7.抽出公共组件.html └── 8.抽出公共组件2.html ├── record.md ├── rem ├── demo.html ├── readme.txt ├── rem phone test.html ├── rem-demo.html └── rem-sprites │ ├── demo.html │ └── sprite.png ├── requireJs ├── readme.txt ├── requirejs-width-jquery │ ├── demo.html │ └── js │ │ ├── lib │ │ └── jquery-1.7.2.js │ │ ├── main.js │ │ └── require.js └── requirejs-width-rjs │ ├── build.js │ ├── demo.html │ ├── js │ ├── a.js │ ├── b.js │ ├── main.js │ └── require.js │ └── r.js ├── string-Method ├── str-anchor.html ├── str-big.html ├── str-blink.html ├── str-bold.html ├── str-charCodeAt.html ├── str-concat.html ├── str-fixed.html ├── str-fontcolor.html ├── str-fontsize.html ├── str-italics.html ├── str-link.html ├── str-localeCompare.html ├── str-replace.html ├── str-replace2.html ├── str-replace3.html ├── str-slice.html ├── str-small.html ├── str-strike.html ├── str-sub.html ├── str-substr.html ├── str-sup.html ├── str-toLocaleLowerCase.html ├── str-toString.html ├── str-trim.html └── str-valueOf.html ├── strive-upload ├── 1.html ├── ajax.js ├── doupload.php ├── file.html ├── file2.html └── jquery-1.11.1.js ├── vue-component-data-transfer ├── demo.html ├── demo2.html └── demo3.html ├── vue-knowledge ├── limitBy的替代者.md ├── vue-i18n.html ├── vue2.0事件native的使用.md ├── vue2.0使用jsx的语法.md ├── vue2.0自定义全局组件.md ├── vue2.3的sync语法糖.md ├── vue中prototype与mixin.md ├── vue注意的地方.md └── 使用单一的事件中心管理组件通信.md ├── vue-router-demo ├── .babelrc ├── .gitignore ├── README.md ├── demo.html ├── demo2.html ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── components │ │ ├── About.vue │ │ ├── Detail.vue │ │ ├── Home.vue │ │ ├── Message.vue │ │ └── News.vue │ ├── main.js │ └── router-config.js ├── vue-router2.0-demo.html └── webpack.config.js ├── vue-todolist-webpack-vue-loader ├── .babelrc ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ ├── css │ │ │ └── bootstrap.min.css │ │ └── js │ │ │ ├── bootstrap.js │ │ │ └── jquery-1.7.2.js │ ├── components │ │ ├── Form.vue │ │ ├── List.vue │ │ └── Modal.vue │ └── main.js └── webpack.config.js ├── vue-todolist ├── bootstrap.js ├── bootstrap.min.css ├── demo-jsonp.html ├── demo-jsonp2.html ├── demo.html ├── jquery-1.7.2.js └── vue.js ├── vue-transition ├── animate.css ├── vue-animation.html ├── vue-transition-change-demo.html ├── vue.js ├── vue2.0-transition.html └── vue2.0.js ├── vue2.0-Mint-ui-demo ├── .babelrc ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ ├── 100x100.png │ │ ├── detail.png │ │ └── logo.png │ ├── components │ │ ├── Home.vue │ │ ├── Other.vue │ │ └── Other2.vue │ └── main.js └── webpack.config.js ├── vue2.0-knowledge-demo └── custom-global-component │ ├── App.vue │ ├── components │ ├── loading │ │ ├── Loading.vue │ │ └── index.js │ └── tabs │ │ ├── Tabs.vue │ │ └── index.js │ └── main.js ├── vue2.0-router-demo ├── .babelrc ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── About.vue │ │ ├── Home.vue │ │ └── News.vue │ ├── main.js │ └── router.config.js └── webpack.config.js ├── vuex-demo └── 1 │ ├── App.vue │ ├── main.js │ └── store.js ├── vue双向绑定揭秘 ├── 1-最简单的双向绑定实现.html ├── 2-vue双向绑定实现.html ├── 3-初始化数据绑定.html ├── 4-响应式的数据绑定.html ├── 5-响应式的数据绑定2.html ├── 6-响应式的数据绑定3.html ├── 7-vue中事件的实现.html ├── 8-vue中事件的实现2.html ├── MVVM │ ├── compile.js │ ├── mvvm.html │ ├── mvvm.js │ ├── observer.js │ └── watcher.js ├── hi.js └── 订阅-发布模式.html ├── web-knowledge ├── ES2016(ES7)的新特性.md ├── ES2016-demo │ ├── 1 │ │ ├── index.html │ │ ├── index.js │ │ ├── package.json │ │ └── webpack.config.js │ └── 2 │ │ ├── .babelrc │ │ ├── index.html │ │ ├── index.js │ │ ├── package.json │ │ └── webpack.config.js ├── H5常见问题以及解决方案.md ├── HTML元素嵌套.md ├── assets │ └── images │ │ ├── h5-element-type.png │ │ ├── test1.png │ │ ├── test2.png │ │ ├── test3.png │ │ ├── test4.png │ │ ├── test5.png │ │ └── xhtml.png ├── vue-cli打包相对路径和背景图片.md ├── 关于ES6里面的模块化.md ├── 前端一点新东西.md ├── 前端技巧搜集.md └── 模块化语法问答.md ├── zepto-scrollTop ├── demo.html ├── zepto-scrolltop.js └── zepto.min.js ├── 一些配置文件 ├── gulpfile-less.js ├── gulpfile-移动端配置.js ├── gulpfile.js └── webpack.config.js └── 小程序-demo ├── README.md ├── 万年历demo ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── index │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── logs │ │ ├── logs.js │ │ ├── logs.json │ │ ├── logs.wxml │ │ └── logs.wxss └── utils │ └── util.js ├── 简易音乐播放器-demo ├── app.js ├── app.json ├── app.wxss └── pages │ └── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── 获取头条数据-demo ├── app.js ├── app.json ├── app.wxss ├── pages ├── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── logs │ ├── logs.js │ ├── logs.json │ ├── logs.wxml │ └── logs.wxss └── utils └── util.js /.gitignore: -------------------------------------------------------------------------------- 1 | /gulp-demo/node_modules 2 | /gulp-demo/dest 3 | /grunt-demo/node_modules 4 | /grunt-demo/dest -------------------------------------------------------------------------------- /EventSrouce/readme.md: -------------------------------------------------------------------------------- 1 | EventSource 服务器推送消息给客户端，之前可以用websocket可以实现 2 | 3 | 简称: SSE (Server Sent Event) 4 | 5 | 它不像websocket是双向通信，**SSE是单向的**，可以认为，只要客户端与服务器建立一次连接，后期服务器可以实时的向服务器推送数据 6 | 7 | #### 客户端API 8 | 9 | 使用: 10 | 11 | ```javascript 12 | let es=new EventSource(url) 13 | ``` 14 | 15 | 与服务器建立连接成功会触发open事件 16 | 17 | ```javascript 18 | es.onopen=function(){ 19 | //... 20 | } 21 | ``` 22 | 23 | 客户端接收服务器发来的数据，会触发message事件: 24 | 25 | ```javascript 26 | es.onmessage=function(event){ 27 | //event.data 后端发过来的数据 28 | }; 29 | ``` 30 | 31 | 通信错误(比如突然中断), 会触发error事件 32 | 33 | ```javascript 34 | es.onerror=function(){ 35 | //... 36 | }; 37 | ``` 38 | 39 | close方法可以关闭SSE的连接: 40 | 41 | ```javascript 42 | es.close() 43 | ``` 44 | 45 | #### 服务器端 46 | 47 | 服务器向浏览器发送的SSE数据，需要包含以下HTTP头信息 48 | 49 | ``` 50 | Content-Type: text/event-stream 51 | Cache-Control: no-cache 52 | Connection: keep-alive 53 | ``` 54 | 55 | 向前台发送数据: 56 | 57 | ``` 58 | data: 数据一\n 59 | data: 数据二\n\n 60 | ``` 61 | 62 | --- 63 | 64 | 可以看本目录里面的 client.html和server.js 65 | 66 | 可以参考: http://www.ruanyifeng.com/blog/2017/05/server-sent_events.html -------------------------------------------------------------------------------- /EventSrouce/server.js: -------------------------------------------------------------------------------- 1 | const http = require('http'); 2 | const fs = require('fs'); 3 | 4 | http.createServer((req, res) => { 5 | let filename = '.' + req.url; 6 | 7 | if (filename == './stream') { 8 | res.writeHead(200, { 9 | "Content-Type": "text/event-stream", 10 | "Cache-Control": "no-cache", 11 | "Connection": "keep-alive", 12 | "Access-Control-Allow-Origin": "*" 13 | }); 14 | 15 | res.write("retry:10000\n"); 16 | res.write("event: connecttime\n"); 17 | res.write("data:" + (new Date()) + "\n\n"); 18 | res.write("data:" + (new Date()) + "\n\n"); 19 | 20 | let timer = setInterval(() => { 21 | res.write("data:" + (new Date()) + "\n\n"); 22 | }, 1000); 23 | 24 | req.connection.addListener("close", () => { 25 | console.log('客户端关闭'); 26 | clearInterval(timer); 27 | }, false); 28 | 29 | } else { 30 | let rs = fs.createReadStream('client.html'); 31 | rs.pipe(res); 32 | } 33 | }).listen(8088); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | striveCode 3 | ========== 4 | 5 | 6 | phone_slider is a phone tab by css3 ​:smile:​ ​:sunflower:​ 7 | 手机端的一个无缝轮播图！只为存个档案！ 8 | 9 | ============================== 10 | 11 | jquery-deferred 12 | 13 | deferred usage,and some demo! 14 | 15 | ============================== 16 | jquery-load 17 | 18 | load usage,and some demo! 19 | 20 | ============================== 21 | 22 | string-Method 23 | 24 | 字符串方法总汇 25 | 26 | 27 | ============================== 28 | 29 | node-Knowledge-points 30 | 31 | nodejs知识点积累！ 32 | 33 | 34 | 35 | ============================== 36 | 37 | vue-demo and vue knowledge 38 | 39 | ============================== -------------------------------------------------------------------------------- /async await/a.txt: -------------------------------------------------------------------------------- 1 | name is a -------------------------------------------------------------------------------- /async await/b.txt: -------------------------------------------------------------------------------- 1 | name is b ^_^ -------------------------------------------------------------------------------- /async await/demo.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | function getFile1() { 4 | return new Promise(function(resolve, reject) { 5 | resolve(fs.readFileSync('a.txt')); 6 | }); 7 | } 8 | 9 | function getFile2() { 10 | return new Promise(function(resolve, reject) { 11 | resolve(fs.readFileSync('b.txt')); 12 | }); 13 | } 14 | 15 | async function show() { 16 | let data1 = await getFile1(); 17 | let data2 = await getFile2(); 18 | console.log(data1.toString()); 19 | console.log(data2.toString()); 20 | } 21 | 22 | show(); -------------------------------------------------------------------------------- /css3-demo/3D/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/2.jpg -------------------------------------------------------------------------------- /css3-demo/3D/3D图片环.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 智能社-http://www.zhinengshe.com 6 | 13 | 16 | 17 | 18 | 19 |
20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /css3-demo/3D/3D图片环2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 智能社-http://www.zhinengshe.com 6 | 11 | 29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /css3-demo/3D/img/0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img/0.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img/1.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img/2.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/1.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/10.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/11.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/2.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/3.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/4.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/5.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/6.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/7.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/8.jpg -------------------------------------------------------------------------------- /css3-demo/3D/img2/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/3D/img2/9.jpg -------------------------------------------------------------------------------- /css3-demo/3D/倒影.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 智能社-http://www.zhinengshe.com 6 | 11 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /css3-demo/css3选择器的应用-百度文库.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3 6 | 16 | 19 | 20 | 21 | 22 |

中国文库的历史->默认

23 |

中国文库的历史->pdf

24 |

中国文库的历史->text

25 |

中国文库的历史->doc

26 |

中国文库的历史->book

27 |

中国文库的历史->exl

28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /css3-demo/fonts/ArtMonsters.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/fonts/ArtMonsters.ttf -------------------------------------------------------------------------------- /css3-demo/fonts/Filxgirl.TTF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/fonts/Filxgirl.TTF -------------------------------------------------------------------------------- /css3-demo/img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/img/icon.png -------------------------------------------------------------------------------- /css3-demo/pointer-events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | pointer-events 6 | 14 | 15 | 16 | 我是链接 17 | 18 | -------------------------------------------------------------------------------- /css3-demo/position-sticky.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 34 | 35 | 36 |
box1
37 |
box2
38 |
box3
39 |
box4
40 | 41 | -------------------------------------------------------------------------------- /css3-demo/steps/demo1/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | steps-demo 6 | 45 | 48 | 49 | 50 | 51 |
52 |
53 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /css3-demo/steps/demo1/g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/steps/demo1/g.png -------------------------------------------------------------------------------- /css3-demo/steps/demo2/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | steps-demo2 6 | 17 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /css3-demo/steps/demo2/foxtail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/steps/demo2/foxtail.png -------------------------------------------------------------------------------- /css3-demo/steps/ken.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/steps/ken.png -------------------------------------------------------------------------------- /css3-demo/steps/person.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | steps-demo 6 | 20 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /css3-demo/steps/person.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/css3-demo/steps/person.jpg -------------------------------------------------------------------------------- /css3-demo/多行文本固定下方.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 手机多行文本，固定下方 9 | 30 | 31 | 32 |
33 |
34 | 35 |
36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /css3-demo/改变表单控件光标颜色.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 光标颜色的改变 6 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
32 | 33 |
34 | 35 | -------------------------------------------------------------------------------- /css3-demo/文字描边.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3-DEMO 6 | 11 | 14 | 15 | 16 | 17 |

文字描边

18 | 19 | 20 | -------------------------------------------------------------------------------- /css3-demo/文字模糊效果.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3-DEMO 6 | 10 | 13 | 14 | 15 | 16 |

文字模糊

17 | 18 | 19 | -------------------------------------------------------------------------------- /css3-demo/文字浮雕效果.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3-DEMO 6 | 10 | 13 | 14 | 15 | 16 |

浮雕效果

17 | 18 | 19 | -------------------------------------------------------------------------------- /css3-demo/文字阴影的几个例子.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS3-DEMO 6 | 15 | 18 | 19 | 20 | 21 |

夹心效果

22 |

光晕效果

23 |

火焰文字

24 | 25 | 26 | -------------------------------------------------------------------------------- /css3-demo/模拟单选框.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 智能社-http://www.zhinengshe.com 6 | 12 | 15 | 16 | 17 | 18 |
19 | 23 | 27 | 28 |
32 | 33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /css3-demo/重复渐变-应用背景纸张.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 智能社— http://www.zhinengshe.com 9 | 23 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /grunt-demo/Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | /* 3 | grunt 小例子 4 | */ 5 | module.exports=function(grunt){ 6 | require('load-grunt-tasks')(grunt); 7 | 8 | var config={ 9 | app:'app', 10 | dest:'dest' 11 | }; 12 | 13 | grunt.initConfig({ 14 | config:config, 15 | copy:{ 16 | html:{ 17 | src:'app/index.html', 18 | dest:'dest/index.html' 19 | }, 20 | css:{ 21 | src:'app/style.css', 22 | dest:'dest/style.css' 23 | }, 24 | js:{ 25 | src:'app/index.js', 26 | dest:'dest/index.js' 27 | } 28 | }, 29 | 30 | clean:{ 31 | dest:{ 32 | src:['app/index.html','app/style.css','app/index.js'] 33 | } 34 | } 35 | }); 36 | 37 | grunt.registerTask('default',['copy','clean']); 38 | }; 39 | // 插件 load-grunt-tasks 40 | // grunt-contrib-copy 41 | // grunt-contrib-clean 42 | 43 | -------------------------------------------------------------------------------- /grunt-demo/Gruntfile1.js: -------------------------------------------------------------------------------- 1 | module.exports=function(grunt){ 2 | grunt.registerTask('default',function(){ 3 | //console.log('default test'); 4 | grunt.log.write('Hello Everybody'); 5 | }); 6 | }; -------------------------------------------------------------------------------- /grunt-demo/Gruntfile2.js: -------------------------------------------------------------------------------- 1 | module.exports=function(grunt){ 2 | grunt.registerTask('eat',function(name,age){ 3 | console.log(name+'=>'+age); 4 | }); 5 | }; 6 | // grunt eat:strive:30 -------------------------------------------------------------------------------- /grunt-demo/Gruntfile4.js: -------------------------------------------------------------------------------- 1 | module.exports=function(grunt){ 2 | //初始化配置信息，可以定义属性和值 3 | grunt.initConfig({ 4 | eat:{ 5 | apple:4 6 | } 7 | }); 8 | 9 | grunt.registerTask('a',function(){ 10 | var count=grunt.config.get('eat.apple'); 11 | 12 | console.log(count); 13 | }); 14 | }; 15 | 16 | //grunt a -------------------------------------------------------------------------------- /grunt-demo/Gruntfile5.js: -------------------------------------------------------------------------------- 1 | module.exports=function(grunt){ 2 | //初始化配置信息，可以定义属性和值 3 | grunt.initConfig({ 4 | eat:{ //eat 是一个task， 5 | apple:4, //里面是一个target的名称 目标 6 | pear:10, 7 | banana:90, 8 | orange:100 9 | } 10 | }); 11 | 12 | //多个任务 13 | grunt.registerMultiTask('eat',function(){ 14 | for(var i=0; i<10; i++){ 15 | console.log('I am eating'+i+' of '+this.target+','+this.data); 16 | } 17 | }); 18 | }; 19 | 20 | //grunt eat -------------------------------------------------------------------------------- /grunt-demo/Gruntfile6.js: -------------------------------------------------------------------------------- 1 | module.exports=function(grunt){ 2 | //创建一个目录 3 | grunt.registerTask('create',function(){ 4 | grunt.file.mkdir('test'); 5 | }); 6 | 7 | //删除一个目录 8 | grunt.registerTask('delete',function(){ 9 | grunt.file.delete('test'); 10 | }); 11 | }; 12 | //grunt create 13 | //grunt delete 14 | -------------------------------------------------------------------------------- /grunt-demo/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | grunt demo 6 | 7 | 8 | 9 | 10 | 11 |
div1
12 | 13 | 14 | -------------------------------------------------------------------------------- /grunt-demo/app/index.js: -------------------------------------------------------------------------------- 1 | window.onload=function(){ 2 | var oDiv=document.getElementById('div1'); 3 | 4 | oDiv.onclick=function(){ 5 | oDiv.style.background='#555'; 6 | }; 7 | }; -------------------------------------------------------------------------------- /grunt-demo/app/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | body{ background:#399; color:#fff;} 4 | #div1{ width:300px; height:300px; text-align:center; line-height:300px; font-size:50px; font-weight:bold; background:#f60;} 5 | 6 | -------------------------------------------------------------------------------- /grunt-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aa", 3 | "version": "0.0.0", 4 | "description": "", 5 | "main": "Gruntfile.js", 6 | "dependencies": { 7 | "grunt": "^0.4.5" 8 | }, 9 | "devDependencies": { 10 | "grunt-contrib-clean": "^0.6.0", 11 | "grunt-contrib-copy": "^0.8.0", 12 | "load-grunt-tasks": "^3.2.0" 13 | }, 14 | "scripts": { 15 | "test": "echo \"Error: no test specified\" && exit 1" 16 | }, 17 | "author": "strive", 18 | "license": "MIT" 19 | } 20 | -------------------------------------------------------------------------------- /grunt-demo/readme.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/grunt-demo/readme.txt -------------------------------------------------------------------------------- /gulp-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.1.1", 4 | "description": "test gulp play", 5 | "main": "gulpfile.js", 6 | "dependencies": { 7 | "gulp": "^3.9.0" 8 | }, 9 | "devDependencies": { 10 | "gulp-concat": "^2.6.0", 11 | "gulp-imagemin": "^2.3.0", 12 | "gulp-jshint": "^1.11.2", 13 | "gulp-minify-css": "^1.2.0", 14 | "gulp-minify-html": "^1.0.3", 15 | "gulp-rename": "^1.2.2", 16 | "gulp-uglify": "^1.2.0", 17 | "imagemin-pngquant": "^4.1.0" 18 | }, 19 | "scripts": { 20 | "test": "echo \"Error: no test specified\" && exit 1" 21 | }, 22 | "author": "strive", 23 | "license": "MIT" 24 | } 25 | -------------------------------------------------------------------------------- /gulp-demo/readme.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-demo/readme.txt -------------------------------------------------------------------------------- /gulp-demo/src/css/news.css: -------------------------------------------------------------------------------- 1 | div{ width:300px; height:300px; background: red;} -------------------------------------------------------------------------------- /gulp-demo/src/html/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 智能社-http://www.zhinengshe.com 6 | 9 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /gulp-demo/src/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-demo/src/images/5.png -------------------------------------------------------------------------------- /gulp-demo/src/js/demo.js: -------------------------------------------------------------------------------- 1 | window.onload=function(){ 2 | var oDate=new Date(); 3 | 4 | var h=oDate.getFullYear(); 5 | var m=oDate.getMonth(); 6 | var s=oDate.getSeconds() 7 | 8 | var ms=oDate.getMilliseconds(); 9 | 10 | document.onclick=function(){ 11 | alert(1); 12 | }; 13 | } -------------------------------------------------------------------------------- /gulp-less-pro-temp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "less-gulp-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "autoprefixer": "^7.2.2", 14 | "gulp": "^3.9.1", 15 | "gulp-clean-css": "^3.9.0", 16 | "gulp-connect": "^5.0.0", 17 | "gulp-less": "^3.3.2", 18 | "gulp-postcss": "^7.0.0", 19 | "gulp-px3rem": "^0.3.0", 20 | "gulp-rename": "^1.2.2" 21 | } 22 | } -------------------------------------------------------------------------------- /gulp-less-pro-temp/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DEMO 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | DEMO 19 | 20 | 21 | -------------------------------------------------------------------------------- /gulp-less-pro-temp/public/js/rem.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Author: Strive 3 | * Date: 2017-12-8 4 | */ 5 | (function(global){ 6 | function remChange(){ 7 | document.documentElement.style.fontSize=20*document.documentElement.clientWidth/375+'px'; 8 | } 9 | remChange(); 10 | global.addEventListener('resize',remChange,false); 11 | })(window); -------------------------------------------------------------------------------- /gulp-less-pro-temp/public/less/variable.less: -------------------------------------------------------------------------------- 1 | /* 颜色 */ 2 | @color-title:#32b6a1; 3 | /* 字号 */ 4 | @fz-title:36px; 5 | @fz-28:28px; 6 | 7 | .more-btn{ 8 | height:82px; 9 | text-align: center; 10 | line-height: 82px; 11 | box-sizing: border-box; 12 | border-bottom: 2px solid #e6e6e6; 13 | 14 | a{ 15 | color: #777777; 16 | font-size: 28px; 17 | font-family: 微软雅黑; 18 | } 19 | } 20 | 21 | -------------------------------------------------------------------------------- /gulp-less-wawa-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "less-gulp-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "autoprefixer": "^7.2.2", 14 | "gulp": "^3.9.1", 15 | "gulp-clean-css": "^3.9.0", 16 | "gulp-connect": "^5.0.0", 17 | "gulp-less": "^3.3.2", 18 | "gulp-postcss": "^7.0.0", 19 | "gulp-px3rem": "^0.3.0", 20 | "gulp-rename": "^1.2.2" 21 | } 22 | } -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/alipay-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/alipay-bg.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/banner01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/banner01.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/banner02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/banner02.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/btn-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/btn-icon.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/direction-core-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/direction-core-bg.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/go.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/go.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/grab-succ-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/grab-succ-bg.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/icon-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/icon-home.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/icon-muted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/icon-muted.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/icon-my.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/icon-my.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/img-bear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/img-bear.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/item-img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/item-img1.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/item-img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/item-img2.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/room-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/room-bg.jpg -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/room-bg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/room-bg2.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/sign-new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/sign-new.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/user-face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/user-face.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/will-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/will-play.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/images/wxpay-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-less-wawa-demo/public/images/wxpay-bg.png -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/js/rem.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Author: Strive 3 | * Date: 2017-12-8 4 | */ 5 | (function(global){ 6 | function remChange(){ 7 | document.documentElement.style.fontSize=20*document.documentElement.clientWidth/375+'px'; 8 | } 9 | remChange(); 10 | global.addEventListener('resize',remChange,false); 11 | })(window); -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/less/banner.less: -------------------------------------------------------------------------------- 1 | .banner-box{ 2 | width:100%; 3 | height:300px; 4 | border-radius: 10px; 5 | overflow: hidden; 6 | } 7 | .swiper-container{ 8 | width: 100%; 9 | height: 100%; 10 | } 11 | .swiper-slide{ 12 | img{ 13 | display: block; 14 | width:100%; 15 | } 16 | } 17 | .swiper-pagination-bullet{ 18 | background: #fff; 19 | opacity:.5; 20 | } 21 | .swiper-pagination-bullet-active{ 22 | opacity:1; 23 | } 24 | .swiper-pagination-bullet{ 25 | width:16px; 26 | height:16px; 27 | } -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/less/footer.less: -------------------------------------------------------------------------------- 1 | @import 'variable.less'; 2 | .footer{ 3 | width:100%; 4 | height:100px; 5 | position: fixed; 6 | left:0; 7 | bottom:0; 8 | box-sizing: border-box; 9 | border-top:1px solid #dedede; 10 | background:#fff; 11 | 12 | .footer-nav{ 13 | height:100%; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | 18 | a{ 19 | flex: 1; 20 | color:@theme-color; 21 | font-size: @fz22; 22 | text-align: center; 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | } 27 | .icon{ 28 | display:block; 29 | width:40px; 30 | height:40px; 31 | margin-bottom:7px; 32 | } 33 | .icon-home{ 34 | background:url(../images/icon-home.png) no-repeat; 35 | background-size:cover; 36 | } 37 | .icon-my{ 38 | background:url(../images/icon-my.png) no-repeat; 39 | background-size:cover; 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/less/header.less: -------------------------------------------------------------------------------- 1 | @import 'variable.less'; 2 | .header{ 3 | width:100%; 4 | height:90px; 5 | box-sizing: border-box; 6 | padding:0 20px; 7 | background:#f96203; 8 | 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | 13 | .logo{ 14 | width:100%; 15 | height:100%; 16 | text-align: center; 17 | line-height: 90px; 18 | font-size: 36px; 19 | color:#fff; 20 | } 21 | 22 | .back{ 23 | display: block; 24 | width:34px; 25 | text-indent: -99999px; 26 | height:23px; 27 | background: url(../images/btn-icon.png) no-repeat; 28 | background-size: contain; 29 | transform:rotate(-90deg); 30 | } 31 | .icon-muted{ 32 | width:23px; 33 | height:29px; 34 | display: block; 35 | background:url(../images/icon-muted.png) no-repeat; 36 | background-size: contain; 37 | text-indent: -9999999px; 38 | } 39 | .bill-btn{ 40 | display: block; 41 | width:70px; 42 | font-size: 30px; 43 | color:#fff; 44 | } 45 | } -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/less/index.less: -------------------------------------------------------------------------------- 1 | @import 'reset.less'; 2 | @import 'variable.less'; 3 | @import 'header.less'; 4 | @import 'footer.less'; 5 | @import 'index-section.less'; 6 | 7 | 8 | -------------------------------------------------------------------------------- /gulp-less-wawa-demo/public/less/variable.less: -------------------------------------------------------------------------------- 1 | /* 颜色 */ 2 | @theme-color:#f14304; 3 | 4 | 5 | /* 字号 */ 6 | @fz22:22px; 7 | @fz24:24px; -------------------------------------------------------------------------------- /gulp-plugins-demo/dest/css/a.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8";body{background:red} -------------------------------------------------------------------------------- /gulp-plugins-demo/dest/css/b.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8";div{background:red} -------------------------------------------------------------------------------- /gulp-plugins-demo/dest/js/main.js: -------------------------------------------------------------------------------- 1 | /*点击页面展示一个a*/ 2 | 3 | window.onload=function(){ 4 | function show(arg1,arg2){ 5 | alert(arg1+arg2); 6 | } 7 | 8 | document.onclick=function(){ 9 | show(12,6); 10 | } 11 | }; 12 | /*点击页面展示一个a*/ 13 | 14 | (function(){ 15 | alert(1); 16 | })(); -------------------------------------------------------------------------------- /gulp-plugins-demo/dest/js/main.min.js: -------------------------------------------------------------------------------- 1 | window.onload=function(){function n(n,o){alert(n+o)}document.onclick=function(){n(12,6)}},function(){alert(1)}(); -------------------------------------------------------------------------------- /gulp-plugins-demo/gulpfile-concat用法.js: -------------------------------------------------------------------------------- 1 | var gulp=require('gulp'), 2 | concat=require('gulp-concat'); 3 | 4 | 5 | gulp.task('concat',function(){ 6 | return gulp.src('src/*.js') 7 | .pipe(concat('all.js')) 8 | .pipe(gulp.dest('dest/js')) 9 | }); 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /gulp-plugins-demo/gulpfile-imagemin用法.js: -------------------------------------------------------------------------------- 1 | var gulp=require('gulp'), 2 | imagemin=require('gulp-imagemin'), 3 | pngquant=require('imagemin-pngquant'); 4 | 5 | 6 | gulp.task('imagemin',function(){ 7 | return gulp.src('src/*.png') 8 | .pipe(imagemin({ 9 | progressive: true, 10 | use:[pngquant()] //使用pngquant来压缩png图片 11 | })) 12 | .pipe(gulp.dest('dest/image')) 13 | }); 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /gulp-plugins-demo/gulpfile-jshint用法.js: -------------------------------------------------------------------------------- 1 | var gulp=require('gulp'), 2 | jshint=require('gulp-jshint'); 3 | 4 | 5 | gulp.task('jshint',function(){ 6 | return gulp.src('src/*.js') 7 | .pipe(jshint()) 8 | .pipe(jshint.reporter()) //输出检查结果 9 | }); 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /gulp-plugins-demo/gulpfile-livereload用法.js: -------------------------------------------------------------------------------- 1 | var gulp=require('gulp'), 2 | livereload=require('gulp-livereload') 3 | 4 | 5 | gulp.task('reload',function(){ 6 | var server=livereload(); 7 | 8 | gulp.watch('src/*.html',function(file){ 9 | server.change(file.path); 10 | }); 11 | }); 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /gulp-plugins-demo/gulpfile-load-plugins用法.js: -------------------------------------------------------------------------------- 1 | var gulp=require('gulp'), 2 | plugin=require('gulp-load-plugins')(); 3 | 4 | 5 | gulp.task('concat',function(){ 6 | return gulp.src('src/*.js') 7 | .pipe(plugin.concat('all.js')) 8 | .pipe(gulp.dest('dest')) 9 | }); 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /gulp-plugins-demo/gulpfile-minify-css用法.js: -------------------------------------------------------------------------------- 1 | var gulp=require('gulp'), 2 | uglifyCss=require('gulp-minify-css'); 3 | 4 | 5 | gulp.task('uglify-css',function(){ 6 | return gulp.src('src/*.css') 7 | .pipe(uglifyCss()) 8 | .pipe(gulp.dest('dest/css')) 9 | }); 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /gulp-plugins-demo/gulpfile-minify-html用法.js: -------------------------------------------------------------------------------- 1 | var gulp=require('gulp'), 2 | uglifyHtml=require('gulp-minify-html'); 3 | 4 | 5 | gulp.task('uglify-html',function(){ 6 | return gulp.src('src/*.html') 7 | .pipe(uglifyHtml()) 8 | .pipe(gulp.dest('dest/html')) 9 | }); 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /gulp-plugins-demo/gulpfile-rename用法.js: -------------------------------------------------------------------------------- 1 | var gulp=require('gulp'), 2 | plugin=require('gulp-load-plugins')(); 3 | 4 | 5 | gulp.task('rename',function(){ 6 | return gulp.src('src/a.js') 7 | .pipe(plugin.uglify()) 8 | .pipe(plugin.rename('a.min.js')) 9 | .pipe(gulp.dest('dest')) 10 | }); 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /gulp-plugins-demo/gulpfile-uglify用法.js: -------------------------------------------------------------------------------- 1 | var gulp=require('gulp'), 2 | uglify=require('gulp-uglify'); 3 | 4 | 5 | gulp.task('uglify',function(){ 6 | return gulp.src('src/*.js') 7 | .pipe(uglify()) 8 | .pipe(gulp.dest('dest/js')) 9 | }); 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /gulp-plugins-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "del": "^2.0.2", 13 | "gulp": "^3.9.0", 14 | "gulp-clean-dest": "^0.1.0", 15 | "gulp-concat": "^2.6.0", 16 | "gulp-imagemin": "^2.3.0", 17 | "gulp-jshint": "^1.11.2", 18 | "gulp-load-plugins": "^1.0.0", 19 | "gulp-minify-css": "^1.2.1", 20 | "gulp-minify-html": "^1.0.4", 21 | "gulp-rename": "^1.2.2", 22 | "gulp-uglify": "^1.4.2", 23 | "imagemin-pngquant": "^4.2.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /gulp-plugins-demo/src/a.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | 4 | body{ background:red;} 5 | 6 | -------------------------------------------------------------------------------- /gulp-plugins-demo/src/a.js: -------------------------------------------------------------------------------- 1 | /*点击页面展示一个a*/ 2 | 3 | window.onload=function(){ 4 | function show(arg1,arg2){ 5 | alert(arg1+arg2); 6 | } 7 | 8 | document.onclick=function(){ 9 | show(12,6); 10 | } 11 | }; -------------------------------------------------------------------------------- /gulp-plugins-demo/src/b.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | 4 | div{ background:red;} 5 | 6 | -------------------------------------------------------------------------------- /gulp-plugins-demo/src/b.js: -------------------------------------------------------------------------------- 1 | /*点击页面展示一个a*/ 2 | 3 | (function(){ 4 | alert(1); 5 | })(); -------------------------------------------------------------------------------- /gulp-plugins-demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | gulp-demo 6 | 9 | 12 | 13 | 14 | 15 | 16 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /gulp-plugins-demo/src/t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-plugins-demo/src/t.png -------------------------------------------------------------------------------- /gulp-rem-boilerplate/.browserslistrc: -------------------------------------------------------------------------------- 1 | # Browsers that we support 2 | 3 | defaults 4 | not IE 11 5 | not IE_Mob 11 6 | maintained node versions -------------------------------------------------------------------------------- /gulp-rem-boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "autoprefixer": "^9.0.2", 4 | "babel-core": "^6.26.3", 5 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 6 | "babel-preset-env": "^1.7.0", 7 | "del": "^3.0.0", 8 | "gulp": "^3.9.1", 9 | "gulp-babel": "^7.0.1", 10 | "gulp-clean-css": "^3.9.4", 11 | "gulp-connect": "^5.5.0", 12 | "gulp-copy": "^1.1.0", 13 | "gulp-cssmin": "^0.2.0", 14 | "gulp-file-include": "^2.0.1", 15 | "gulp-htmlmin": "^5.0.1", 16 | "gulp-less": "^4.0.1", 17 | "gulp-plumber": "^1.2.0", 18 | "gulp-postcss": "^7.0.1", 19 | "gulp-px3rem": "^0.3.0", 20 | "gulp-rename": "^1.4.0", 21 | "gulp-rev": "^9.0.0", 22 | "gulp-rev-collector": "^1.3.1", 23 | "gulp-uglify": "^3.0.1", 24 | "gulp-uglify-es": "^1.0.4", 25 | "pump": "^3.0.0", 26 | "uglify-es": "^3.3.9", 27 | "uglify-js": "^3.4.9" 28 | }, 29 | "name": "aaaaa", 30 | "version": "1.0.0", 31 | "main": "gulpfile.js", 32 | "scripts": { 33 | "test": "echo \"Error: no test specified\" && exit 1" 34 | }, 35 | "keywords": [], 36 | "author": "", 37 | "license": "ISC", 38 | "description": "" 39 | } 40 | -------------------------------------------------------------------------------- /gulp-rem-boilerplate/public/conf/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-rem-boilerplate/public/conf/favicon.ico -------------------------------------------------------------------------------- /gulp-rem-boilerplate/public/css/header.css: -------------------------------------------------------------------------------- 1 | header { 2 | font-size: 0.75rem; 3 | text-align: center; 4 | } -------------------------------------------------------------------------------- /gulp-rem-boilerplate/public/css/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | -webkit-user-select: none; 8 | -moz-user-select: none; 9 | -ms-user-select: none; 10 | user-select: none; 11 | width: 18.75rem; 12 | margin: 0 auto; 13 | } 14 | 15 | #div1 { 16 | width: 17.25rem; 17 | height: 7.25rem; 18 | background: red; 19 | margin: 0.5rem auto; 20 | border-radius: 0.6rem; 21 | transform: rotate(10deg); 22 | } 23 | 24 | .logo-img { 25 | width: 4.5rem; 26 | height: 4.5rem; 27 | } 28 | 29 | .logo-bg { 30 | width: 4.5rem; 31 | height: 4.5rem; 32 | background: url(../images/logo.png) no-repeat; 33 | background-size: contain; 34 | } 35 | 36 | .border1px { 37 | width: 2.5rem; 38 | height: 2.5rem; 39 | border: 1PX solid #000; 40 | } -------------------------------------------------------------------------------- /gulp-rem-boilerplate/public/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 模板页 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
公共的header
18 |
19 |

20 | 21 |

22 | 23 |
24 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /gulp-rem-boilerplate/public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/gulp-rem-boilerplate/public/images/logo.png -------------------------------------------------------------------------------- /gulp-rem-boilerplate/public/js/rem.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Author: Strive 3 | * Date: 2017-12-8 4 | * Update: 2020-9-4 5 | */ 6 | (function(global){ 7 | function remChange(){ 8 | var d = document.documentElement; 9 | var winW = d.clientWidth; 10 | if(winW>=640){ 11 | d.style.fontSize = '40px' 12 | }else{ 13 | d.style.fontSize=20*winW/375+'px'; 14 | } 15 | } 16 | remChange(); 17 | global.addEventListener('resize',remChange,false); 18 | global.addEventListener('pageshow', function (e) { 19 | if (e.persisted) { 20 | remChange(); 21 | } 22 | }) 23 | })(window); -------------------------------------------------------------------------------- /gulp-rem-boilerplate/public/less/header.less: -------------------------------------------------------------------------------- 1 | header{ 2 | font-size: 30px; 3 | text-align: center; 4 | } -------------------------------------------------------------------------------- /gulp-rem-boilerplate/public/less/index.less: -------------------------------------------------------------------------------- 1 | * { 2 | margin : 0; 3 | padding: 0 4 | } 5 | 6 | body { 7 | user-select: none; 8 | width: 750px; 9 | margin: 0 auto; 10 | } 11 | 12 | #div1 { 13 | width : 690px; 14 | height : 290px; 15 | background : red; 16 | margin : 20px auto; 17 | border-radius: 24px; 18 | transform : rotate(10deg); 19 | } 20 | 21 | .logo { 22 | &-img { 23 | width : 180px; 24 | height: 180px; 25 | } 26 | } 27 | 28 | .logo-bg { 29 | width : 180px; 30 | height : 180px; 31 | background : url(../images/logo.png) no-repeat; 32 | background-size: contain; 33 | } 34 | 35 | .border1px { 36 | width : 100px; 37 | height : 100px; 38 | // border: 1px solid #000; /*no*/ 39 | border : 1PX solid #000; 40 | } -------------------------------------------------------------------------------- /gulp-rem-boilerplate/public/page/include/header.html: -------------------------------------------------------------------------------- 1 | 2 |
公共的header
-------------------------------------------------------------------------------- /gulp-rem-boilerplate/public/page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 模板页 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | @@include('./include/header.html') 17 |
18 |

19 | 20 |

21 | 22 |
23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "express": "^4.16.2" 4 | } 5 | } -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo1/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | let app = express(); 3 | 4 | app.get('/', function(req, res) { 5 | res.send('welcome express demo'); 6 | }); 7 | 8 | app.post('/', function(req, res) { 9 | res.send('一个post请求') 10 | }); 11 | 12 | app.put('/user', function(req, res) { 13 | res.send('一个put请求') 14 | }); 15 | 16 | app.delete('/user', function(req, res) { 17 | res.send('一个delte请求') 18 | }) 19 | 20 | app.use(express.static('www')); //静态文件，都放到www里面，比如ajax.html属于静态文件 21 | 22 | let server = app.listen(3000, function() { 23 | let host = server.address().address; 24 | let port = server.address().port; 25 | 26 | console.log('服务器起启动 在 http://%s%s', host, port); 27 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo1/www/ajax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 23 | 24 | -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo10-router/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "body-parser": "^1.18.2", 4 | "consolidate": "^0.15.0", 5 | "cookie-parser": "^1.4.3", 6 | "cookie-session": "^2.0.0-beta.3", 7 | "express": "^4.16.2", 8 | "jade": "^1.11.0", 9 | "multer": "^1.3.0", 10 | "swig": "^1.4.2" 11 | } 12 | } -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo10-router/router/user.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | let router = express.Router(); 4 | 5 | module.exports = router; 6 | 7 | router.get('/',function(req,res){ 8 | res.render('user/index',{user:{name:'Strive', age:18}, message:'我是用户的主页面'}); 9 | }); 10 | 11 | router.get(/\/\d+/,function(req,res){ 12 | res.render('user/user_info',{info: req.url}); 13 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo10-router/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | let app = express(); 3 | const consolidate = require('consolidate'); 4 | 5 | //ejs调用 6 | app.engine('ejs', consolidate.ejs); 7 | app.set('views','views'); 8 | app.set('view engine', 'ejs'); 9 | 10 | app.get('/',(req,res)=>{ 11 | res.render('index',{title:'Strive',arr:['apple','banana','orange','tomato']}); 12 | }); 13 | app.use('/user',require('./router/user')); 14 | 15 | app.use(express.static('www')); 16 | 17 | let server = app.listen(3000, function () { 18 | let host = server.address().address; 19 | let port = server.address().port; 20 | 21 | console.log('服务器起启动 在 http://%s%s', host, port); 22 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo10-router/views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

欢迎用户: <%= title%>, 这里是网站首页...

11 | 16 | 用户信息 17 | 18 | -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo10-router/views/user/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

<%= message%>

11 |

用户:<%= user.name%>, 年龄: <%= user.age%>

12 | 17 | 18 | -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo10-router/views/user/user_info.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

用户详细信息

11 |

用户: <%= info%>

12 | 13 | -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo11-vhost/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | let app = express(); 3 | const vhost = require('vhost'); 4 | 5 | let www = express.Router(); 6 | 7 | www.get('/',function(req,res){ 8 | res.send('欢迎来到主站点') 9 | }); 10 | 11 | let bbs = express.Router(); 12 | bbs.get('/',function(req,res){ 13 | res.send('欢迎来到论坛站') 14 | }); 15 | 16 | app.use(vhost('a.com',www)); 17 | app.use(vhost('bbs.a.com',bbs)); 18 | 19 | let server = app.listen(3000, function () { 20 | let host = server.address().address; 21 | let port = server.address().port; 22 | 23 | console.log('服务器起启动 在 http://%s%s', host, port); 24 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "express": "^4.16.2" 4 | } 5 | } -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo2/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const fs = require('fs'); 3 | let app = express(); 4 | 5 | app.get('/ajax.html', function (req, res) { 6 | fs.readFile('www/ajax.html',(err,data)=>{ 7 | res.set('Content-Type','text/html'); 8 | res.send(data.toString()); 9 | }); 10 | }); 11 | 12 | app.get('/user',(req,res)=>{ 13 | res.send(req.query); 14 | }); 15 | 16 | let server = app.listen(3000, function () { 17 | let host = server.address().address; 18 | let port = server.address().port; 19 | 20 | console.log('服务器起启动 在 http://%s%s', host, port); 21 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo2/www/ajax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "express": "^4.16.2" 4 | } 5 | } -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo3/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const fs = require('fs'); 3 | let app = express(); 4 | 5 | app.get('/user',(req,res)=>{ 6 | res.send(req.query); 7 | }); 8 | 9 | app.use(express.static('www')); 10 | 11 | let server = app.listen(3000, function () { 12 | let host = server.address().address; 13 | let port = server.address().port; 14 | 15 | console.log('服务器起启动 在 http://%s%s', host, port); 16 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo3/www/ajax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo4-session/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "body-parser": "^1.18.2", 4 | "cookie-parser": "^1.4.3", 5 | "cookie-session": "^2.0.0-beta.3", 6 | "express": "^4.16.2" 7 | } 8 | } -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo4-session/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | let app = express(); 3 | const cookieParser = require('cookie-parser'); 4 | const session = require('cookie-session'); 5 | 6 | app.use(cookieParser()); 7 | 8 | app.use(session({ 9 | name:'hi-sessid', //session的名字 10 | keys:['aa','bb','ccc'], 11 | maxAge:20*60*1000 12 | })); 13 | 14 | 15 | app.post(/^\/user/,(req,res)=>{ 16 | req.session.views=(req.session.views || 0)+1; 17 | res.send(req.session.views+'次'); 18 | }); 19 | 20 | app.use(express.static('www')); 21 | 22 | let server = app.listen(3000, function () { 23 | let host = server.address().address; 24 | let port = server.address().port; 25 | 26 | console.log('服务器起启动 在 http://%s%s', host, port); 27 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo4-session/www/ajax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo5-multer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "body-parser": "^1.18.2", 4 | "cookie-parser": "^1.4.3", 5 | "cookie-session": "^2.0.0-beta.3", 6 | "express": "^4.16.2", 7 | "multer": "^1.3.0" 8 | } 9 | } -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo5-multer/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const fs = require('fs'); 3 | let app = express(); 4 | const multerLib = require('multer'); 5 | let multer = multerLib({dest:'upload'}); 6 | 7 | app.use(multer.any()); 8 | 9 | 10 | app.post('/upload',(req,res)=>{ 11 | for (var i = 0; i < req.files.length; i++) { 12 | // 图片会放在uploads目录并且没有后缀，需要自己转存，用到fs模块 13 | // 对临时文件转存，fs.rename(oldPath, newPath,callback); 14 | fs.rename(req.files[i].path, "upload/" + (Date.now()+req.files[i].originalname), function(err) { 15 | if (err) { 16 | throw err; 17 | } 18 | res.send('图片上传成功'); 19 | }) 20 | } 21 | }); 22 | 23 | app.use(express.static('www')); 24 | 25 | let server = app.listen(3000, function () { 26 | let host = server.address().address; 27 | let port = server.address().port; 28 | 29 | console.log('服务器起启动 在 http://%s%s', host, port); 30 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo6-自己编写模板引擎/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | let app = express(); 3 | const fs = require('fs'); 4 | 5 | //编写模板引擎 6 | app.engine('hi',function(filePath, options, callback){ 7 | fs.readFile(filePath,function(err,content){ 8 | if(err) callback(new Error(err)); 9 | 10 | //只是演示，写一个非常简单的模板引擎 11 | let reg=/\$\{(\w+)\}/g; 12 | let rendered=content.toString().replace(reg,function(s){ 13 | //s -> ${title} 14 | s=s.substring(2, s.length-1); 15 | //console.log(s); 16 | return options[s]; 17 | }); 18 | 19 | return callback(null, rendered); 20 | }); 21 | }); 22 | 23 | app.set('views','views'); 24 | app.set('view engine','hi'); 25 | 26 | app.get('/',(req,res)=>{ 27 | res.render('index.hi',{title:'Strive',message:'我是message信息'}); 28 | }); 29 | 30 | app.use(express.static('www')); 31 | 32 | let server = app.listen(3000, function () { 33 | let host = server.address().address; 34 | let port = server.address().port; 35 | 36 | console.log('服务器起启动 在 http://%s%s', host, port); 37 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo6-自己编写模板引擎/views/index.hi: -------------------------------------------------------------------------------- 1 |

${title}

2 | 3 | ${message} -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo7-jade/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | let app = express(); 3 | const fs = require('fs'); 4 | const jade = require('jade'); 5 | 6 | app.engine('jade', require('jade').__express); 7 | 8 | app.set('views','views'); 9 | app.set('view engine', 'jade'); 10 | 11 | app.get('/',(req,res)=>{ 12 | res.render('index.jade',{title:'Strive',message:'我是message信息'}); 13 | }); 14 | 15 | app.use(express.static('www')); 16 | 17 | let server = app.listen(3000, function () { 18 | let host = server.address().address; 19 | let port = server.address().port; 20 | 21 | console.log('服务器起启动 在 http://%s%s', host, port); 22 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo7-jade/views/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title #{title} 5 | 6 | body 7 | h3 #{message} 8 | - var arr=['apple','banana','orange']; 9 | ul 10 | each val,index in arr 11 | li= index+', '+val -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo8-ejs/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | let app = express(); 3 | 4 | //模板引擎 5 | app.engine('ejs', require('ejs').renderFile); 6 | app.set('views','views'); 7 | app.set('view engine', 'ejs'); 8 | 9 | app.get('/',(req,res)=>{ 10 | res.render('index',{title:'Strive',arr:['apple','banana','orange','tomato']}); 11 | }); 12 | 13 | app.use(express.static('www')); 14 | 15 | let server = app.listen(3000, function () { 16 | let host = server.address().address; 17 | let port = server.address().port; 18 | 19 | console.log('服务器起启动 在 http://%s%s', host, port); 20 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo8-ejs/views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= title%> 8 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo9-consolidate/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | let app = express(); 3 | 4 | const consolidate = require('consolidate'); 5 | 6 | /* 7 | //ejs调用 8 | app.engine('ejs', consolidate.ejs); 9 | app.set('views','views'); 10 | app.set('view engine', 'ejs'); 11 | */ 12 | 13 | //jade 14 | /* app.engine('jade', consolidate.jade); //第一个参数为模板文件 后缀 15 | app.set('views','views'); 16 | app.set('view engine', 'jade'); */ 17 | 18 | //swig 19 | app.engine('swig', consolidate.swig); //以 swig结尾的模板，其实swig是以html结尾的 20 | app.set('views','views'); 21 | app.set('view engine', 'swig'); 22 | 23 | app.get('/',(req,res)=>{ 24 | res.render('index',{title:'Strive',arr:['apple','banana','orange','tomato']}); 25 | }); 26 | 27 | app.use(express.static('www')); 28 | 29 | let server = app.listen(3000, function () { 30 | let host = server.address().address; 31 | let port = server.address().port; 32 | 33 | console.log('服务器起启动 在 http://%s%s', host, port); 34 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo9-consolidate/views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= title%> 8 | 9 | 10 |

<%= title%>

11 | 16 | 17 | -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo9-consolidate/views/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title Jade Page 5 | body 6 | h3 #{title} 7 | 8 | ol 9 | each val,index in arr 10 | li= index+', '+val -------------------------------------------------------------------------------- /hi-wiki-demo/express/demo9-consolidate/views/index.swig: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{title}} 8 | 9 | 10 |

{{title}}

11 | 16 | 17 | -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo/app/404.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/hi-wiki-demo/webpack-demo/app/404.jpg -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo/app/a.js: -------------------------------------------------------------------------------- 1 | /*module.exports = function() { 2 | var oH2 = document.createElement('h2'); 3 | oH2.textContent = 'hello h2 ^_^'; 4 | return oH2; 5 | }*/ 6 | 7 | export default function() { 8 | var oH2 = document.createElement('h2'); 9 | oH2.textContent = 'hello h2 ^_^'; 10 | return oH2; 11 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo/app/index.js: -------------------------------------------------------------------------------- 1 | require('./main.scss'); 2 | //let $ = require('jquery'); 3 | import $ from 'jquery'; 4 | //import './plugin.js' 5 | import 'imports-loader?jQuery=jquery!./plugin.js'; 6 | 7 | //let moment = require('moment'); 8 | import moment from 'moment'; 9 | 10 | //let fnCreatedNode = require('./a'); 11 | import fnCreatedNode from './a'; 12 | 13 | let oDiv = document.createElement('div'); 14 | oDiv.innerHTML = '
welcome webpack
'; 15 | oDiv.appendChild(fnCreatedNode()); 16 | document.body.appendChild(oDiv); 17 | $('').appendTo('body').on('click', function() { 18 | var xhr = new XMLHttpRequest(); 19 | xhr.open('GET', 'joke?type=text', true); 20 | xhr.send(); 21 | xhr.onload = function() { 22 | if (xhr.readyState == 4 && xhr.status == 200) { 23 | console.log('成功了') 24 | } 25 | }; 26 | xhr.onerror = function() { 27 | console.log('发生错误了') 28 | }; 29 | }); 30 | $('body').append(`

时间为:${moment().format()}

`); 31 | 32 | $('p').greenify(); -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo/app/main.css: -------------------------------------------------------------------------------- 1 | h2{ 2 | color:red; 3 | } 4 | div{ 5 | background: #ccc; 6 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo/app/main.scss: -------------------------------------------------------------------------------- 1 | @import './variables.scss'; 2 | 3 | h2{ 4 | color:$red; 5 | height:180px; 6 | background:url(404.jpg); 7 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo/app/plugin.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | const color = '#556b2f'; 3 | $.fn.greenify = function() { 4 | this.css('color', color); 5 | return this; 6 | }; 7 | })(jQuery) -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo/app/variables.scss: -------------------------------------------------------------------------------- 1 | $red:red; -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "build": "webpack --progress --profile --colors --config webpack.production.config.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.0", 15 | "babel-loader": "^7.1.2", 16 | "babel-preset-env": "^1.6.1", 17 | "babel-preset-es2015": "^6.24.1", 18 | "css-loader": "^0.28.7", 19 | "file-loader": "^1.1.5", 20 | "html-webpack-plugin": "^2.30.1", 21 | "imports-loader": "^0.7.1", 22 | "jquery": "^3.2.1", 23 | "moment": "^2.19.2", 24 | "node-sass": "^4.6.1", 25 | "sass-loader": "^6.0.6", 26 | "style-loader": "^0.19.0", 27 | "url-loader": "^0.6.2", 28 | "webpack": "^3.8.1", 29 | "webpack-dev-server": "^2.9.4" 30 | } 31 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/app/404.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/hi-wiki-demo/webpack-demo2/app/404.jpg -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/app/a.js: -------------------------------------------------------------------------------- 1 | /*module.exports = function() { 2 | var oH2 = document.createElement('h2'); 3 | oH2.textContent = 'hello h2 ^_^'; 4 | return oH2; 5 | }*/ 6 | 7 | export default function() { 8 | var oH2 = document.createElement('h2'); 9 | oH2.textContent = 'hello h2 ^_^'; 10 | return oH2; 11 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/app/index.js: -------------------------------------------------------------------------------- 1 | require('./main.scss'); 2 | //let $ = require('jquery'); 3 | import $ from 'jquery'; 4 | //import './plugin.js' 5 | import 'imports-loader?jQuery=jquery!./plugin.js'; 6 | 7 | //let moment = require('moment'); 8 | import moment from 'moment'; 9 | 10 | //let fnCreatedNode = require('./a'); 11 | import fnCreatedNode from './a'; 12 | 13 | let oDiv = document.createElement('div'); 14 | oDiv.innerHTML = '
welcome webpack
'; 15 | oDiv.appendChild(fnCreatedNode()); 16 | document.body.appendChild(oDiv); 17 | $('').appendTo('body').on('click', function() { 18 | var xhr = new XMLHttpRequest(); 19 | xhr.open('GET', 'joke?type=text', true); 20 | xhr.send(); 21 | xhr.onload = function() { 22 | if (xhr.readyState == 4 && xhr.status == 200) { 23 | console.log('成功了') 24 | } 25 | }; 26 | xhr.onerror = function() { 27 | console.log('发生错误了') 28 | }; 29 | }); 30 | $('body').append(`

时间为:${moment().format()}

`); 31 | 32 | $('p').greenify(); -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/app/main.css: -------------------------------------------------------------------------------- 1 | h2{ 2 | color:red; 3 | } 4 | div{ 5 | background: #ccc; 6 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/app/main.scss: -------------------------------------------------------------------------------- 1 | @import './variables.scss'; 2 | 3 | h2{ 4 | color:$red; 5 | height:180px; 6 | background:url(404.jpg); 7 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/app/mobile.js: -------------------------------------------------------------------------------- 1 | import './main.scss'; 2 | import $ from 'jquery'; 3 | import 'imports-loader?jQuery=jquery!./plugin.js'; 4 | 5 | $(document).ready(function() { 6 | let box = document.createElement('div'); 7 | box.innerHTML = '

hello Mobile

'; 8 | document.body.appendChild(box); 9 | 10 | $('h1').greenify(); 11 | }); -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/app/plugin.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | const color = '#556b2f'; 3 | $.fn.greenify = function() { 4 | this.css('color', color); 5 | return this; 6 | }; 7 | })(jQuery) -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/app/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <%= htmlWebpackPlugin.options.title %> 6 | 7 | 8 |

welcome to webpack

9 | 10 | -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/app/templates/mobile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <%= htmlWebpackPlugin.options.title %> 6 | 7 | 8 |

welcome to mobile page

9 | 10 | -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/app/variables.scss: -------------------------------------------------------------------------------- 1 | $red:red; -------------------------------------------------------------------------------- /hi-wiki-demo/webpack-demo2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "start": "webpack-dev-server", 8 | "build": "webpack --progress --profile --colors --config webpack.production.config.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.0", 15 | "babel-loader": "^7.1.2", 16 | "babel-preset-env": "^1.6.1", 17 | "babel-preset-es2015": "^6.24.1", 18 | "css-loader": "^0.28.7", 19 | "file-loader": "^1.1.5", 20 | "html-loader": "^0.5.1", 21 | "html-webpack-plugin": "^2.30.1", 22 | "imports-loader": "^0.7.1", 23 | "jquery": "^3.2.1", 24 | "moment": "^2.19.2", 25 | "node-sass": "^4.6.1", 26 | "sass-loader": "^6.0.6", 27 | "style-loader": "^0.19.0", 28 | "url-loader": "^0.6.2", 29 | "webpack": "^3.8.1", 30 | "webpack-dev-server": "^2.9.4" 31 | } 32 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "react" 5 | ] 6 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"Strive" 3 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports={ 2 | plugins:[ 3 | require('autoprefixer') 4 | ] 5 | }; -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/src/assets/js/index.js: -------------------------------------------------------------------------------- 1 | alert('welcome to china'); -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/hi-wiki-demo/webpack4.x/src/assets/logo.png -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/src/entry.js: -------------------------------------------------------------------------------- 1 | import './css/index.css' 2 | import './less/index.less' 3 | import './sass/index.scss' 4 | import fn from './js/a.js' 5 | import json from '../config.json' 6 | console.log(json); 7 | //import $ from 'jquery' 8 | let imgSrc = require('./images/404.jpg'); 9 | 10 | let oImg =new Image(); 11 | 12 | oImg.src=imgSrc; 13 | 14 | oImg.onload=function(){ 15 | document.body.appendChild(oImg); 16 | }; 17 | 18 | class Person{ 19 | constructor(name){ 20 | this.name = name; 21 | } 22 | showName(){ 23 | return `我的名字为${this.name}`; 24 | } 25 | } 26 | let p1 = new Person('Strive'); 27 | 28 | //document.write(`输出 ${p1.showName()}, ${fn}`); 29 | 30 | // let str=`

welcome to China

`; 31 | 32 | // $(str).append('body'); 33 | 34 | -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/src/images/404.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/hi-wiki-demo/webpack4.x/src/images/404.jpg -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= htmlWebpackPlugin.options.title %> 7 | 8 | 10 | 12 | 13 | 14 |
15 |
16 | welcome to china 17 | welcome to china 18 | 19 | -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/src/js/a.js: -------------------------------------------------------------------------------- 1 | function aaa(){ 2 | return ( 3 |
4 |

welcome

5 |
6 | ) 7 | } 8 | 9 | export const a = 12; 10 | export const b = 5; 11 | export default aaa; 12 | -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/src/less/index.less: -------------------------------------------------------------------------------- 1 | @color:#000; 2 | 3 | #color{ 4 | color:@color; 5 | } -------------------------------------------------------------------------------- /hi-wiki-demo/webpack4.x/src/sass/index.scss: -------------------------------------------------------------------------------- 1 | $color:#fff; 2 | #color2{ 3 | color:$color; 4 | } -------------------------------------------------------------------------------- /html5-api/html5-api-websocket.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | html5-api webSocket 6 | 9 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /html5-api/html5震动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 28 | 29 | -------------------------------------------------------------------------------- /html5-api/server.js: -------------------------------------------------------------------------------- 1 | var SockServer=require('ws').Server; 2 | 3 | var ws=new SockServer({port:8081}); 4 | 5 | ws.on('connection',function(s){ 6 | //s 客户端的 sock对象 7 | s.on('message',function(msg){ 8 | console.log('接收:',msg); 9 | 10 | s.send(msg+10); //给客户端返回东西 11 | }); 12 | }); 13 | ws.on('error',function(err){ 14 | console.log(err); 15 | }); -------------------------------------------------------------------------------- /img-lazyload/lazyload.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /jquery-cropper图像裁剪/m.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/jquery-cropper图像裁剪/m.jpg -------------------------------------------------------------------------------- /jquery-deferred/a.txt: -------------------------------------------------------------------------------- 1 | 123 -------------------------------------------------------------------------------- /jquery-deferred/b.txt: -------------------------------------------------------------------------------- 1 | 456 -------------------------------------------------------------------------------- /jquery-deferred/deferred.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /jquery-deferred/deferred10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /jquery-deferred/deferred2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /jquery-deferred/deferred3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /jquery-deferred/deferred4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /jquery-deferred/deferred5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /jquery-deferred/deferred6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /jquery-deferred/deferred7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /jquery-deferred/deferred8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /jquery-deferred/deferred9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /jquery-load/load.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /jquery-load/load2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /jquery-load/load3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 11 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /jquery-load/load4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 11 | 12 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /jquery-load/load5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 11 | 12 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /jquery-load/load6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 11 | 12 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /jquery-load/php1.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /jquery-load/php2.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /jquery-load/php3.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /jquery-load/php4.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /jquery-load/tpl.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /jquery-load/tpl2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 奋斗网— http://www.itstrive.com 8 | 10 | 13 | 14 | 15 | 16 |
17 |
    18 |
  1. 1111页面更新了
    2. 19 |
  2. 222
    3. 20 |
  3. 3333
    4. 21 |
  4. 4444
    5. 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /jquery-mobile-demo/res/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/jquery-mobile-demo/res/1.jpg -------------------------------------------------------------------------------- /jquery-mobile-demo/res/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/jquery-mobile-demo/res/2.jpg -------------------------------------------------------------------------------- /jquery-mobile-demo/res/images/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/jquery-mobile-demo/res/images/ajax-loader.gif -------------------------------------------------------------------------------- /jquery-mobile-demo/res/images/icons-18-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/jquery-mobile-demo/res/images/icons-18-black.png -------------------------------------------------------------------------------- /jquery-mobile-demo/res/images/icons-18-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/jquery-mobile-demo/res/images/icons-18-white.png -------------------------------------------------------------------------------- /jquery-mobile-demo/res/images/icons-36-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/jquery-mobile-demo/res/images/icons-36-black.png -------------------------------------------------------------------------------- /jquery-mobile-demo/res/images/icons-36-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/jquery-mobile-demo/res/images/icons-36-white.png -------------------------------------------------------------------------------- /jquery-tab/jquery-tab-1.8.6.js: -------------------------------------------------------------------------------- 1 | /* 2 | @Author:xxx 3 | @Date: 4 | @Licence:MIT 5 | */ 6 | ;(function($){ 7 | $.fn.tab=function(json){ 8 | json=json || {}; 9 | json.sEvent=json.sEvent || 'click'; 10 | json.autoPlay=json.autoPlay || false; 11 | json.playTime=json.playTime || 3000; 12 | 13 | this.each(function(index,element){ 14 | var iNow=0; 15 | var timer=null; 16 | 17 | var aBtn=$(this).find('input'); 18 | var aDiv=$(this).find('div'); 19 | aBtn[json.sEvent](function(){ 20 | iNow=$(this).index(); 21 | tab(); 22 | }); 23 | 24 | function tab(){ 25 | aBtn.removeClass('on'); 26 | aBtn.eq(iNow).addClass('on'); 27 | aDiv.hide(); 28 | aDiv.eq(iNow).show(); 29 | } 30 | 31 | //编写自动播放 32 | if(!json.autoPlay)return; 33 | function next(){ 34 | iNow++; 35 | if(iNow==aBtn.length)iNow=0; 36 | tab(); 37 | } 38 | timer=setInterval(next,json.playTime); 39 | 40 | $(this).mouseover(function(){ 41 | clearInterval(timer); 42 | }); 43 | $(this).mouseout(function(){ 44 | timer=setInterval(next,json.playTime); 45 | }); 46 | }); 47 | }; 48 | })($); -------------------------------------------------------------------------------- /jquery-tab/readme.md: -------------------------------------------------------------------------------- 1 | This is jqueyr plugin tab, 2 | 3 | $(selector).tab(); 4 | $(selector).tab({ 5 | sEvent:click/mouseover, 6 | autoPlay:true/false, 7 | playTime:time ms 8 | }) 9 | 10 | LICENCE MIT 11 | -------------------------------------------------------------------------------- /jsmpeg-demo/readme.md: -------------------------------------------------------------------------------- 1 | 使用 jsmpeg 直播抓娃娃(观众端) 2 | 3 | -------------------------------------------------------------------------------- /node-Knowledge-points/file-down-demo/download.js: -------------------------------------------------------------------------------- 1 | var fs=require('fs'); 2 | var http=require('http'); 3 | 4 | function fileName(){ 5 | var oDate=new Date(); 6 | return oDate.getFullYear()+''+(oDate.getMonth()+1)+oDate.getDate()+''+oDate.getHours()+''+oDate.getMinutes()+''+oDate.getSeconds()+''+oDate.getTime(); 7 | } 8 | 9 | http.createServer(function(req,res){ 10 | fs.readFile('www'+req.url,function(err,data){ 11 | if(err){ 12 | res.end('404'); 13 | }else{ 14 | res.writeHeader(200,{ 15 | 'content-disposition':'attachment;filename="'+fileName()+'.txt"' 16 | }); 17 | res.end(data); 18 | } 19 | }); 20 | }).listen(8081); -------------------------------------------------------------------------------- /node-Knowledge-points/file-down-demo/download2.js: -------------------------------------------------------------------------------- 1 | 2 | var fs=require('fs'); 3 | var http=require('http'); 4 | 5 | function fileName(){ 6 | var oDate=new Date(); 7 | return oDate.getFullYear()+''+(oDate.getMonth()+1)+oDate.getDate()+''+oDate.getHours()+''+oDate.getMinutes()+''+oDate.getSeconds()+''+oDate.getTime(); 8 | } 9 | 10 | 11 | http.createServer(function(req,res){ 12 | var path='www'+req.url; 13 | 14 | fs.exists(path,function(b){ //判断文件是否存在 15 | if(b){ 16 | 17 | var rs=fs.createReadStream(path); 18 | 19 | res.writeHeader(200,{ 20 | 'content-disposition':'attachment;filename="'+fileName()+'".txt' 21 | }); 22 | 23 | rs.pipe(res); 24 | 25 | rs.on('error',function(){ 26 | console.log('404'); 27 | }); 28 | 29 | }else{ 30 | res.end('404'); 31 | } 32 | }); 33 | 34 | }).listen(8081); -------------------------------------------------------------------------------- /node-Knowledge-points/file-down-demo/www/1.txt: -------------------------------------------------------------------------------- 1 | welcome to China -------------------------------------------------------------------------------- /node-Knowledge-points/file-down-demo/www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 无标题文档 6 | 9 | 12 | 13 | 14 | 15 | 下载资料包 16 | 17 | 18 | -------------------------------------------------------------------------------- /node-Knowledge-points/npm-public-module/README.md: -------------------------------------------------------------------------------- 1 | 1. npm install pqs 2 | 2. var pqs=require('pqs'); 3 | 3. pqs.parsr(str); 4 | -------------------------------------------------------------------------------- /node-Knowledge-points/npm-public-module/index.js: -------------------------------------------------------------------------------- 1 | exports.parse=require('./pqs').pqs; -------------------------------------------------------------------------------- /node-Knowledge-points/npm-public-module/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pqs", 3 | "version": "1.0.1", 4 | "description": "pqs like node paserquerystring", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "strive_pqs", 11 | "parsequerystring" 12 | ], 13 | "author": "strive", 14 | "license": "MIT", 15 | "dependencies": {} 16 | } 17 | -------------------------------------------------------------------------------- /node-Knowledge-points/npm-public-module/pqs.js: -------------------------------------------------------------------------------- 1 | exports.pqs=function(str){ 2 | if(str.indexOf('&')==-1)return; 3 | var arr=str.split('&'); 4 | var json={}; 5 | for(var i=0; i 2 | 3 | 4 | 5 | QR-DEMO 6 | 10 | 11 | 26 | 27 | 28 | 29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /react-native-demo/RN-IOS-demo/demo1/ios_view/header.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | StyleSheet, 4 | Text, 5 | View, 6 | TabBarIOS 7 | } from 'react-native'; 8 | 9 | 10 | class Header extends Component{ 11 | componentDidMount(){ 12 | //alert(this.props.btnBack) 13 | if(this.props.btnBack){ 14 | alert(this.props.btnBack) 15 | } 16 | } 17 | render(){ 18 | return ( 19 | 20 | {this.props.title} Header 21 | 22 | ) 23 | } 24 | } 25 | 26 | const styles=StyleSheet.create({ 27 | headerBox:{ 28 | flexDirection:'row', 29 | height:40, 30 | alignItems:'center', 31 | justifyContent:'center', 32 | backgroundColor:'#282828' 33 | }, 34 | headerTitle:{ 35 | color:'#fff' 36 | } 37 | }); 38 | 39 | export default Header; -------------------------------------------------------------------------------- /react-native-demo/RN-IOS-demo/demo1/ios_view/more.js: -------------------------------------------------------------------------------- 1 | home.js -------------------------------------------------------------------------------- /react-native-demo/RN-IOS-demo/demo1/ios_view/news.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react' 2 | 3 | import { 4 | StyleSheet, 5 | View, 6 | Text, 7 | Button 8 | } from 'react-native' 9 | import Icon from 'react-native-vector-icons/Ionicons'; 10 | 11 | import Header from './header' 12 | 13 | class News extends Component{ 14 | _backChange=()=>{ 15 | this.props.navigator.pop(); 16 | } 17 | render(){ 18 | return ( 19 |
20 | 12 | 13 |

{{ $t("message.hello") }}

14 | 15 | 46 | 47 | -------------------------------------------------------------------------------- /vue-knowledge/vue2.0事件native的使用.md: -------------------------------------------------------------------------------- 1 | #### vue里面的事件 2 | 3 | ​ @click="show" 4 | 5 | ​ @click.enter="show" 6 | 7 | ​ ... 8 | 9 | #### @click.native的使用 10 | 11 | ```vue 12 | 13 | 14 | 15 | vue-demo 16 | 17 | 18 | 47 | 48 | 49 |
50 | 51 | 52 |
53 | {{msg}} 54 |
55 | 56 | 57 | ``` 58 | 59 | -------------------------------------------------------------------------------- /vue-knowledge/vue2.0使用jsx的语法.md: -------------------------------------------------------------------------------- 1 | 让vue支持jsx语法(不过好像真心没啥用，还不如直接用React) 2 | 3 | 不过还是简单说下用法: 4 | 5 | 1. 安装需要的模块(插件) 6 | 7 | ``` 8 | npm install 9 | babel-plugin-syntax-jsx 10 | babel-plugin-transform-vue-jsx 11 | babel-helper-vue-jsx-merge-props --save-dev 12 | ``` 13 | 14 | 2. 在babelrc里面配置东西 15 | 16 | ``` 17 | { 18 | "presets": ["es2015"], 19 | "plugins": ["transform-vue-jsx"] 20 | } 21 | ``` 22 | 23 | 3. 编写jsx代码 24 | 25 | ```vue 26 | import Vue from 'vue' 27 | import App from './App.vue' 28 | 29 | new Vue({ 30 | el: '#app', 31 | methods: { 32 | handleClick () { 33 | alert('Hello!') 34 | } 35 | }, 36 | render (h) { 37 | return ( 38 |
39 |

Hello from JSX

40 |

Hello World

41 | 42 |
43 | ) 44 | } 45 | }) 46 | ``` 47 | 48 | ​ -------------------------------------------------------------------------------- /vue-knowledge/vue注意的地方.md: -------------------------------------------------------------------------------- 1 | #### v-if和v-show? 2 | 3 | v-show作用在template标签上，不顶事，必须用v-if -------------------------------------------------------------------------------- /vue-router-demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /vue-router-demo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /vue-router-demo/README.md: -------------------------------------------------------------------------------- 1 | # vue-webpack-demo 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /vue-router-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-webpack-demo 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /vue-router-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-webpack-demo", 3 | "description": "A Vue.js project", 4 | "author": "strive ", 5 | "private": true, 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "dependencies": { 11 | "vue": "^1.0.0", 12 | "babel-runtime": "^6.0.0" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-plugin-transform-runtime": "^6.0.0", 18 | "babel-preset-es2015": "^6.0.0", 19 | "babel-preset-stage-2": "^6.0.0", 20 | "cross-env": "^1.0.6", 21 | "css-loader": "^0.23.0", 22 | "file-loader": "^0.8.4", 23 | "json-loader": "^0.5.4", 24 | "url-loader": "^0.5.7", 25 | "vue-hot-reload-api": "^1.2.0", 26 | "vue-html-loader": "^1.0.0", 27 | "vue-loader": "^8.2.1", 28 | "vue-router": "^0.7.13", 29 | "vue-style-loader": "^1.0.0", 30 | "webpack": "^1.12.2", 31 | "webpack-dev-server": "^1.12.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /vue-router-demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 18 | 32 | 35 | -------------------------------------------------------------------------------- /vue-router-demo/src/components/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /vue-router-demo/src/components/Detail.vue: -------------------------------------------------------------------------------- 1 | 6 | 9 | 12 | -------------------------------------------------------------------------------- /vue-router-demo/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 18 | 24 | -------------------------------------------------------------------------------- /vue-router-demo/src/components/Message.vue: -------------------------------------------------------------------------------- 1 | 8 | 10 | 19 | -------------------------------------------------------------------------------- /vue-router-demo/src/components/News.vue: -------------------------------------------------------------------------------- 1 | 13 | 15 | 29 | -------------------------------------------------------------------------------- /vue-router-demo/src/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by strive-智能社 on 2016/9/21. 3 | */ 4 | import Vue from 'vue' 5 | import VueRouter from 'vue-router' 6 | import routeConfig from './router-config' 7 | 8 | Vue.use(VueRouter); 9 | 10 | // create router 11 | const router = new VueRouter(); 12 | router.map(routeConfig); 13 | const App = Vue.extend(require('./App.vue')); 14 | router.start(App, '#box'); 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 | -------------------------------------------------------------------------------- /vue-router-demo/src/router-config.js: -------------------------------------------------------------------------------- 1 | import Home from './components/Home.vue' 2 | import About from './components/About.vue' 3 | import News from './components/News.vue'; 4 | import Mess from './components/Message.vue'; 5 | import Detail from './components/Detail.vue'; 6 | 7 | export default { 8 | 'home': { 9 | component: Home, 10 | subRoutes:{ 11 | 'news':{ 12 | component:News, 13 | subRoutes:{ 14 | 'detail/:id':{ 15 | component:Detail 16 | } 17 | } 18 | }, 19 | 'message':{ 20 | component:Mess 21 | } 22 | } 23 | }, 24 | 'about': { 25 | component: About 26 | } 27 | } -------------------------------------------------------------------------------- /vue-todolist-webpack-vue-loader/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /vue-todolist-webpack-vue-loader/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /vue-todolist-webpack-vue-loader/README.md: -------------------------------------------------------------------------------- 1 | # vue-webpack-demo 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /vue-todolist-webpack-vue-loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-webpack-demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /vue-todolist-webpack-vue-loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-webpack-demo", 3 | "description": "A Vue.js project", 4 | "author": "strive ", 5 | "private": true, 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "dependencies": { 11 | "vue": "^1.0.0", 12 | "babel-runtime": "^6.0.0" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-plugin-transform-runtime": "^6.0.0", 18 | "babel-preset-es2015": "^6.0.0", 19 | "babel-preset-stage-2": "^6.0.0", 20 | "cross-env": "^1.0.6", 21 | "css-loader": "^0.23.0", 22 | "file-loader": "^0.8.4", 23 | "json-loader": "^0.5.4", 24 | "url-loader": "^0.5.7", 25 | "vue-hot-reload-api": "^1.2.0", 26 | "vue-html-loader": "^1.0.0", 27 | "vue-loader": "^8.2.1", 28 | "vue-router": "^0.7.13", 29 | "vue-style-loader": "^1.0.0", 30 | "webpack": "^1.12.2", 31 | "webpack-dev-server": "^1.12.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /vue-todolist-webpack-vue-loader/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 7 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /vue-todolist-webpack-vue-loader/src/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by strive-智能社 on 2016/9/21. 3 | */ 4 | import Vue from 'vue'; 5 | import App from './App.vue'; 6 | 7 | new Vue({ 8 | el:'body', 9 | components:{ 10 | App 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 | -------------------------------------------------------------------------------- /vue-todolist/demo-jsonp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-jsonp 6 | 7 | 8 | 33 | 34 | 35 |
36 | 37 |
38 | 39 | -------------------------------------------------------------------------------- /vue-todolist/demo-jsonp2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-jsonp 6 | 7 | 8 | 42 | 43 | 44 |
45 | 46 |
47 | 48 | -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/README.md: -------------------------------------------------------------------------------- 1 | # vue-mintui-demo 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | 20 | ------ 21 | 22 | #### Mint-ui+vue-router 的简单Demo 23 | 24 | ``` 25 | http://mint-ui.github.io/docs/#!/zh-cn2 mint-ui API 26 | ``` 27 | 28 | ![](src/assets/detail.png) -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-mintui-demo 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-mintui-demo", 3 | "description": "A Vue.js project", 4 | "author": "strive ", 5 | "private": true, 6 | "scripts": { 7 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --port 8085", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "dependencies": { 11 | "mint-ui": "^2.0.2", 12 | "vue": "^2.0.1", 13 | "vue-router": "^2.0.1" 14 | }, 15 | "devDependencies": { 16 | "autoprefixer-loader": "^3.2.0", 17 | "babel-core": "^6.0.0", 18 | "babel-loader": "^6.0.0", 19 | "babel-preset-es2015": "^6.0.0", 20 | "cross-env": "^3.0.0", 21 | "css-loader": "^0.25.0", 22 | "file-loader": "^0.9.0", 23 | "style-loader": "^0.13.1", 24 | "vue-loader": "^9.7.0", 25 | "webpack": "^2.1.0-beta.25", 26 | "webpack-dev-server": "^2.1.0-beta.0" 27 | } 28 | } -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/src/assets/100x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/vue2.0-Mint-ui-demo/src/assets/100x100.png -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/src/assets/detail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/vue2.0-Mint-ui-demo/src/assets/detail.png -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/vue2.0-Mint-ui-demo/src/assets/logo.png -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/src/components/Other.vue: -------------------------------------------------------------------------------- 1 | 31 | -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/src/components/Other2.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /vue2.0-Mint-ui-demo/src/main.js: -------------------------------------------------------------------------------- 1 | //http://mint-ui.github.io/docs/#!/zh-cn2 mint-ui API 2 | import Vue from 'vue' 3 | import VueRouter from 'vue-router' 4 | import Mint from 'mint-ui' 5 | import 'mint-ui/lib/style.css' 6 | import App from './App.vue' 7 | 8 | import Other from './components/Other.vue' 9 | import Other2 from './components/Other2.vue' 10 | import Home from './components/Home.vue' 11 | 12 | Vue.use(Mint); 13 | Vue.use(VueRouter); 14 | 15 | const router=new VueRouter({ 16 | routes:[ 17 | {path:'/other', component:Other}, 18 | {path:'/other2', component:Other2}, 19 | {path:'/home', component:Home} 20 | ] 21 | }); 22 | 23 | new Vue({ 24 | router, 25 | el: '#app', 26 | render: h => h(App) 27 | }) 28 | -------------------------------------------------------------------------------- /vue2.0-knowledge-demo/custom-global-component/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 12 | -------------------------------------------------------------------------------- /vue2.0-knowledge-demo/custom-global-component/components/loading/Loading.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /vue2.0-knowledge-demo/custom-global-component/components/loading/index.js: -------------------------------------------------------------------------------- 1 | import LoadingComponent from './Loading.vue' 2 | 3 | const Loading={ 4 | install:function(Vue){ 5 | Vue.component('Loading', LoadingComponent) 6 | } 7 | } 8 | 9 | export default Loading 10 | -------------------------------------------------------------------------------- /vue2.0-knowledge-demo/custom-global-component/components/tabs/index.js: -------------------------------------------------------------------------------- 1 | import TabComponent from './Tabs.vue' 2 | 3 | const Tabs={ 4 | install:function(Vue){ 5 | Vue.component('tabs', TabComponent); 6 | } 7 | } 8 | 9 | export default Tabs; -------------------------------------------------------------------------------- /vue2.0-knowledge-demo/custom-global-component/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import Loading from './components/loading' 5 | import tabs from './components/tabs' 6 | 7 | Vue.use(Loading); 8 | Vue.use(tabs); 9 | 10 | new Vue({ 11 | el:'#app', 12 | render:h=>h(App) 13 | }) -------------------------------------------------------------------------------- /vue2.0-router-demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /vue2.0-router-demo/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /vue2.0-router-demo/README.md: -------------------------------------------------------------------------------- 1 | # vue2-router-demo3 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /vue2.0-router-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue2-router-demo3 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /vue2.0-router-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-router-demo3", 3 | "description": "A Vue.js project", 4 | "author": "strive ", 5 | "private": true, 6 | "scripts": { 7 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot --port 8085", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.0.1", 12 | "vue-router": "^2.0.1" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^6.0.0", 16 | "babel-loader": "^6.0.0", 17 | "babel-preset-es2015": "^6.0.0", 18 | "cross-env": "^3.0.0", 19 | "css-loader": "^0.25.0", 20 | "file-loader": "^0.9.0", 21 | "vue-loader": "^9.7.0", 22 | "webpack": "^2.1.0-beta.25", 23 | "webpack-dev-server": "^2.1.0-beta.0" 24 | } 25 | } -------------------------------------------------------------------------------- /vue2.0-router-demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 14 | 15 | 21 | -------------------------------------------------------------------------------- /vue2.0-router-demo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/vue2.0-router-demo/src/assets/logo.png -------------------------------------------------------------------------------- /vue2.0-router-demo/src/components/About.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vue2.0-router-demo/src/components/Home.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vue2.0-router-demo/src/components/News.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /vue2.0-router-demo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import App from './App.vue' 4 | import routerConfig from './router.config.js' 5 | 6 | Vue.use(VueRouter); 7 | 8 | const router = new VueRouter(routerConfig); 9 | 10 | new Vue({ 11 | router, 12 | el: '#app', 13 | render: h => h(App) 14 | }) 15 | -------------------------------------------------------------------------------- /vue2.0-router-demo/src/router.config.js: -------------------------------------------------------------------------------- 1 | import Home from './components/home.vue' 2 | import About from './components/about.vue' 3 | import News from './components/news.vue' 4 | 5 | export default{ 6 | mode: 'history', 7 | routes: [ 8 | {path: '/home', component: Home}, 9 | {path: '/about', component: About}, 10 | {path: '/news', component: News}, 11 | {path: '*', redirect: '/home'}, 12 | ] 13 | } -------------------------------------------------------------------------------- /vuex-demo/1/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 27 | -------------------------------------------------------------------------------- /vuex-demo/1/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import store from './store.js' 5 | 6 | new Vue({ 7 | store, 8 | el:'#app', 9 | render:h=>h(App) 10 | }) -------------------------------------------------------------------------------- /vuex-demo/1/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex); 5 | 6 | const state={ 7 | count:10 8 | }; 9 | 10 | const mutations = { 11 | increment(state){ 12 | state.count++; 13 | }, 14 | decrement(state){ 15 | state.count--; 16 | } 17 | }; 18 | 19 | const actions = { 20 | increment:({commit})=>{commit('increment')}, 21 | decrement:({commit})=>{commit('decrement')}, 22 | clickEven:({commit, state})=>{ 23 | if(state.count%2==0){ 24 | commit('increment') 25 | } 26 | }, 27 | clickAsync:({commit, state})=>{ 28 | return new Promise((resolve)=>{ 29 | setTimeout(function(){ 30 | commit('increment'); 31 | resolve(); 32 | },1000); 33 | }); 34 | } 35 | }; 36 | 37 | const getters={ 38 | evenOrOdd:(state)=>{ 39 | return state.count%2?'奇数':'偶数' 40 | } 41 | }; 42 | 43 | 44 | export default new Vuex.Store({ 45 | state, 46 | mutations, 47 | actions, 48 | getters 49 | }) -------------------------------------------------------------------------------- /vue双向绑定揭秘/1-最简单的双向绑定实现.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 |
9 | 10 |
11 |
12 | 13 | 28 | 29 | -------------------------------------------------------------------------------- /vue双向绑定揭秘/2-vue双向绑定实现.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 |
9 | 10 | 11 |
12 | 13 | 29 | 30 | -------------------------------------------------------------------------------- /vue双向绑定揭秘/8-vue中事件的实现2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 |
10 | 11 |

{{text}}

12 |
13 | 14 | 27 | 28 | -------------------------------------------------------------------------------- /vue双向绑定揭秘/MVVM/mvvm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |

{{text}}

15 | {{text}} 16 |
17 | 18 | 31 | 32 | -------------------------------------------------------------------------------- /vue双向绑定揭秘/MVVM/mvvm.js: -------------------------------------------------------------------------------- 1 | function Vue(options) { 2 | this.data = options.data; 3 | this.methods = options.methods; 4 | //observer 5 | this.observer = new Observer(this.data, this); 6 | //compile 7 | this.compile = new Compile(options.el, this); 8 | } -------------------------------------------------------------------------------- /vue双向绑定揭秘/MVVM/observer.js: -------------------------------------------------------------------------------- 1 | function Observer(data, vm) { 2 | this.data = data; 3 | this.vm = vm; 4 | this.init(); 5 | } 6 | Observer.prototype = { 7 | init: function() { 8 | Object.keys(this.data).forEach(key => { //数据劫持 9 | this._proxyData(key) 10 | }); 11 | }, 12 | _proxyData: function(key) { 13 | let dep = new Dep(); 14 | 15 | let vm = this.vm; 16 | Object.defineProperty(vm, key, { 17 | get: function() { 18 | Dep.target && dep.addSub(Dep.target); 19 | return vm.data[key]; 20 | }, 21 | set: function(newVal) { 22 | vm.data[key] = newVal; 23 | 24 | dep.notify(); 25 | } 26 | }); 27 | } 28 | }; 29 | 30 | function Dep() { 31 | this.subs = []; 32 | } 33 | Dep.prototype = { 34 | addSub: function(sub) { 35 | this.subs.push(sub); 36 | }, 37 | notify: function() { 38 | this.subs.forEach(sub => { 39 | sub.update(); 40 | }); 41 | } 42 | }; -------------------------------------------------------------------------------- /vue双向绑定揭秘/MVVM/watcher.js: -------------------------------------------------------------------------------- 1 | function Watcher(vm, exp, fnCb) { 2 | Dep.target = this; 3 | this.vm = vm; 4 | this.exp = exp; 5 | this.cb = fnCb; 6 | this.update(); //初始化，把watcher添加到dep里面，发送通知 7 | Dep.target = null; 8 | } 9 | Watcher.prototype = { 10 | update: function() { 11 | this.cb.call(this.vm, this.vm[this.exp]); 12 | } 13 | }; -------------------------------------------------------------------------------- /vue双向绑定揭秘/订阅-发布模式.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 35 | 36 | -------------------------------------------------------------------------------- /web-knowledge/ES2016-demo/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /web-knowledge/ES2016-demo/1/index.js: -------------------------------------------------------------------------------- 1 | document.write('welcome ES2016') -------------------------------------------------------------------------------- /web-knowledge/ES2016-demo/1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ES2016-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --env.dev --hot --inline --open --port 8088", 8 | "build": "webpack" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "webpack": "^3.0.0", 15 | "webpack-dev-server": "^2.5.0" 16 | } 17 | } -------------------------------------------------------------------------------- /web-knowledge/ES2016-demo/1/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = options => { 2 | return { 3 | entry: './index.js', 4 | output: { 5 | filename: 'bundle.js' 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /web-knowledge/ES2016-demo/2/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", {"modules": false}], 4 | "stage-1", 5 | "react" 6 | ], 7 | "plugins": [ 8 | "transform-runtime" 9 | ] 10 | } -------------------------------------------------------------------------------- /web-knowledge/ES2016-demo/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /web-knowledge/ES2016-demo/2/index.js: -------------------------------------------------------------------------------- 1 | class Foo { 2 | static bar = 'hello'; 3 | 4 | static show() { 5 | alert(this.bar); 6 | } 7 | } 8 | 9 | console.log(Foo.bar); 10 | Foo.show(); -------------------------------------------------------------------------------- /web-knowledge/ES2016-demo/2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ES2016-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --env.dev --hot --inline --open --port 8088", 8 | "build": "webpack" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.25.0", 15 | "babel-loader": "^7.1.0", 16 | "babel-plugin-transform-runtime": "^6.23.0", 17 | "babel-preset-env": "^1.5.2", 18 | "babel-preset-react": "^6.24.1", 19 | "babel-preset-stage-1": "^6.24.1", 20 | "webpack": "^3.0.0", 21 | "webpack-dev-server": "^2.5.0" 22 | }, 23 | "dependencies": { 24 | "babel-runtime": "^6.23.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /web-knowledge/ES2016-demo/2/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = options => { 2 | return { 3 | entry: './index.js', 4 | output: { 5 | filename: 'bundle.js', 6 | }, 7 | module: { 8 | rules: [{ 9 | test: /.js$/, 10 | exclude: /node_modules/, 11 | use: [{ 12 | loader: 'babel-loader', 13 | options: { 14 | cacheDirectory: true, 15 | }, 16 | }, ], 17 | }, ], 18 | }, 19 | } 20 | } -------------------------------------------------------------------------------- /web-knowledge/assets/images/h5-element-type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/web-knowledge/assets/images/h5-element-type.png -------------------------------------------------------------------------------- /web-knowledge/assets/images/test1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/web-knowledge/assets/images/test1.png -------------------------------------------------------------------------------- /web-knowledge/assets/images/test2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/web-knowledge/assets/images/test2.png -------------------------------------------------------------------------------- /web-knowledge/assets/images/test3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/web-knowledge/assets/images/test3.png -------------------------------------------------------------------------------- /web-knowledge/assets/images/test4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/web-knowledge/assets/images/test4.png -------------------------------------------------------------------------------- /web-knowledge/assets/images/test5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/web-knowledge/assets/images/test5.png -------------------------------------------------------------------------------- /web-knowledge/assets/images/xhtml.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itstrive/striveCode/211312353c458a81e286d63eb11ae53cad67ef8a/web-knowledge/assets/images/xhtml.png -------------------------------------------------------------------------------- /web-knowledge/vue-cli打包相对路径和背景图片.md: -------------------------------------------------------------------------------- 1 | vue-cli 打包部署相信大家肯定都会, 一个命令 `npm run build` 就可以 2 | 3 | 但是, 会遇到问题，可以往下看: 4 | 5 | #### 打包资源相对引用: 6 | 7 | 一般情况下，通过 `webpack + vue-cli` 默认打包的`css` `js` 等资源，路径都是绝对的 8 | 9 | ![](http://oxyhnxrzt.bkt.clouddn.com/vue-2.png) 10 | 11 | 但当部署到带有文件夹的项目中， 这种路径就会出现问题， 因为 把配置的 `static` 文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。 12 | 13 | #### 解决办法 14 | 15 | 打开: `webpack.prod.conf.js` 16 | 17 | 找到: `output` 增加 `publicPath:'/'` 即可，如图: 18 | 19 | ![](http://oxyhnxrzt.bkt.clouddn.com/vue-1.png) 20 | 21 | 那么这样后, 资源的引用路径就正确了。 22 | 23 | #### 或者(注意: 这是或者) 24 | 25 | 在 `config` 文件夹下的 `index.js` 中修改 `assetsPublicPath:'./' ` 同样也可以达到资源的相对引用。 26 | 27 | ![](http://oxyhnxrzt.bkt.clouddn.com/vue-3.png) 28 | 29 | 30 | 31 | --- 32 | 33 | #### 背景图片的引用问题 34 | 35 | 上面虽然解决了资源路径的引用问题，但是资源里面的背景图片，不想index.html 中加载资源一样， 通过 `./static/js/app.js` 引用可以正常加载， 图片资源有的是通过 css加载的，比如 `background:url(../images/logo.png) no-repeat` ，被相对打包后变成了 `url(static/img/logo.index.234234.png) no-repeat` 所以我们要保留css引用图片的正常路径: 36 | 37 | **解决:** 38 | 39 | 在 build 文件夹下的 utils.js 代码，中添加一句: 看下图 40 | 41 | ![](http://oxyhnxrzt.bkt.clouddn.com/vue-4.png) 42 | 43 | 添加如图所示的一行代码，这样不论是字体还是图片的引用问题都能解决. -------------------------------------------------------------------------------- /zepto-scrollTop/zepto-scrolltop.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by strive-智能社 on 2017/2/23. 3 | */ 4 | ;(function(_){ 5 | _.scrollTop=function(json){ 6 | json=json || {}; 7 | json.duration=json.duration || 500; 8 | json.target=json.target || 0; 9 | 10 | var body=document.body; 11 | clearInterval(body.timer); 12 | var count=Math.floor(json.duration/16); 13 | var start=document.body.scrollTop; 14 | var dis=json.target-start; 15 | 16 | var n=0; 17 | body.timer=setInterval(function(){ 18 | n++; 19 | 20 | var a=1-n/count; 21 | var cur=start+dis*(1-Math.pow(a,3)); 22 | 23 | document.body.scrollTop=cur; 24 | 25 | if(n==count){ 26 | clearInterval(body.timer); 27 | } 28 | },16); 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 | -------------------------------------------------------------------------------- /一些配置文件/gulpfile-less.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const less = require('gulp-less'); 3 | const px2rem = require('gulp-px3rem'); 4 | const rename = require('gulp-rename'); 5 | 6 | gulp.task('less', function() { 7 | gulp.src('less/*.less') 8 | .pipe(less()) 9 | .pipe(px2rem({ 10 | remUnit: 40, 11 | remPrecision: 6 12 | })) 13 | .pipe(rename(function(path) { 14 | var s = path.basename.replace('.debug', ''); 15 | 16 | path.basename = s; 17 | })) 18 | .pipe(gulp.dest('dist')) 19 | }); 20 | 21 | gulp.task('watch', function() { 22 | gulp.watch('less/*.less', ['less']); 23 | }); 24 | 25 | gulp.task('default', ['watch', 'less']); -------------------------------------------------------------------------------- /小程序-demo/README.md: -------------------------------------------------------------------------------- 1 | #### 分享几个小程序-demo 2 | 3 | > 注意: 因为用到了外部链接，所以是只能在测试使用，不能预览(发布) -------------------------------------------------------------------------------- /小程序-demo/万年历demo/app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //调用API从本地缓存中获取数据 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs); 8 | console.log('---onLaunch---'); 9 | }, 10 | onShow(){ 11 | console.log('---onShow---'); 12 | }, 13 | onHide(){ 14 | console.log('---onHide---'); 15 | }, 16 | getUserInfo:function(cb){ 17 | var that = this 18 | if(this.globalData.userInfo){ 19 | typeof cb == "function" && cb(this.globalData.userInfo) 20 | }else{ 21 | //调用登录接口 22 | wx.login({ 23 | success: function () { 24 | wx.getUserInfo({ 25 | success: function (res) { 26 | that.globalData.userInfo = res.userInfo 27 | typeof cb == "function" && cb(that.globalData.userInfo) 28 | } 29 | }) 30 | } 31 | }) 32 | } 33 | }, 34 | globalData:{ 35 | userInfo:null 36 | }, 37 | showLoading(){ 38 | wx.showToast({ 39 | title: '加载中', 40 | icon: 'loading', 41 | duration:10000 42 | }); 43 | }, 44 | hideLoading(){ 45 | wx.hideToast(); 46 | } 47 | }) -------------------------------------------------------------------------------- /小程序-demo/万年历demo/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/logs/logs", 4 | "pages/index/index" 5 | ], 6 | "window":{ 7 | "backgroundTextStyle":"light", 8 | "navigationBarBackgroundColor": "#fff", 9 | "navigationBarTitleText": "WeChat", 10 | "navigationBarTextStyle":"black" 11 | }, 12 | "debug":false 13 | } 14 | -------------------------------------------------------------------------------- /小程序-demo/万年历demo/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | box-sizing: border-box; 8 | } 9 | -------------------------------------------------------------------------------- /小程序-demo/万年历demo/pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page({ 5 | data: { 6 | newData:[] 7 | }, 8 | get(){ 9 | app.showLoading(); //显示loading 10 | 11 | var _this=this; 12 | wx.request({ 13 | url: 'http://v.juhe.cn/toutiao/index', 14 | data: { 15 | type:'top', 16 | key:'d54a7ae78f4852d38a3474e87e743a1a' 17 | }, 18 | method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT 19 | // header: {}, // 设置请求的 header 20 | success: function(res){ 21 | app.hideLoading(); //隐藏loading 22 | // success 23 | console.log(res); 24 | _this.setData({ 25 | newData:res.data.result.data 26 | }); 27 | }, 28 | fail: function() { 29 | // fail 30 | }, 31 | complete: function() { 32 | // complete 33 | } 34 | }) 35 | } 36 | }) 37 | -------------------------------------------------------------------------------- /小程序-demo/万年历demo/pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /小程序-demo/万年历demo/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{item.title}} 8 | [{{item.author_name}}] 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /小程序-demo/万年历demo/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .scroll-view{ 3 | height:300px; 4 | box-sizing: border-box; 5 | } 6 | .item{ 7 | height:30px; 8 | line-height: 30px; 9 | display: flex; 10 | justify-content: space-between; 11 | border-bottom: 1px dotted #000; 12 | font-size: 12px; 13 | } 14 | .item-title{ 15 | color: #282828; 16 | text-indent: 10px; 17 | max-width:200px; 18 | overflow: hidden; 19 | text-overflow: ellipsis; 20 | white-space: nowrap; 21 | } 22 | .author-name{ 23 | margin-right:10px; 24 | color: red; 25 | font-weight: bold; 26 | max-width:100px; 27 | overflow: hidden; 28 | } -------------------------------------------------------------------------------- /小程序-demo/万年历demo/pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | nowDate:'', 4 | calendarData:'' 5 | }, 6 | fetchCalendar(day){ 7 | var _this=this; 8 | wx.request({ 9 | url: 'http://v.juhe.cn/calendar/day', 10 | data: { 11 | date:day, 12 | key:'d7639a113e63ffe9c61d7ceb3df1200e' 13 | }, 14 | method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT 15 | // header: {}, // 设置请求的 header 16 | success: function(res){ 17 | // success 18 | console.log(res); 19 | _this.setData({ 20 | calendarData:res.data.result.data 21 | }); 22 | }, 23 | fail: function() { 24 | // fail 25 | }, 26 | complete: function() { 27 | // complete 28 | } 29 | }) 30 | }, 31 | formatDate(str){ 32 | var arr=str.match(/\d+/g); 33 | return arr[0]+'-'+parseInt(arr[1],10)+'-'+parseInt(arr[2],10); 34 | }, 35 | changeDate(ev){ 36 | //console.log(ev.detail.value); 37 | this.setData({ 38 | nowDate:ev.detail.value 39 | }); 40 | 41 | var d=this.formatDate(ev.detail.value); 42 | //console.log(d); 43 | this.fetchCalendar(d); 44 | } 45 | }); 46 | -------------------------------------------------------------------------------- /小程序-demo/万年历demo/pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "万年历" 3 | } -------------------------------------------------------------------------------- /小程序-demo/万年历demo/pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 阳历:{{nowDate}} 8 | 阴历:{{calendarData.lunar}} 9 | 星期:{{calendarData.weekday}} 10 | 年:{{calendarData.animalsYear}} 11 | 不适: {{calendarData.avoid}} 12 | 适合: {{calendarData.suit}} 13 | 14 | -------------------------------------------------------------------------------- /小程序-demo/万年历demo/pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | 2 | .item{ 3 | height:30px; 4 | color: salmon; 5 | } -------------------------------------------------------------------------------- /小程序-demo/万年历demo/utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | -------------------------------------------------------------------------------- /小程序-demo/简易音乐播放器-demo/app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //调用API从本地缓存中获取数据 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs); 8 | console.log('---onLaunch---'); 9 | }, 10 | onShow(){ 11 | console.log('---onShow---'); 12 | }, 13 | onHide(){ 14 | console.log('---onHide---'); 15 | }, 16 | getUserInfo:function(cb){ 17 | var that = this 18 | if(this.globalData.userInfo){ 19 | typeof cb == "function" && cb(this.globalData.userInfo) 20 | }else{ 21 | //调用登录接口 22 | wx.login({ 23 | success: function () { 24 | wx.getUserInfo({ 25 | success: function (res) { 26 | that.globalData.userInfo = res.userInfo 27 | typeof cb == "function" && cb(that.globalData.userInfo) 28 | } 29 | }) 30 | } 31 | }) 32 | } 33 | }, 34 | globalData:{ 35 | userInfo:null 36 | }, 37 | showLoading(){ 38 | wx.showToast({ 39 | title: '加载中', 40 | icon: 'loading', 41 | duration:10000 42 | }); 43 | }, 44 | hideLoading(){ 45 | wx.hideToast(); 46 | } 47 | }) -------------------------------------------------------------------------------- /小程序-demo/简易音乐播放器-demo/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle":"black" 10 | }, 11 | "debug":false 12 | } 13 | -------------------------------------------------------------------------------- /小程序-demo/简易音乐播放器-demo/app.wxss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /小程序-demo/简易音乐播放器-demo/pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "音乐播放" 3 | } -------------------------------------------------------------------------------- /小程序-demo/简易音乐播放器-demo/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | [{{item.artists[0].name}}] 7 | {{item.name}} 8 | 9 | 10 | -------------------------------------------------------------------------------- /小程序-demo/简易音乐播放器-demo/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .container{ 3 | height:230px; 4 | } 5 | .audio-item{ 6 | overflow: hidden; 7 | padding-left:10px; 8 | height:40px; 9 | line-height: 40px; 10 | border-bottom: 1px dashed #000; 11 | font-size: 14px; 12 | } -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //调用API从本地缓存中获取数据 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs); 8 | console.log('---onLaunch---'); 9 | }, 10 | onShow(){ 11 | console.log('---onShow---'); 12 | }, 13 | onHide(){ 14 | console.log('---onHide---'); 15 | }, 16 | getUserInfo:function(cb){ 17 | var that = this 18 | if(this.globalData.userInfo){ 19 | typeof cb == "function" && cb(this.globalData.userInfo) 20 | }else{ 21 | //调用登录接口 22 | wx.login({ 23 | success: function () { 24 | wx.getUserInfo({ 25 | success: function (res) { 26 | that.globalData.userInfo = res.userInfo 27 | typeof cb == "function" && cb(that.globalData.userInfo) 28 | } 29 | }) 30 | } 31 | }) 32 | } 33 | }, 34 | globalData:{ 35 | userInfo:null 36 | }, 37 | showLoading(){ 38 | wx.showToast({ 39 | title: '加载中', 40 | icon: 'loading', 41 | duration:10000 42 | }); 43 | }, 44 | hideLoading(){ 45 | wx.hideToast(); 46 | } 47 | }) -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/logs/logs" 5 | ], 6 | "window":{ 7 | "backgroundTextStyle":"light", 8 | "navigationBarBackgroundColor": "#fff", 9 | "navigationBarTitleText": "WeChat", 10 | "navigationBarTextStyle":"black" 11 | }, 12 | "debug":false 13 | } 14 | -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | box-sizing: border-box; 9 | } 10 | -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page({ 5 | data: { 6 | newData:[] 7 | }, 8 | get(){ 9 | app.showLoading(); //显示loading 10 | 11 | var _this=this; 12 | wx.request({ 13 | url: 'http://v.juhe.cn/toutiao/index', 14 | data: { 15 | type:'top', 16 | key:'d54a7ae78f4852d38a3474e87e743a1a' 17 | }, 18 | method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT 19 | // header: {}, // 设置请求的 header 20 | success: function(res){ 21 | app.hideLoading(); //隐藏loading 22 | // success 23 | console.log(res); 24 | _this.setData({ 25 | newData:res.data.result.data 26 | }); 27 | }, 28 | fail: function() { 29 | // fail 30 | }, 31 | complete: function() { 32 | // complete 33 | } 34 | }) 35 | } 36 | }) 37 | -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{item.title}} 8 | [{{item.author_name}}] 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .scroll-view{ 3 | height:300px; 4 | box-sizing: border-box; 5 | } 6 | .item{ 7 | height:30px; 8 | line-height: 30px; 9 | display: flex; 10 | justify-content: space-between; 11 | border-bottom: 1px dotted #000; 12 | font-size: 12px; 13 | } 14 | .item-title{ 15 | color: #282828; 16 | text-indent: 10px; 17 | max-width:200px; 18 | overflow: hidden; 19 | text-overflow: ellipsis; 20 | white-space: nowrap; 21 | } 22 | .author-name{ 23 | margin-right:10px; 24 | color: red; 25 | font-weight: bold; 26 | max-width:100px; 27 | overflow: hidden; 28 | } -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | var util = require('../../utils/util.js') 3 | Page({ 4 | data: { 5 | logs: [] 6 | }, 7 | onLoad: function () { 8 | this.setData({ 9 | logs: (wx.getStorageSync('logs') || []).map(function (log) { 10 | return util.formatTime(new Date(log)) 11 | }) 12 | }) 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /小程序-demo/获取头条数据-demo/utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | --------------------------------------------------------------------------------