首页
好物推荐
薅羊毛领红包
好看壁纸
更多
隐私政策
友情链接
时光机
搜索
1
使用 docker 快速安装 Home Assistant
6,125 阅读
2
Ipad mini2 降级到IOS10.3.3系统
4,125 阅读
3
Home Assistant集成OpenWrt
3,553 阅读
4
华为手机开启ADB进行WIFI远程调试
3,488 阅读
5
小米电视开机广告和乐播投屏广告Hosts屏蔽列表
3,291 阅读
无分类
智能家居
心得随想
文档教程
登录
Search
标签搜索
Linux
JS
教程
CSS
HTML
配置
NodeJS
Docker
解决方案
文档
Git
Java
技术培训
Hadoop
Mac
Windows
RiotJS
Python
VPS
Home Assistant
DONG HAO
累计撰写
154
篇文章
累计收到
59
条评论
首页
栏目
无分类
智能家居
心得随想
文档教程
页面
好物推荐
薅羊毛领红包
好看壁纸
隐私政策
友情链接
时光机
搜索到
124
篇与
无分类
的结果
2017-11-30
pyspider爬虫爬取电影网站代码
#!/usr/bin/env python# -*- encoding: utf-8 -*- # Created on 2017-11-30 15:46:23 # Project: ttwanda_3 from pyspider.libs.base_handler import * import re import json from pyspider.libs.utils import md5string class Handler(BaseHandler): crawl_config = { } @every(minutes=24 * 60) def on_start(self): self.crawl('http://www.ttwanda.com', callback=self.index_page) @config(age=10 * 24 * 60 * 60) def index_page(self, response): for each in response.doc('a[href^="http"]').items(): if re.match(u"http://www.ttwanda.com/film/page/\d+|http://www.ttwanda.com/film$", each.attr.href): self.result={} self.crawl(each.attr.href, callback=self.film_list_page, save=self.result) def film_list_page(self, response): for each in response.doc('article.u-movie').items(): self.result = response.save self.result['poster'] = each('img').attr['data-original'] self.result['star'] = each('.pingfen').text() self.crawl(each('.list-poster a[href^="http"]').attr.href, callback=self.film_detail_page, save=self.result,priority=1) self.crawl(response.doc('.next-page a').attr('href'), callback=self.index_page) def film_detail_page(self, response): self.result = response.save for each in response.doc('.mplay-list a').items(): self.crawl(each.attr.href, callback=self.film_video_page, save=self.result) def film_video_page(self, response): self.result = response.save self.result['title'] = self.response.doc('.player_box>strong').text() self.result['url'] = self.response.url #print(self.get_taskid(self.task)) for each in response.doc('script').items(): self.search = re.search(r'var play_type="(\w+)",vid="(\w+)";',each.text()) if self.search: self.result['vtype'] = self.search.group(1) self.result['vid'] = self.search.group(2) return self.result
2017年11月30日
131 阅读
0 评论
0 点赞
2017-11-21
JS差距时间代码
经常看到一些时间提示是 1小时前,2分钟前,3天前等等的差距时间,这些是怎么实现的呢?看下面的方法!代码实现function timeDifference(tmpTime) { var mm = 1000; var minute = mm * 60; var hour = minute * 60; var day = hour * 24; var month = day * 30; var ansTimeDifference = 0; var tmpTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi, "/")) : new Date().getTime(); var nowTime = new Date().getTime(); var tmpTimeDifference = nowTime - tmpTimeStamp; if (tmpTimeDifference < 0) { console.warn("开始日期大于结束日期,计算失败!"); return 0; } var DifferebceMonth = tmpTimeDifference / month; var DifferebceWeek = tmpTimeDifference / (7 * day); var DifferebceDay = tmpTimeDifference / day; var DifferebceHour = tmpTimeDifference / hour; var DifferebceMinute = tmpTimeDifference / minute; if (DifferebceMonth >= 1) { return tmpTime; } else if (DifferebceWeek >= 1) { ansTimeDifference = parseInt(DifferebceWeek) + "个星期前"; } else if (DifferebceDay >= 1) { ansTimeDifference = parseInt(DifferebceDay) + "天前"; } else if (DifferebceHour >= 1) { ansTimeDifference = parseInt(DifferebceHour) + "个小时前"; } else if (DifferebceMinute >= 1) { ansTimeDifference = parseInt(DifferebceMinute) + "分钟前"; } else { ansTimeDifference = "刚刚"; } return ansTimeDifference; };
2017年11月21日
142 阅读
0 评论
0 点赞
2017-11-21
axios异步转同步请求模式
axios是一个优秀的http异步请求库,但是很多时候需要做一些同步请求,于是我封装了下同步的方法axiosPro 函数代码const axios = require('axios') function axiosPro(axiosArgs) { const { method, url, data, params, headers, responseType } = axiosArgs return new Promise(function (resolve, reject) { axios({ method: method, url: url, data: data, params: params, headers: headers, responseType: responseType }).then(function (ret) { resolve(ret); }).catch(function (err) { reject(err); }) }) }; 使用module.exports = async ctx => { const ret = await axiosPro(ctx.request.body) console.log(ret.data)//同步输出结果 ctx.body = ret.data }
2017年11月21日
761 阅读
0 评论
0 点赞
2017-11-21
Nodejs断点续传服务示例
断点续传:从文件已经下载的地方开始继续下载。 在以前版本的 HTTP 协议是不支持断点的,HTTP/1.1 开始就支持了。 一般断点下载时才用到 Range 和 Content-Range 实体头 代码示例http.createServer(function(request, response) { var pathname = url.parse(request.url).pathname; var realpath = path.join(__dirname, '..', path.normalize(pathname.replace(/\.\./g, ""))); var ext = path.extname(realpath); ext = ext ? ext.slice(1) : "unknown"; var contentType = mime[ext].contentType; fs.exists(realpath, function(exists) { if (!exists) { response.writeHead(404, { 'Content-Type': 'text/plain' }); response.write("This request URL " + pathname + "was not found on this server"); response.end(); } else { response.setHeader("Content-Type", contentType); var stats = fs.statSync(realpath); if (request.headers["range"]) { var range = parseRange(request.headers["range"], stats.size); if (range) { response.setHeader("Content-Range", "bytes " + range.start + "-" + range.end + "/" + stats.size); response.setHeader("Content-Length", (range.end - range.start + 1)); var stream = fs.createReadStream(realpath, { "start": range.start, "end": range.end }); response.writeHead('206', "Partial Content"); stream.pipe(response); } else { response.removeHeader("Content-Length"); response.writeHead(416, "Request Range Not Satisfiable"); response.end(); } } else { var stream = fs.createReadStream(realpath); response.writeHead('200', "Partial Content"); stream.pipe(response); } } }); }).listen(8080) parseRange 函数function parseRange(str, size) { if (str.indexOf(",") != -1) { return; } if (str.indexOf("=") != -1) { var pos = str.indexOf("=") var str = str.substr(6, str.length) } var range = str.split("-"); var start = parseInt(range[0], 10) var end = parseInt(range[1], 10) || size - 1 // Case: -100 if (isNaN(start)) { start = size - end; end = size - 1; // Case: 100- } else if (isNaN(end)) { end = size - 1; } // Invalid if (isNaN(start) || isNaN(end) || start > end || end > size) { return; } return { start: start, end: end }; }; mime{ "css": { "contentType": "text/css" }, "gif": { "contentType": "image/gif", "mediaType": "image" }, "html": { "contentType": "text/html" }, "ico": { "contentType": "image/x-icon", "mediaType": "image" }, "jpeg": { "contentType": "image/jpeg", "mediaType": "image" }, "jpg": { "contentType": "image/jpeg", "mediaType": "image" }, "js": { "contentType": "text/javascript" }, "json": { "contentType": "application/json" }, "pdf": { "contentType": "application/pdf" }, "png": { "contentType": "image/png", "mediaType": "image" }, "svg": { "contentType": "image/svg+xml", "mediaType": "image" }, "swf": { "contentType": "application/x-shockwave-flash" }, "tiff": { "contentType": "image/tiff" }, "txt": { "contentType": "text/plain" }, "wav": { "contentType": "audio/x-wav" }, "wma": { "contentType": "audio/x-ms-wma" }, "wmv": { "contentType": "video/x-ms-wmv" }, "xml": { "contentType": "text/xml" }, "mp4": { "contentType": "video/mp4", "mediaType": "video" }, "m3u8": { "contentType": "application/x-mpegURL", "mediaType": "video" }, "unkown": { "contentType": "application/octet-stream" } }
2017年11月21日
208 阅读
0 评论
0 点赞
2017-11-15
JS函数节流(throttle)与函数去抖(debounce)
在浏览器中,往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。相关事件如 resize , scroll , mousemove 等。在实际场景中,需求大多为停止改变大小n毫秒后执行后续处理或者是以一定的频率执行后续处理。针对这两种需求就出现了 debounce 和 throttle 两种解决办法。throttle 节流如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。实现代码function(func, wait, options) { var timeout, context, args, result; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : new Date().getTime(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; var throttled = function() { var now = new Date().getTime(); if (!previous && options.leading === false) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; throttled.cancel = function() { clearTimeout(timeout); previous = 0; timeout = context = args = null; }; return throttled; } 使用代码tag.onmousemoveApplet = app.throttle(function() { console.log('1s内响应一次!'); }, 1000); debounce 去抖如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。实现代码function(func, wait, immediate) { var timeout, result; var later = function(context, args) { timeout = null; if (args) result = func.apply(context, args); }; var debounced = restArgs(function(args) { if (timeout) clearTimeout(timeout); if (immediate) { var callNow = !timeout; timeout = setTimeout(later, wait); if (callNow) result = func.apply(this, args); } else { timeout = _.delay(later, wait, this, args); } return result; }); debounced.cancel = function() { clearTimeout(timeout); timeout = null; }; return debounced; } 使用代码tag.onmousemoveApplet = app.throttle(function() { console.log('停下1s后响应一次!'); }, 1000);
2017年11月15日
136 阅读
0 评论
0 点赞
2017-11-09
js多定时器方法封装
创建多个定时器(setInterval),包含了开始、停止方法。var timer = { setTimeout: { start: function(_timerName, _func, _interval) { if (timer.setTimeout[_timerName]) { timer.setTimeout.stop(_timerName); } timer.setTimeout[_timerName] = setTimeout(_func, _interval || 1000); }, stop: function(_timerName) { clearTimeout(timer.setTimeout[_timerName]); timer.setTimeout[_timerName] = null; } }, setInterval: { start: function(_timerName, _func, _interval) { if (timer.setInterval[_timerName]) { timer.setInterval.stop(_timerName); } timer.setInterval[_timerName] = setInterval(_func, _interval || 1000); }, stop: function(_timerName) { clearInterval(timer.setInterval[_timerName]); timer.setInterval[_timerName] = null; } } }; 使用function recordStatus1() { console.log('recordStatus1'); } function recordStatus2() { console.log('recordStatus2'); } ------- 开始 ------ timer.setTimeout.start('RecordTimer1', recordStatus1,1000); timer.setInterval.start('RecordTimer2', recordStatus2,1000); ------- 停止 ------ timer.setTimeout.stop('RecordTimer1'); timer.setInterval.stop('RecordTimer2');
2017年11月09日
352 阅读
0 评论
0 点赞
2017-10-26
CSS文字霓虹灯效果
效果html代码<svg viewBox="0 0 600 300"> <!-- Symbol --> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="50%" dy=".35em"> 文字 </text> </symbol> <!-- Duplicate symbols --> <use xlink:href="#s-text" class="text"></use> <use xlink:href="#s-text" class="text"></use> <use xlink:href="#s-text" class="text"></use> <use xlink:href="#s-text" class="text"></use> <use xlink:href="#s-text" class="text"></use> </svg> css代码body { background: #111; background-size: .2em 100%; font: 14.5em/1 Open Sans, Impact; text-transform: uppercase; margin: 0; } svg { position: absolute; width: 100%; height: 100%; } .text { fill: none; stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 70 330; stroke-dashoffset: 0; -webkit-animation: stroke 6s infinite linear; animation: stroke 6s infinite linear; } .text:nth-child(5n + 1) { stroke: #F2385A; -webkit-animation-delay: -1.2s; animation-delay: -1.2s; } .text:nth-child(5n + 2) { stroke: #F5A503; -webkit-animation-delay: -2.4s; animation-delay: -2.4s; } .text:nth-child(5n + 3) { stroke: #E9F1DF; -webkit-animation-delay: -3.6s; animation-delay: -3.6s; } .text:nth-child(5n + 4) { stroke: #56D9CD; -webkit-animation-delay: -4.8s; animation-delay: -4.8s; } .text:nth-child(5n + 5) { stroke: #3AA1BF; -webkit-animation-delay: -6s; animation-delay: -6s; } @-webkit-keyframes stroke { 100% { stroke-dashoffset: -400; } } @keyframes stroke { 100% { stroke-dashoffset: -400; } }
2017年10月26日
182 阅读
0 评论
0 点赞
2017-10-23
JS插件的几种写法
做JS插件非常考验自己对代码封装以及整体控制和编程思想的理解,下面我们看下JS插件的几种通用写法面向对象思想,类方式//自定义类 function plugin(){} //提供默认参数 plugin.prototype.str = "default param"; //提供方法(如果不传参,则使用默认参数) plugin.prototype.firstFunc = function(str = this.str){ alert(str); } //创建"对象" var p = new plugin(); //调用方法 p.firstFunc("Hello ! I am firstFunc");//Hello ! I am firstFunc p.firstFunc();//default param 闭包方式var plugin =(function(){ function _firstFunc(str){ alert(str); }; return{ firstFunc: _firstFunc, }; })(); 闭包方式2(function(){ //定义一些默认参数 var _options={ default_word:"default hello" } //定义一些api var _plugin_api = { function _config(opts) { if (!opts) return options; for (var key in opts) { options[key] = opts[key]; } return this; }, firstFunc:function(str = _options.default_word){ alert(str); return this;//返回当前方法 }, secondFunc:function(){ alert("secondFunc"); return this;//返回当前方法 } } //这里确定了插件的名称 this.CJPlugin = _plugin_api; })(); CJPlugin.firstFunc("hello");//hello CJPlugin.firstFunc();//default hello CJPlugin.secondFunc();//secondFunc 模块化; !function (factory) { "use strict"; if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') { var target = module['exports'] || exports; factory(target); } else if (typeof define === 'function' && define['amd']) { define(['exports'], factory); } else { factory(window['myjssdk'] = {}); } }(function (HExports) { var exports = typeof HExports !== 'undefined' ? HExports : {}; exports.v = "2.0.0 alpha"; // 基础方法 exports.timeDifference = function (tmpTime) { var mm = 1000; var minute = mm * 60; var hour = minute * 60; var day = hour * 24; var month = day * 30; var ansTimeDifference = 0; var tmpTimeStamp = tmpTime ? Date.parse(tmpTime.replace(/-/gi, "/")) : new Date().getTime(); var nowTime = new Date().getTime(); var tmpTimeDifference = nowTime - tmpTimeStamp; if (tmpTimeDifference < 0) { console.warn("开始日期大于结束日期,计算失败!"); return 0; } var DifferebceMonth = tmpTimeDifference / month; var DifferebceWeek = tmpTimeDifference / (7 * day); var DifferebceDay = tmpTimeDifference / day; var DifferebceHour = tmpTimeDifference / hour; var DifferebceMinute = tmpTimeDifference / minute; if (DifferebceMonth >= 1) { return tmpTime; } else if (DifferebceWeek >= 1) { ansTimeDifference = parseInt(DifferebceWeek) + "个星期前"; } else if (DifferebceDay >= 1) { ansTimeDifference = parseInt(DifferebceDay) + "天前"; } else if (DifferebceHour >= 1) { ansTimeDifference = parseInt(DifferebceHour) + "个小时前"; } else if (DifferebceMinute >= 1) { ansTimeDifference = parseInt(DifferebceMinute) + "分钟前"; } else { ansTimeDifference = "刚刚"; } return ansTimeDifference; }; });
2017年10月23日
308 阅读
0 评论
0 点赞
2017-10-22
安装ios描述文件禁止ios设备自动升级
最新IOS系统出来,不一定完美,有时候还有BUG,如果不想升级或者被静默下载安装,可以参考本文用safari访问下面的网址:https://oldcat.me/web/NOOTA9.mobileconfig允许安装设备描述文件:按照提示重启,即可禁止升级:再打开通用 > 软件更新 如下:如果你想恢复升级系统的话,进入设置 > 通用 > 描述文件,删除tvOS beta - Apple Developervl就可以了
2017年10月22日
150 阅读
0 评论
0 点赞
2017-10-20
Nginx解决下载json静态文件乱码
Linux下采用的是utf-8的字符编码,默认情况下我们的浏览器在服务器没有指定编码或者静态页面没有声明编码的情况下会以GBK的编码去渲染页面,这样默认情况下返回中文的话浏览器用gbk来解析utf-8编码,显然会出现乱码,这时要在nginx location块中主动添加header来输出正确编码添加配置add_header Content-Type 'text/html; charset=utf-8';示例location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|ico)$ { expires 30d; } location ~ .*\.(js|css)?$ { expires 7d; } location ~ { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; add_header Content-Type 'text/html; charset=utf-8'; } }
2017年10月20日
849 阅读
0 评论
0 点赞
2017-10-17
Sublime Text个人自定义按键绑定
插件推荐 html格式化插件 HTMLBeautify js格式化插件 JsFormat css格式化插件 CSS Format 快捷键绑定找到 Key Bindings 菜单,打开如图在右侧加入如下代码[{ "keys": ["ctrl+alt+j"], "command": "js_format", "context": [{ "key": "selector", "operator": "equal", "operand": "source.js,source.json" }] }, { "keys": ["ctrl+alt+c"], "command": "css_format", "args": { "action": "expand" } }, { "keys": ["ctrl+alt+h"], "command": "html_beautify" }] 快捷键解释 ctrl+alt+h html格式化,可部分选中,不选则当前文件。 ctrl+alt+j js格式化,可部分选中,不选则当前文件。 ctrl+alt+c css格式化,可部分选中,不选则当前文件。
2017年10月17日
398 阅读
0 评论
0 点赞
2017-10-16
Mac下Mysql的启停及自启动方法
Mac Mysql 启停命令mysql.server start mysql.server stop mysql.server restart Mac Mysql自启动配置 用brew安装的可以通过以下语句查看安装目录 brew --prefix mysql 从安装目录下找到homebrew.mxcl.mysql.plist文件复制到~/Library/LaunchAgents目录下 cp /usr/local/opt/mysql/homebrew.mxcl.mysql.plist ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist 设置自启动 launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.mysql.plist 如果不是brew命令安装的,没有homebrew.mxcl.mysql.plist文件,则自己新建如下,再按照步骤执行 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>KeepAlive</key> <true/> <key>Label</key> <string>com.mysql.mysqld</string> <key>ProgramArguments</key> <array> <string>/usr/local/mysql/bin/mysqld_safe</string> <string>--user=root</string> </array> </dict> </plist>
2017年10月16日
138 阅读
0 评论
0 点赞
2017-10-13
GWF列表
https://github.com/gfwlist/gfwlist/blob/master/gfwlist.txthttps://raw.githubusercontent.com/gfwlist/gfwlist/master/gfwlist.txt
2017年10月13日
564 阅读
0 评论
0 点赞
2017-09-26
CSS之Filters滤镜
css提供了很多种的滤镜:* drop-shadow * sepia * blur * hue-rotate * invert * brightness * contrast * opacity * grayscale * saturate drop-shadow 下落式阴影添加阴影效果可不只有text-shadow和box-shadow哦,text-shadow是为文字添加阴影,box-shadow给一个元素添加阴影,drop-shadow在图片是非png情况下和box-shadow有些相似,然而png图片才是她大放异彩的地方拿一张jpg图片来举个栗子看下drop-shadow 和 box-shadow的区别://从左往右依次是原图,添加drop-shadow-jpg,添加box-shadow .drop-shadow-jpg{ -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74)); } .box-shadow{ box-shadow: 10px 10px 10px rgba(255,235,59,0.74); } drop-shadow明显更柔和一些,并且图片的上面和左边也是有阴影的哦。再来看下drop-shadow在png图片的表现吧,左边为原图:.drop-shadow-png{ -webkit-filter: drop-shadow(10px 10px 10px rgba(255,235,59,0.74)); } 因为png图片背景是透明的,所以drop-shadow直接作用于图片的内容,图中的小女孩是不是更萌了呢。sepia 乌贼墨,深褐色,深棕色想要个老照片效果?.sepia-50{ -webkit-filter: sepia(50%); } .sepia-100{ -webkit-filter: sepia(100%) } //safari浏览器不支持 //参数可以是小数也可以是百分比,为0的时候是左边原图的效果,1或100%是最右的图 blur 模糊背景图片太清晰喧宾夺主了,可以设置模糊的效果啊.blur{ -webkit-filter: blur(3px); } blur用来给图像设置高斯模糊。参数值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起,这个值设置为百分比除外的css长度值,默认是0效果为左边的原图,值越大越模糊,上面的图片设置成100px时就什么都没有了。opacity 透明度opacity会调整图片的透明度,这个和非filter中的opacity效果是一样哒,但是并不是一个属性哦,因为他们是可以叠加使用的.opacity-20{ opacity: 0.2; } .filter-opacity-20{ filter:opacity(0.2) } .opacity-both{ opacity: 0.2; filter:opacity(0.2) } 他们接受的参数也是有一些差别的,opacity只能接受小数,filter:opactiy()既可以接受小数也可以接受百分比,值越小越透明。hue-rotate 色相旋转hue-rotate通过改变图片的色相来改变图片.hue-rotate-90{ -webkit-filter: hue-rotate(90deg); } .hue-rotate-270{ -webkit-filter: hue-rotate(270deg); } hue-rotate 参数是一个角度值,他会接受这个值并把图片中的颜色的色相做对应的旋转invert 反转invert会把图片上的所有颜色进行反转,如果是希望做个相机底片效果,真的是太合适了.invert-20{ filter: invert(20%); } .invert-100{ filter: invert(100%) } 和hue-rotate相比,直接反转就用不着接受颜色变化的角度了,但是你可以设置0~100%来控制反转的程度saturate 饱和度色彩三要素色相,明度,饱和度。饱和度也即颜色的纯度,彩度。无彩色的色饱和度为0,也就是上面的grayscale灰度值为1的时候,饱和度越高,颜色中的灰度越低饱和度100%时为原图,接受大于100%的值。brightness 亮度说完了色相和饱和度再来看看brightness,brightness给图片应用一种线性乘法来调整整个图片的亮度,效果和手机电脑上的的亮度调节是一样的.brightness-4{ filter:brightness(40%) } .brightness-8{ filter:brightness(80%) } brightness的参数可以用百分比来表示也可以用小数来表示,当参数值为0的时候整个图片都是黑色的了,超过100%的时候比原图更亮一些contrast 对比度contrast用来调整图像的对比度.contrast-50 { filter: contrast(50%) } .contrast-200{ filter:contrast(200%) } contrast()的参数接受百分比形式的数值也接受小数形式的,值为0 的时候是整个图片都是灰黑色的,为1时是原图,值越大对比度越大,默认值为1。grayscale 灰度模式有格调的灰度模式开启.gray-scale-50{ filter:grayscale(50%) } .gray-scale-100{ filter:grayscale(100%) } grayscale的参数接受百分比和小数,默认参数是100%,完全灰度,1以内的值越大越靠近完全灰度,大于等于1的值的效果是一样哒以上转载自: https://zhuanlan.zhihu.com/p/28422426 ,尊重原创示例黑白效果(function(){ document.querySelector('body').style['filter']='grayscale(100%)'; })() 模糊效果(function(){ document.querySelector('body').style['-webkit-filter']='blur(3px)'; })() 反色效果(function(){ document.querySelector('body').style['filter']='invert(100%)'; })()
2017年09月26日
156 阅读
0 评论
0 点赞
2017-08-30
微信小程序能做什么?
微信小程序很火,但是很多同学不知道小程序能做什么,希望这篇文章能对大家有所帮助。微信小程序是什么?微信小程序是腾讯2017年1月9日推出的一种无需下载即可使用的应用。用户只要搜一搜或者扫一扫即可打开应用。微信小程序有什么优势? 1.微信小程序进一步扩展了二维码的能力。 2.用户通过扫一扫或者搜一下即可打开应用,它实现了应用“触手可及”的梦想 。 3.安装 / 卸载 / 使用小程序,就像关注 / 取关 / 进入公众号一样简单。 4.无需下载,用完即走,不需要登录,不用担心装个 app 占你空间。 5.开发成本非常低。只要几万元就可以。而开发一个APP的价格便宜的几万元,贵的几十万元。 微信小程序如何推广? 1.通过微信群的转发 2.有线下实体店的商家,可以在门口摆放小程序展架,扫码体验小程序,领积分,领红包等等营销工具吸引客户扫码体验。 3.与微信公众号绑定 微信小程序的支撑能力 1.视图容器:视图(View)、滚动视图、Swiper 2.基础内容:图标、文本、进度条 3.表单组件:按钮、表单等等 4.操作反馈 5.导航 6.媒体组建:音频、图片、视频 7.地图 8.画布 9.文件操作能力 10.网络:上传下载能力、WebSocket 11.数据:数据缓存能力 12.位置:获取位置、查看位置 13.设备:网络状态、系统信息、重力感应、罗盘 14.界面:设置导航条、导航、动画、绘图等等 15.开放接口:登录,包括签名加密,用户信息、微信支付、模板消息 微信小程序的限制 1.不支持HTML、没有 Dom。网页用的 JS、CSS 基本要全部重写,WXML 的语法和 HTML 差异还挺大,基本是一个个照着手册的属性去改。CSS 选择器不支持级联。 2.小程序源码打包后的大小限制为2M,超大传不上去。单次通过 wx.request传输的数据最大也是2M。 3.MINA 框架实现的 tab bar,最多5个 tab;通过 wx. navigateTo 推入后台的页面最多5层,超过会无法打开新页面。 4.小程序没有 webview 控件,自带的 view 和 text 又不支持图文混排,还不能动态 set WXML …… 所以小程序上的富文本也就只能做到固定焦点图+纯文本+emoji了 5.不支持 A 标签,无法打开普通网页。
2017年08月30日
176 阅读
0 评论
0 点赞
2017-08-16
Slack之incoming-webhook集成教程
Incoming Webhooks 是发送一段消息到Slack组的简单方式,它是通过HTTP发送携带特定json数据的post请求到slack服务器来实现的。 Incoming Webhooks 可用于服务器异常通知,定时任务执行通知等等应用场景。 效果演示集成方法 1.组创建人访问如下链接 https://my.slack.com/services/new/incoming-webhook/ 2.选择对应的channel或者人,点击 Add Incoming WebHooks integration 3.然后设置好自定义的一些配置 4.最后 Save Settings 即可
2017年08月16日
780 阅读
0 评论
0 点赞
2017-07-19
linux安装htop来管理进程
源安装 On RHEL/CentOS – 32-bit OS -------------- For RHEL/CentOS 6 -------------- # wget http://download.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm # rpm -ihv epel-release-6-8.noarch.rpm -------------- For RHEL/CentOS 5 -------------- # wget http://download.fedoraproject.org/pub/epel/5/i386/epel-release-5-4.noarch.rpm # rpm -ihv epel-release-5-4.noarch.rpm On RHEL/CentOS – 64-bit OS -------------- For RHEL/CentOS 7 -------------- # wget https://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel-release-7-13.noarch.rpm # rpm -ihv epel-release-7-13.noarch.rpm -------------- For RHEL/CentOS 6 -------------- # wget http://download.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm # rpm -ihv epel-release-6-8.noarch.rpm -------------- For RHEL/CentOS 5 -------------- # wget http://download.fedoraproject.org/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm # rpm -ihv epel-release-5-4.noarch.rpm 添加好源后执行安装 # yum install htop On Fedora OS # yum install htop # dnf install htop [On Fedora 22+ releases] On Debian and Ubuntu # sudo apt-get install htop 编译安装 On RHEL/CentOS and Fedora # yum groupinstall "Development Tools" # yum install ncurses ncurses-devel # wget http://hisham.hm/htop/releases/2.0.2/htop-2.0.2.tar.gz # tar xvfvz htop-2.0.2.tar.gz # cd htop-2.0.2 On Debian and Ubuntu $ sudo apt-get install build-essential $ sudo apt-get install libncurses5-dev libncursesw5-dev $ wget http://hisham.hm/htop/releases/2.0.2/htop-2.0.2.tar.gz $ tar xvfvz htop-2.0.2.tar.gz $ cd htop-2.0.2 下载好了源码之后编译安装 # ./configure # make # make install 运行htop htop
2017年07月19日
585 阅读
0 评论
0 点赞
2017-07-11
让整个网站变成灰色的做法
方法一,html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} <!-- 可以是整个网站变成灰色的 --> 方法二,html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); } 使用方法:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。 如果网站没有使用CSS,可以在网页/模板的HTML代码和 之间插入:<style> html{filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1);} </style> 有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 请将网页最头部的替换为以上代码。有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的<object …>和之间插入:最简单的把页面变成灰色的代码是在head 之间加 html { FILTER: gray } 方法三, html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
2017年07月11日
68 阅读
0 评论
0 点赞
2017-07-10
java试题
一、判断题: String是最基本的数据类型。 new String(“abc”).equals(newString(“abc”)的结果为true。 new StringBuffer(“abc”).equals(newStringBuffer(“abc”)的结果为true。 接口可继承接口。 抽象类不可以实现(implements)接口。 抽象类可继承具体类(concrete class)。 抽象类中可以有静态的main方法。 抽象类不能创建实例对象和允许有abstract方法。 二、选择题:1.下列那些是正确的JAVA字符串?多选() A. """" B. "Oxzabc" C. """ D. "\t\t\r\n" E. "boolean"52.欲构造ArrayList类的一个实例,此类继承了List接口,下列哪个方法是正确的 ? A、 ArrayList myList=new Object(); B、 List myList=new ArrayList(); C、 ArrayList myList=new List(); D、 List myList=new List();3.下列关于Java知识点哪些说法是正确的?() A. 局部内部类不能访问外部类的变量和方法 B. 内部类可以嵌套使用 C. 成员内部类不能定义静态内部类 D. 内部类不可以继承类三、程序题:1,将输入的数组数字从小到达进行排序并且去掉重复数据,如数组 [3,3,4,5,1,4] 排序和去重后为[1,3,4,5]。请写出代码实现:2,给定一个int 数组,求出所有元素的最大值,最小值,平均值,和值,并输出出来。3,打印:package com.acxiom.java.base; public class Exam1 { int id; Integer age; public static void main(String[] args) { Exam1 exam = new Exam1(); System.out.println(exam.id); System.out.println(exam.age); Integer a = new Integer(1); Integer b = 1; int c = 1; Integer d = 1; System.out.println("a == b ? " + (a == b)); System.out.println("a equals b ? " + (a.equals(b))); System.out.println("a == c ? " + (a == c)); System.out.println("c == b ? " + (c == b)); System.out.println("d == b ? " + (d == b)); Integer dd = 200; Integer ee = 200; System.out.println("dd == ee ? " + (dd == ee)); Integer ff = 3 + new Integer(3); Integer gg = new Integer(6); Integer hh = 6; System.out.println("ff == gg ? " + (ff == gg)); System.out.println("ff == hh ? " + (ff == hh)); } } 4,打印:package com.acxiom.java.base; public class Exam3 { static class A { public void show(C obj) { print("A + C"); } public void show(A obj) { print("A + A"); } } static class B extends A { public void show(B obj) { print("B + B"); } public void show(A obj) { print("B + A"); } } static class C extends B {} static class D extends B { } public static void main(String[] args) { A a = new A(); B b = new B(); C c = new C(); a.show(a); a.show(c); b.show(a); b.show(b); b.show(c); c.show(a); c.show(b); A a2 = new B(); a2.show(a); a2.show(b); D d = new D(); b.show(d); } static int i = 1; public static void print(String msg) { System.out.println(i + " = " + msg); i++; } }
2017年07月10日
83 阅读
0 评论
0 点赞
2017-07-06
基础培训-前端初探
前端最最基本的三个核心技能:HTML、JS、CSS,其中最能代表前端的就是Javascript了。 概念前端开发入门学习有:HTML、CSS、JavaScript(简称JS)这三个部分。所以在学习之前我们需要先明确三个概念: HTML——内容层,它的作用是表示一个HTML标签在页面里是个什么角色。 CSS——样式层,它的作用是表示一块内容以什么样的样式(字体、大小、颜色、宽高等)显示。 JS——行为层,它的作用是当用户触发某些行为时,会给内容和样式带来什么样的改变。 学习路线图API快速查找工具http://devdocs.io/ 盒模型盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。Jquery模糊选择器1. name前缀为aa的所有div的jquery对象 $("div[name^='aa']"); 2. name后缀为aa的所有div的jquery对象 $("div[name$='aa']"); 3. name中包含aa的所有div的jquery对象 $("div[id*='aa']"); 4. input标签类型是text,name="aa"的对象 $("input:text[name='aa']") 以上返回的都是jquery的集合对象,因此都可以用each方法进行遍历。Ajax$.ajax({ type: 'GET', // 这是请求的方式 可以是GET方式也可以是POST方式, 默认是GET url: ' xxx.php ', // 这是请求的连接地址 一般情况下这个地址是后台给前端的一个连接,直接写就可以 dataType: 'json', // 这是后台返回的数据类型 一般情况下都是一个json数据, 前端遍历一下就OK async: true, // 默认为true,默认为true时,所有请求均为异步请求,如果需要发送同步请求,需设置为false, timeout: 8000, // 设置请求超时时间(毫秒)。此设置将覆盖全局设置 data: { // 要传递的参数 'xxx' : 'xxx' }, beforeSend: function () { // 在发送请求前就开始执行 (一般用来显示loading图) }, success: function (data) { // 发送请求成功后开始执行,data是请求成功后,返回的数据 }, complete: function () { //当请求完成后开始执行,无论成功或是失败都会执行 (一般用来隐藏loading图) }, error: function (xhr, textStatus, errorThrown) { // 请求失败后就开始执行,请求超时后,在这里执行请求超时后要执行的函数 } }).done(function () { // 这个函数是在ajax数据加载完之后,对数据进行的判断,在涉及到对ajax数据进行操作无效时,在这个函数里面写是可以起到效果的 });
2017年07月06日
70 阅读
0 评论
0 点赞
1
2
3
4
...
7